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.5170365,"lon":13.3888599,"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.5170365,"lon":13.3888599,"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

{{#leaflet:Hong Kong
 |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.2793278,"lon":114.1628131,"icon":""}],"imageoverlays":null}

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