Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

Menu

Content

Components

Utilities

Buy now

Maps

Mobile-friendly interactive maps powered by Leaflet.js.

Around component
Basic markup
<div class="interactive-map" style="height: 300px;" data-map-options='{<!--json options goes here-->}'></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.
  • "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": [
      {
        "position": [51.5, -0.09],
        "iconUrl": "path-to-map-marker-icon.png", // Path should be relative to theme.js file linked to the document
        "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 assets/img/map folder
  • markers[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.
  • 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.rounded-4(style="height: 400px;")

Custom options

<!-- Custom map options -->
<div class="interactive-map rounded-4"" data-map-options='{
  "center": [51.5074, -0.1278],
  "zoom": 10,
  "scrollWheelZoom": false,
  "markers": [
    {
      "position": [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>
// Custom map options
.interactive-map.rounded-4(data-map-options=`{
  "center": [51.5074, -0.1278],
  "zoom": 10,
  "scrollWheelZoom": false,
  "markers": [
    {
      "position": [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;')

Alternative map style

<!-- Custom map options -->
<div class="interactive-map rounded-4"" data-map-options='{
  "mapLayer": "https://api.maptiler.com/maps/voyager/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs",
  "center": [51.5074, -0.1278],
  "zoom": 10,
  "scrollWheelZoom": false,
  "markers": [
    {
      "position": [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>
// Custom map options
.interactive-map.rounded-4(data-map-options=`{
  "mapLayer": "https://api.maptiler.com/maps/voyager/{z}/{x}/{y}.png?key=5vRQzd34MMsINEyeKPIs",
  "center": [51.5074, -0.1278],
  "zoom": 10,
  "scrollWheelZoom": false,
  "markers": [
    {
      "position": [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;')