Finder Buy now

Interactive maps

Mobile-friendly interactive maps powered by Leaflet.js.

Finder component
Basic markup
Inline options:
<div class="interactive-map" style="height: 300px;" data-map-options='{<!--json options goes here-->}'></div>
External local JSON file:
<div class="interactive-map" style="height: 300px;" data-map-options-json='{<!--link to external local .json file-->}'></div>
Data API:
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.
  • "coordinates": [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": [
  {
    "coordinates": [51.5, -0.09],
    "iconUrl": "path-to-map-marker-icon.png",
    "className": null || "custom-marker-icon" || "custom-marker-dot",
    "popup": "<div class='p-3'>I'm a popup!</div>"
  }
]
  • 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 dist/img/map folder
  • markers[0].className - Custom CSS class for marker. Useful if you need to style it differently. There are 2 pre-defined classes: custom-marker-icon (if you use one of the circle marker icons supplied with the template) and custom-marker-dot (alternative dot style marker). If not set, default map pin would be used.
  • markers[0].popup - Pass HTML markup of the popup linked to this particular marker. Popups are revealed on click on the marker.
  • For more options please visithttps://leafletjs.com/

Basic example (no options passed)

<!-- Basic map example (no options passed) -->
<div class="interactive-map" style="height: 400px;"></div>
// Basic map example (no options passed)
.interactive-map(style='height: 400px;')

Inline options: Default marker + alternative map style

<!-- Inline options: Default marker + alternative map style -->
<div class="interactive-map" data-map-options='{"mapLayer": "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [51.5074, -0.1278], "zoom": 10, "markers": [{"coordinates": [51.5074, -0.1278], "popup": "<div class='p-3'><h6>Hi, I'm in London</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}]}' style="height: 400px;"></div>
// Inline options: Default marker + alternative map style
.interactive-map(data-map-options='{"mapLayer": "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [51.5074, -0.1278], "zoom": 10, "markers": [{"coordinates": [51.5074, -0.1278], "popup": "<div class=\'p-3\'><h6>Hi, I\'m in London</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}]}', style="height: 400px;")

Inline options: Dot markers + popups

<!-- Inline options: Dot markers + popups -->
<div class="interactive-map" data-map-options='{"mapLayer": "https://api.maptiler.com/maps/pastel/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [40.7128, -74.0060], "zoom": 11, "markers": [{"coordinates": [40.702, -74.006], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in New York</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.716, -74.078], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in Jersey Cty</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.650, -74.209], "className": "custom-marker-dot", "popup": "<div class='p-3'><h6>Hi, I'm in Elizabeth</h6><p class='fs-sm pt-1 mt-n3 mb-0'>Lorem ipsum dolor sit amet elit.</p></div>"}]}' style="height: 400px;"></div>
// Inline options: Dot markers + popups
.interactive-map(data-map-options='{"mapLayer": "https://api.maptiler.com/maps/pastel/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs", "coordinates": [40.7128, -74.0060], "zoom": 11, "markers": [{"coordinates": [40.702, -74.006], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in New York</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.716, -74.078], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in Jersey Cty</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}, {"coordinates": [40.650, -74.209], "className": "custom-marker-dot", "popup": "<div class=\'p-3\'><h6>Hi, I\'m in Elizabeth</h6><p class=\'fs-sm pt-1 mt-n3 mb-0\'>Lorem ipsum dolor sit amet elit.</p></div>"}]}', style="height: 400px;")

Complex options via external local .json file

<!-- Complex options via external local .json file -->
<div class="interactive-map" data-map-options-json="path-to-external-json-with-map-options" style="height: 600px;"></div>
<!-- Examples of .json files with map options you can find in dist/json folder -->
// Complex options via external local .json file
.interactive-map(data-map-options-json="path-to-external-json-with-map-options", style="height: 600px;")
// Examples of .json files with map options you can find in dist/json folder
Top