Maps

Mobile-friendly interactive maps powered by Leaflet.js.

Around component

To incorporate maps into your webpage, it's essential to integrate Leaflet CSS and JavaScript files into your document. Ensure you include the following files: assets/vendor/leaflet/dist/leaflet.css for styles and assets/vendor/leaflet/dist/leaflet.js for functionality. For comprehensive instructions, refer to the details provided below or utilize this page as a reference guide.

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 map example (no options passed) -->
<div class="interactive-map" style="height: 400px;"></div>

Custom options

Preview
HTML

<!-- 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=&#39;p-3&#39;><h6>Hi, I&apos;m in London</h6><p class=&#39;fs-sm pt-1 mt-n3 mb-0&#39;>Lorem ipsum dolor sit amet elit.</p></div>"
    }
  ]
}' style="height: 400px;"></div>

Alternative map style

Preview
HTML

<!-- 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=&#39;p-3&#39;><h6>Hi, I&apos;m in London</h6><p class=&#39;fs-sm pt-1 mt-n3 mb-0&#39;>Lorem ipsum dolor sit amet elit.</p></div>"
    }
  ]
}' style="height: 400px;"></div>

Customize theme

Colors

Typography (1rem = 16px)

Borders / Rounding

Menu

Content