Maps

Mobile-friendly interactive maps powered by Leaflet.js.

Around component

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.

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;')

Customize theme

Colors

Typography (1rem = 16px)

Borders / Rounding

Menu

Content