Features
These are the features demonstrated on this page (click for more details):-
Pannable and zoomable map
On desktop you can pan by dragging with the mouse poointer, and zoom with the mouse wheel or the on screen controls.
On mobile you can pan by dragging with your finger, and pinch to zoom or the use the on screen controls, you can also pinch to rotate.
-
Multiple markers
Each marker can have a different icon.
-
Clickable markers
Clicking a marker opens an information popup.
-
REST Data Source
Marker data is loaded from a REST query.
The format of the REST data is compatible with DataTables.
-
Stored map state
Map centre and zoom level are saved for when the user returns.
-
User location
Move to the user's current physical location, accessible from the menu icon.
-
Show current location
Toggled from the menu icon.
Displays a map marker for the user's current location.
Tracks and updates the user's location marker as they move.
-
Add a location marker
Accessible from the menu icon.
This also demonstrates:
-
Window control API
My own JavaScript window control API, for providing standardised tools to display a popup editor window.
-
Postcode format valaidation
My ownJavaScript tools for validating the format of postcode.
-
Post and Put to REST
Posting and Putting changes to the server via a REST API.
-
Postcode to coordinates
Looking up the coordinates of a postcode for plotting on the map.
-
Dialogue box API
My own JavaScript dialogue control API, for providing standardised tools to display a popup dialogue.
Try adding a postcode that is in a valid format, but does not exist (for example "PO2A 1AA").
-
-
Edit/delete a location marker
The user can click on a marker they have added to display the infromation popup, this contains a Edit and Delete buttons.
The user can only edit or delete locations they have added, the default locations are not editable or deletable.
-
Popup menu
The blue menu icon in the bottom left shows a popup of menu options.