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: