Visual Leaflet editor

You can add data to Leaflet maps using a visual map editor.

This editor needs to be enabled per map. When it is enabled, an edit icon will show below the zoom control to people with edit permissions.

View demo video of the Visual Leaflet Editor in Maps 7.13.

The edit button that activates the editor

Map in edit mode after activating the editor

Activating the editor

The editor stores data on a separate page in the GeoJSON namespace. This results in a two step process.

Step 1: create a new page in that namespace by going to GeoJson:WhateverYourMapIsAbout. Click the "Create this page" button. A preview of the map will appear and you can edit it in place if you already wish to add some data.

The edit button that activates the editor

Step 2: on the page where you wish to show the map, place the usual #display_map code to display your Leaflet map. Add the geojson parameter with the value being the name of the GeoJson page you created: geojson=WhateverYourMapIsAbout.

{{#display_map: center=Berlin | geojson=WhateverYourMapIsAbout}}

Multiple maps can use the same GeoJson page and thus share data. If you want to use an existing GeoJson page, skip step 1.

Using the editor

The editor only shows to people with edit permissions for Leaflet maps that use the geojson parameter with the name of an existing page as value.

Activate the editor by clicking the edit button. This puts the map in edit mode. Only data that can be edited is shown. This means markers and shapes defined in wikitext will be hidden in edit mode.

In edit mode you can click markers and shapes to open a tooltip in which you can add a title and/or description. Controls on the left side of the map allow adding, deleting and modifying markers and shapes.

Once you make a change, a save button is shown on the left below the edit controls. Click the save button to save your changes and exit edit mode.

To exit edit mode without making changes, refresh the page in your browser. Or just leave the map in edit mode.

Sharing GeoJson

Multiple maps can use the same GeoJson page and thus share data.

Changes via the GeoJson page or via other pages using the same map data do not cause automatic updates of the map when page caching is enabled. Manual cache invalidation might be needed at times. When switching to edit mode, the map always fetches the latest data, to minimize the chance of merge conflicts.

Example

{{ #display_map: center=Berlin | geojson=LeafletEditorExample | cluster=on }}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.510885,"lon":13.3989367,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":true,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":{"type":"FeatureCollection","features":[{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.371649,52.515374]}},{"type":"Feature","properties":{"title":"Hello!","description":""},"geometry":{"type":"Point","coordinates":[13.379803,52.512553]}},{"type":"Feature","properties":{"title":"Example title","description":"Example description"},"geometry":{"type":"Point","coordinates":[13.399458,52.512449]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.402977,52.515217]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.403835,52.518717]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.405638,52.513023]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.40847,52.516262]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.357315,52.510568]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.358345,52.522007]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.383923,52.522111]}},{"type":"Feature","properties":[],"geometry":{"type":"LineString","coordinates":[[13.37122,52.511613],[13.382549,52.519448],[13.386583,52.51062],[13.397226,52.511404],[13.415079,52.5113],[13.418941,52.516523],[13.419456,52.521693],[13.424864,52.519866],[13.421516,52.511143]]}},{"type":"Feature","properties":[],"geometry":{"type":"Polygon","coordinates":[[[13.39036,52.518455],[13.39551,52.521589],[13.399801,52.518664],[13.395081,52.515217],[13.391647,52.514747],[13.39036,52.518455]]]}},{"type":"Feature","properties":[],"geometry":{"type":"Polygon","coordinates":[[[13.361092,52.519134],[13.361092,52.520649],[13.365383,52.520649],[13.365383,52.519134],[13.361092,52.519134]]]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.363409,52.519813]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.404608,52.515792]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.404007,52.515008]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.408298,52.515531]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.407354,52.516314]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.405895,52.515374]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.403664,52.514904]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.402891,52.513911]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.404007,52.513598]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.404264,52.514068]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.403921,52.512658]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.406668,52.513859]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.406496,52.512867]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[13.408213,52.513441]}}]},"clicktarget":"","GeoJsonSource":"LeafletEditorExample","GeoJsonRevisionId":478,"imageLayers":[],"locations":[],"imageoverlays":null}

The editor currently does not support captchas. Since this wiki requires captchas for anonymous editors, saving the map after editing anonymously will fail. To get the complete experience create an account.

I created Maps and this documentation in my free time. If you are finding either useful, please consider supporting me.