Extended Shortcode - Mapbox

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

Parameters

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.

• markers [optional] (seventh positional parameter)

  An array of map markers, each element in the array is an object that contains three properties: lng, lat, and description.

• 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.

Simple Example

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:

Custom Style Example

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:

Multiple Markers Example

Example mapbox input with multiple markers:

1
2
3
4
5

{{< mapbox
  lng=113.953277
  lat=22.559102
  markers="[{\"lng\": 113.81841, \"lat\": 22.637524, \"description\": \"Bao'an International Airport\"},{\"lng\": 113.953386, \"lat\": 22.559052, \"description\": \"Marker 2\"},{\"lng\": 114.035746,\"lat\": 22.615667, \"description\": \"Shenzhen North railway station\"}]"
>}}