Extended Shortcode - mapbox
Lruihao
included in Documentation
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: