feat(mapbox): added the possibility to load geojson file

pogor-dev · Aug 9, 2021 · d2fd6d7 · d2fd6d7
1 parent 9f84d2f
commit d2fd6d7
Show file tree

Hide file tree

Showing 10 changed files with 9,302 additions and 8 deletions.
diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/assets/lib/simple-icons/icons/elsevier.svg b/assets/lib/simple-icons/icons/elsevier.svg
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -959,6 +959,10 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
 
   Height of the map, default value is `20rem`.
 
+- **properties** _[optional]_
+
+  GeoJSON sources and the layers of the map.
+
 Example simple `mapbox` input:
 
 ```markdown
@@ -983,6 +987,16 @@ 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" >}}
 
+Example `mapbox` input with the GetJSON data:
+
+```markdown
+{{</* mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" >}}
+
 ## 8 music
 
 The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md
@@ -964,6 +964,10 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS:
 
   Height of the map, default value is `20rem`.
 
+- **properties** _[optional]_
+
+  GeoJSON sources and the layers of the map.
+
 Example simple `mapbox` input:
 
 ```markdown
@@ -988,6 +992,16 @@ 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" >}}
 
+Example `mapbox` input with the GetJSON data:
+
+```markdown
+{{</* mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" >}}
+
 ## 8 music
 
 The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
@@ -962,6 +962,10 @@ data = [
 
   地图的高度, 默认值是 `20rem`.
 
+- **properties** _[optional]_
+
+  GeoJSON sources and the layers of the map.
+
 一个简单的 `mapbox` 示例:
 
 ```markdown
@@ -986,6 +990,16 @@ data = [
 
 {{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}
 
+Example `mapbox` input with the GetJSON data:
+
+```markdown
+{{</* mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" */>}}
+```
+
+The rendered output looks like this:
+
+{{< mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" >}}
+
 ## 8 music
 
 `music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.

diff --git a/exampleSite/static/features-layers.json b/exampleSite/static/features-layers.json
@@ -0,0 +1,22 @@
+{
+  "sources": [
+    {
+      "id": "logo",
+      "properties": {
+        "type": "geojson",
+        "data": "/features.geojson"
+      }
+    }
+  ],
+  "layers": [
+    {
+      "id": "logo-layer",
+      "type": "fill",
+      "source": "logo",
+      "paint": {
+        "fill-color": ["coalesce", ["get", "fill"], "#005c7c"],
+        "fill-opacity": 0.5
+      }
+    }
+  ]
+}