Leaflet Maps examples

Leaflet maps can be customized using various parameters.

This page lists examples. For an overview of available parameters and how to use them, see Customizing Leaflet Maps.

Markers, Polygons, Lines, etc

See Displaying Leaflet maps

Layers

{{#display_map:
 |layers=OpenTopoMap,OpenStreetMap
 |zoom=1
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":1,"defzoom":14,"layers":["OpenTopoMap","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}

Note: Maps code repository → List of available layers.

Overlays

{{#display_map:Calais; Dover
 |overlaylayers=OpenSeaMap
}}

Loading map...

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

Fullscreen

{{#display_map:Berlin
 |fullscreen=on
}}

Loading map...

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

Resizable

{{#display_map:New York City
 |resizable=on
}}

Loading map...

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

Click target

{{#display_map:Berlin
 |clicktarget=https://www.google.com/maps/@%lat%,%long%,8z
 |zoom=8
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":8,"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":"https://www.google.com/maps/@%lat%,%long%,8z","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":52.510885,"lon":13.3989367,"icon":""}],"imageoverlays":null}

Image layers

{{#display_map:image layers=NewYorkSubway.jpg, NewYorkSubwaySmall.jpg }}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":["NewYorkSubway.jpg","NewYorkSubwaySmall.jpg"],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[{"name":"NewYorkSubway.jpg","url":"https://pro-wiki.s3.amazonaws.com/1644153356/f/fe/NewYorkSubway.jpg","width":100,"height":189.22934076137417},{"name":"NewYorkSubwaySmall.jpg","url":"https://pro-wiki.s3.amazonaws.com/1644153356/8/8d/NewYorkSubwaySmall.jpg","width":100,"height":189.22934076137417}],"locations":[],"imageoverlays":null}

{{#display_map:image layers=NewYorkSubway.jpg | geojson=NewYorkSubway }}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":3,"defzoom":14,"layers":["OpenStreetMap"],"image layers":["NewYorkSubway.jpg"],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Pennsyl Station","description":""},"geometry":{"type":"Polygon","coordinates":[[[36.9375,97.465104],[36.9375,99.558854],[40.8125,99.558854],[40.8125,97.465104],[36.9375,97.465104]]]}},{"type":"Feature","properties":[],"geometry":{"type":"Point","coordinates":[41.0625,93.496354]}},{"type":"Feature","properties":{"title":"Station name","description":"And a fancy description"},"geometry":{"type":"Point","coordinates":[55.375,93.652604]}}]},"clicktarget":"","GeoJsonSource":"NewYorkSubway","GeoJsonRevisionId":93,"imageLayers":[{"name":"NewYorkSubway.jpg","url":"https://pro-wiki.s3.amazonaws.com/1644153356/f/fe/NewYorkSubway.jpg","width":100,"height":189.22934076137417}],"locations":[],"imageoverlays":null}

Copy coords

Right-click on a marker to copy its coordinates.

{{#leaflet:Hong Kong; Macau
 |copycoords=yes
 |zoom=10
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":true,"static":false,"zoom":10,"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":22.350627,"lon":114.1849161,"icon":""},{"text":"","title":"","link":"","lat":22.1757605,"lon":113.5514142,"icon":""}],"imageoverlays":null}

Inline labels

Inline labels are not implemented for Leaflet. They do work for Google maps.

{{#leaflet:
Berlin~Popup title~Popup text~~Group~Berlin;
London~Popup title~Popup text~~Group~London;
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"300px","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\u003EPopup title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EPopup text\n\u003C/p\u003E\u003C/div\u003E","title":"Popup title\n","link":"","lat":52.510885,"lon":13.3989367,"icon":"","group":"Group","inlineLabel":"Berlin\n"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EPopup title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EPopup text\n\u003C/p\u003E\u003C/div\u003E","title":"Popup title\n","link":"","lat":51.4893335,"lon":-0.14405508452769,"icon":"","group":"Group","inlineLabel":"London\n"}],"imageoverlays":null}

Links and Wikitext in Popups

{{#display_map:Berlin~~'''Berlin''' is the capital of [https://en.wikipedia.org/wiki/Germany 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":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Cb\u003EBerlin\u003C/b\u003E is the capital of \u003Ca class=\"external text\" href=\"https://en.wikipedia.org/wiki/Germany\"\u003EGermany\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"","link":"","lat":52.510885,"lon":13.3989367,"icon":""}],"imageoverlays":null}

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