LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md

weight	title	date	lastmod	draft	author	authorLink	description	images	resources	tags	categories	hiddenFromHomePage	toc
7	Theme Documentation - mapbox Shortcode	2020-03-03T13:29:41+08:00	2020-03-03T13:29:41+08:00	false	Dillon	https://dillonzq.com	The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library.		name src featured-image featured-image.jpg	shortcodes	documentation	true	enable false

{{< 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 121.485 31.233 12 */>}}
Or
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}

The rendered output looks like this:

{{< mapbox 121.485 31.233 12 >}}

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" >}}