A wordpress plugin to provide geolocation to posts & pages and display interactive maps (optionally with annotations). Uses leaflet for map display. Supports OpenStreetMap, OpenTopoMap and Mapbox base maps, custom WMTS raster sources and GeoJSON vector overlays.
This is the active, unstable development branch. Use at your own risk - stable releases to the Wordpress Plugin Directory coming soon!
It only contains the raw sources and requires a development environment to build the actual plugin. To use Mapbox instead of the default OpenStreetMap tiles, you will need a Mapbox access token.
- Run
npm install && npm run buildto build. - If all goes well, upload to your server (if not, please let me know!)
- Activate the plugin
- To use Mapbox, go to Plugins->stepman and paste your access token there.
After installing and activating the plugin, there will be a new sidebar in your Gutenberg editor (look for the globe icon in the top right corner). If it does not show up directly, you can access it through the More tools and options section (three vertical dots) at Plugins -> Geolocation.
You can place as many polygons, circles and/or markers on the map as you see fit to represent your page or post.
The block can be found in the Embeds section, or just search for "Map Block". You can pan / zoom the map to a suitable location and this will be stored once you hit the save / update button. The sidebar gives you control over how much space the map block is allowed to take up (recommended settings are 100% width, and a suitable vertical size in pixels).
- Interaction (pan/zoom) on the front end can be disabled (but remains enabled in the editor).
- Post geolocation annotations can be optionally displayed as well.
- You can specify a custom WMTS URL & attribution to display as a raster overlay above the base map.
Adding multiple map blocks works as expected.
This plugin also extends the WordPress media library to support GeoJSON files and display them in the map view.
Annotations are stored as a serialized GeoJSON FeatureCollection in the stepman_meta_geolocation field. GeoJSON does not directly support circles; those are therefore stored as points with an additional radius property:
{ "type": "FeatureCollection",
"features": [
{
/* -- a circle -- */
"type": "Feature",
"properties" : {
"radius": 129.59796699348766
},
"geometry": {
"type": "Point",
"coordinates": [ -15.112295, 64.289798 ]
} },
{
/* -- a marker -- */
"type":"Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [ -15.108519, 64.29475 ]
} }
]
}Display styles can be changed by providing a style property as well, overriding any Path options as required:
{
/* -- a red circle -- */
"type": "Feature",
"properties" : {
"radius": 100.0
"style" : {
"color": "#ff000"
}
},
"geometry": {
"type": "Point",
"coordinates": [ -15.112295, 64.289798 ]
}Both features (drawing circles from point features and custom, per-feature draw styles) are also supported for GeoJSON files loaded from the WordPress media library.
Stephan Mantler <step@stepman.is>
This project is licensed under the GPL v3 License - see the accompanying LICENSE file.