Visual Leaflet editor: Difference between revisions

From Maps for MediaWiki
mNo edit summary
mNo edit summary
 
(5 intermediate revisions by the same user not shown)
Line 3: Line 3:
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.
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.


[[File:EditGeoJsonLayer.png|frame|The edit button that activates the editor]]
View [https://www.youtube.com/watch?v=-ih3EJLdibY demo video of the Visual Leaflet Editor in Maps 7.13].


[[File:File:EditorExample.png|frame|Map in edit mode after activating the editor]]
[[File:EditGeoJsonLayer.png|none|frame|The edit button that activates the editor]]
 
[[File:EditorExample.png|none|frame|Map in edit mode after activating the editor]]


== Activating the editor ==
== Activating the editor ==


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


Create a new page in that namespace by going to <code>GeoJson:WhateverYourMapIsAbout</code>. Click the  
Step 1: create a new page in that namespace by going to <code>GeoJson:WhateverYourMapIsAbout</code>. 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.


[[File:EditGeoJsonLayer.png|frame|The edit button that activates the editor]]
[[File:CreateGeoJsonPage.png|none|frame|The edit button that activates the editor]]
 
Step 2: on the page where you wish to show the map, place the usual <code>#display_map</code> code to display your Leaflet map. Add the <code>geojson</code> parameter with the value being the name of the GeoJson page you created: <code>geojson=WhateverYourMapIsAbout</code>.


<pre>
<pre>
{{#display_map: center=Berlin | geojson=LeafletEditorExample}}
{{#display_map: center=Berlin | geojson=WhateverYourMapIsAbout}}
</pre>
</pre>


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 ==


== Using the editor ==
The editor only shows to people with edit permissions for Leaflet maps that use the <code>geojson</code> 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 ==
== Example ==


<pre>
<pre>
{{#display_map: center=Berlin | geojson=LeafletEditorExample}}
{{ #display_map: center=Berlin | geojson=LeafletEditorExample | cluster=on }}
</pre>
</pre>


{{#display_map: center=Berlin | geojson=LeafletEditorExample | scrollzoom=off }}
{{#display_map: center=Berlin | geojson=LeafletEditorExample | cluster=on | scrollzoom=off }}
 
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.

Latest revision as of 13:06, 27 May 2021

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...

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.