FixIt/exampleSite/content/posts/extended-shortcode-mapbox/index.en.md

title, date, author, authorLink, description, resources, tags, categories, hiddenFromHomePage

title	date	author	authorLink	description	resources	tags	categories	hiddenFromHomePage
Extended Shortcode - mapbox	2022-07-20T12:22:15+08:00	Lruihao	https://lruihao.cn	The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library.	name src featured-image featured-image.jpg	shortcodes	documentation	true

{{< version 0.2.0 >}}

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 113.953277 22.559102 11 */>}}
Or
{{</* mapbox lng=113.953277 lat=22.559102 zoom=11 */>}}

The rendered output looks like this:

{{< mapbox 113.953277 22.559102 11 >}}

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:

{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4?optimize=true" "mapbox://styles/mapbox/navigation-preview-night-v4?optimize=true" >}}