1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
weight: 7
title: "Theme Documentation - mapbox Shortcode"
date: 2020-03-03T13:29:41+08:00
lastmod: 2020-03-03T13:29:41+08:00
draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
images: []
resources:
- name: "featured-image"
src: "featured-image.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
hiddenFromHomePage: true
toc:
enable: false
---
{{< version 0.2.0 >}}
The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) library.
<!--more-->
**Mapbox GL JS** is a JavaScript library that uses WebGL to render interactive maps from [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) and [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/).
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](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
* **dark-style** *[optional]* (**sixth** positional parameter)
Style for the dark theme, default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
* **navigation** *[optional]*
Whether to add [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
* **geolocate** *[optional]*
Whether to add [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
* **scale** *[optional]*
Whether to add [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#site-configuration).
* **fullscreen** *[optional]*
Whether to add [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), default value is the value set in the [front matter](../theme-documentation-content#front-matter) or the [site configuration](../theme-documentation-basics#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:
```markdown
{{</* 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:
```markdown
{{</* 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" >}}
|
