Extended Shortcode - mapbox

Warning
This article was last updated on 2023-02-26, the content may be out of date.

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 theme configuration.

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

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

  • navigation [optional]

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

  • geolocate [optional]

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

  • scale [optional]

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

  • fullscreen [optional]

    Whether to add FullscreenControl, default value is the value set in the front matter or the theme 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:

1
2
3
{{< mapbox 113.953277 22.559102 11 >}}
Or
{{< mapbox lng=113.953277 lat=22.559102 zoom=11 >}}

The rendered output looks like this:

Example mapbox input with the custom style:

1
2
3
{{< 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:

0%