Mobile-friendly interactive maps powered by Leaflet.js.
In order to display maps on the page you need to include Leaflet css and js files in your document: assets/vendor/leaflet/dist/leaflet.css and assets/vendor/leaflet/dist/leaflet.js. See details below or use this page as a reference.
data-map-options = '{}'
"mapLayer": "https://..." (link to API)
- This is a visual style (layer) of your map. We used Maptiler in this template to get map skins: https://cloud.maptiler.com/maps. Choose the skin you like. Make sure to copy Raster tiles (HiDPI) link and pass it to "mapLayer" property."center": [51.5, -0.09]
- An array of 2 values: latitude and longitude."zoom": 1
- Sets the zoom (scale) of the map. Default value: 1"markers": [{...}, {...}]
- Array of objects. Each object is an individual marker. You can set as many markers as you need on a single map.markers[0].coordinates
- Position of the marker on the map. An array of 2 values: latitude and longitude.markers[0].iconUrl
- Path to custom marker icon. If not provided default icon (pin) will be used. You can find all marker icons inside assets/img/map
foldermarkers[0].shadowUrl
- Path to custom marker shadow. If not provided default icon shadow will be used.markers[0].popup
- Pass HTML markup of the popup linked to this particular marker. Popups are revealed on click on the marker.