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:
| |
The rendered output looks like this:
Example mapbox input with the custom style:
| |
The rendered output looks like this: