Displaying Leaflet maps

Maps supports embedding of dynamic maps using the free and open source Leaflet library.

Basic syntax

Displaying maps is done with the #display_map parser function.

{{#display_map:center=Brandenburg Gate, Berlin, Germany}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":15,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

Customization

Leaflet maps can be customized using various parameters.

{{#display_map:center=Berlin|width=400|height=250}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"400px","height":"250px","centre":{"text":"","title":"","link":"","lat":52.5170365,"lon":13.3888599,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":11,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

See Customizing Leaflet Maps for a full overview of customization parameter, including examples.

Displaying data

Markers

{{#display_map:Brandenburg Gate, Berlin, Germany}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"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":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""}],"imageoverlays":null}

You can display multiple locations by separating them with semicolons. And it is possible to use coordinates instead of location names.

{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"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":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":52.5170365,"lon":13.3888599,"icon":""},{"text":"","title":"","link":"","lat":50.8550018,"lon":4.3512333761166,"icon":""},{"text":"","title":"","link":"","lat":40.712783333333,"lon":-74.005941666667,"icon":""}],"imageoverlays":null}

You can customize the markers per location. The syntax is:

Location~Popup title~Popup text~File:CustomIcon~Group~Inline label~File:VisitedIcon

• Location: the location where to display the marker. Both coordinates and addresses are supported
• Popup title and Popup text: optional content for a popup shown when the marker is clicked. No popup is shown if both are empty
• File:CustomIcon: optional name of an image to display instead of the default marker
• Group:
• Inline label: optional label shown next to the marker. Currently only shown when using Google Maps
• File:VisitedIcon: optional name of an image to display as marker when the marker is clicked

Example:

{{#display_map:
  Berlin~The city Berlin~Berlin is a really nice city and there is plenty of Club Mate~Red-marker.png;
  Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"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":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Berlin\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EBerlin is a really nice city and there is plenty of Club Mate\n\u003C/p\u003E\u003C/div\u003E","title":"The city Berlin\n","link":"","lat":52.5170365,"lon":13.3888599,"icon":"https://pro-wiki.s3.amazonaws.com/1644153356/d/d2/Red-marker.png"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Amsterdam\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAmsterdam is the capital of The Netherlands\n\u003C/p\u003E\u003C/div\u003E","title":"The city Amsterdam\n","link":"","lat":52.3730796,"lon":4.8924534,"icon":"https://pro-wiki.s3.amazonaws.com/1644153356/b/be/Green-marker.png"}],"imageoverlays":null}

Lines

Via the lines parameter you can display lines on the map. Each line has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the line. The syntax is:

First address:Second address:Optional third address:etc
~Popup title~Popup text~Line color~Line opacity~Line thickness

Example:

{{#display_map:lines=
  Berlin:Brussels:London;
  Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":52.5170365,"lon":13.3888599},{"lat":50.8550018,"lon":4.3512333761166},{"lat":51.5074456,"lon":-0.1277653}]},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAmsterdam to Paris line\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a text\n\u003C/p\u003E\u003C/div\u003E","title":"Amsterdam to Paris line\n","link":"","strokeColor":"green","strokeOpacity":"0.42","strokeWeight":"10","pos":[{"lat":52.3730796,"lon":4.8924534},{"lat":48.8588897,"lon":2.3200410217201}]}],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

Polygons

Via the polygons parameter you can display polygons on the map. Each polygons has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the polygon. The syntax is:

First address:Second address:Optional third address
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
~Show only on hover

Example:

{{#display_map:polygons=
  Berlin:Brussels:London;
  Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":52.5170365,"lon":13.3888599},{"lat":50.8550018,"lon":4.3512333761166},{"lat":51.5074456,"lon":-0.1277653}],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","pos":[{"lat":52.3730796,"lon":4.8924534},{"lat":48.8588897,"lon":2.3200410217201},{"lat":50.1106444,"lon":8.6820917}],"onlyVisibleOnHover":false,"fillColor":"blue","fillOpacity":"0.5"}],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

Circles

Via the circles parameter you can display circles on the map. Each circles has a center and a diameter. You can specify the popup title and text and the looks of the circle. The syntax is:

Address of the center:Diameter~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity

Example:

{{#display_map:circles=
  Amsterdam:500;
  Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
| zoom=14
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":4.8924534,"lat":52.3730796},"radius":500},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.5","centre":{"lon":4.8924534,"lat":52.3730796},"radius":100}],"rectangles":[],"copycoords":false,"static":false,"zoom":14,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

Rectangles

Via the rectangles parameter you can display rectangles on the map. Each rectangle has a North East location and a South West location. You can specify the popup title and text and the looks of the rectangle. The syntax is:

North East location:South West location
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity

Example:

{{#display_map:rectangles=
  Berlin:Brussels;
  Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","ne":{"lon":13.3888599,"lat":52.5170365},"sw":{"lon":4.3512333761166,"lat":50.8550018}},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.5","ne":{"lon":4.8924534,"lat":52.3730796},"sw":{"lon":-0.1277653,"lat":51.5074456}}],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

GeoJSON

As of version 5.6, Maps supports display of GeoJSON via the geojson parameter. See Displaying GeoJSON.

Alternative syntax

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