Theme Documentation - mapbox Shortcode

The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library.

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.

The mapbox shortcode has the following named parameters to use Mapbox GL JS:

• lng [required] (first positional parameter)

  Longitude of the inital centerpoint of the map, measured in degrees.

• lat [required] (second positional parameter)

  Latitude of the inital centerpoint of the map, measured in degrees.

• zoom [optional] (third positional parameter)

  The initial zoom level of the map, default value is 10.

• marked [optional] (fourth positional parameter)

  Whether to add a marker at the inital centerpoint of the map, default value is true.

• light-style [optional] (fifth positional parameter)

  Style for the light theme, default value is the value set in the front matter or the site configuration.

• dark-style [optional] (sixth positional parameter)

  Style for the dark theme, default value is the value set in the front matter or the site configuration.

• navigation [optional]

  Whether to add NavigationControl, default value is the value set in the front matter or the site configuration.

• geolocate [optional]

  Whether to add GeolocateControl, default value is the value set in the front matter or the site configuration.

• scale [optional]

  Whether to add ScaleControl, default value is the value set in the front matter or the site configuration.

• fullscreen [optional]

  Whether to add FullscreenControl, default value is the value set in the front matter or the site configuration.

• width [optional]

  Width of the map, default value is 100%.

• height [optional]

  Height of the map, default value is 20rem.

Example simple mapbox input:

{{< mapbox 121.485 31.233 12 >}}
Or
{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

The rendered output looks like this:

Example mapbox input with the custom style:

{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" >}}
Or
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" >}}

The rendered output looks like this: