diff options
author | Christoph Cullmann <cullmann@kde.org> | 2022-08-14 19:01:21 +0200 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2022-08-14 19:01:21 +0200 |
commit | 51fb029ca27d67d7cd67352cdede45e5b25868f7 (patch) | |
tree | 6d8e34b2abdc757310ffe11189e926d017417bae /themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md | |
parent | 260b6803e78609e16ad3d59792f1681d9df0f1e4 (diff) |
switch back to LoveIt, other theme is deprectated
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md')
-rw-r--r-- | themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md new file mode 100644 index 0000000..6f0aace --- /dev/null +++ b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md @@ -0,0 +1,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" >}} |