mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-09-03 04:02:40 +00:00
Cell
98 lines
4.1 KiB
Markdown
98 lines
4.1 KiB
Markdown
---
|
|
title: "Extended Shortcode - mapbox"
|
|
date: 2022-07-20T12:22:15+08:00
|
|
author: "Lruihao"
|
|
authorLink: "https://lruihao.cn"
|
|
description: "The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library."
|
|
resources:
|
|
- name: "featured-image"
|
|
src: "featured-image.jpg"
|
|
|
|
tags: ["shortcodes"]
|
|
categories: ["documentation"]
|
|
|
|
hiddenFromHomePage: true
|
|
---
|
|
|
|
{{< 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](https://docs.mapbox.com/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:
|
|
|
|
```go-html-template
|
|
{{</* mapbox 113.953277 22.559102 11 */>}}
|
|
Or
|
|
{{</* mapbox lng=113.953277 lat=22.559102 zoom=11 */>}}
|
|
```
|
|
|
|
The rendered output looks like this:
|
|
|
|
{{< mapbox 113.953277 22.559102 11 >}}
|
|
|
|
Example `mapbox` input with the custom style:
|
|
|
|
```go-html-template
|
|
{{</* 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" >}}
|