Map

Square only

Mapbox - The location data platform for mobile and web applications.

Mapbox docsarrow-right-1


By adding data-toggle="map" attribute you can initialise the component. Within data-options you can setup center, zoom etc or override the default settings. Default settings are"zoom": 13, "scrollZoom": false, "interactive": false.

To enable the Mapbox map on your website, you'll need a Mapbox access token (without it it won't work on your site or on your machine). Mapbox uses access tokens to associate API requests with your account. You can create a new access token on your Access Tokens page. Once a new access token is created, please replace the original access token at src/assets/js/theme.js in mapboxgl.accessToken variable with the new one.

You can also add a marker to your map using data-marker attribute. The color of the marker is defined in the variables.scss under $map-marker-color value.

If you need contorls too, just add data-controls attribute to the element.