diff --git a/config/_default/params.toml b/config/_default/params.toml index bd071a73..75c60170 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -855,10 +855,10 @@ disableThemeInject = false accessToken = "pk.eyJ1IjoiZGlsbG9uenEiLCJhIjoiY2s2czd2M2x3MDA0NjNmcGxmcjVrZmc2cyJ9.aSjv2BNuZUfARvxRYjSVZQ" # style for the light theme # 浅色主题的地图样式 - lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true" + lightStyle = "mapbox://styles/mapbox/light-v11?optimize=true" # style for the dark theme # 深色主题的地图样式 - darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true" + darkStyle = "mapbox://styles/mapbox/dark-v11?optimize=true" # whether to add NavigationControl (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol) # 是否添加 导航控制 (https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol) navigation = true diff --git a/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.jpg b/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.jpg deleted file mode 100644 index 1e769144..00000000 Binary files a/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.jpg and /dev/null differ diff --git a/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.webp b/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.webp new file mode 100644 index 00000000..379f457e Binary files /dev/null and b/content/en/documentation/content-management/shortcodes/extended/mapbox/featured-image.webp differ diff --git a/content/en/documentation/content-management/shortcodes/extended/mapbox/index.md b/content/en/documentation/content-management/shortcodes/extended/mapbox/index.md index a26e2b1a..e31a4d70 100644 --- a/content/en/documentation/content-management/shortcodes/extended/mapbox/index.md +++ b/content/en/documentation/content-management/shortcodes/extended/mapbox/index.md @@ -12,7 +12,7 @@ description: The mapbox shortcode supports interactive maps in Hugo with Mapbox library. resources: - name: featured-image - src: featured-image.jpg + src: featured-image.webp tags: - Shortcodes - Content @@ -24,6 +24,8 @@ The `mapbox` shortcode supports interactive maps in Hugo with [Mapbox GL JS][map +## Parameters + [Mapbox GL JS][mapbox] is a JavaScript library that uses WebGL to render interactive maps from [vector tiles][vector-tiles] and [Mapbox styles][style-spec]. The `mapbox` shortcode has the following named parameters to use Mapbox GL JS: @@ -52,6 +54,10 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS: Style for the dark theme, default value is the value set in the [front matter][front-matter] or the [theme configuration][theme-config]. +- **markers** _[optional]_ (**seventh** positional parameter) {{< version 0.3.11 >}} + + An array of map markers, each element in the array is an object that contains three properties: `lng`, `lat`, and `description`. + - **navigation** _[optional]_ Whether to add [NavigationControl][navigationcontrol], default value is the value set in the [front matter][front-matter] or the [theme configuration][theme-config]. @@ -76,6 +82,8 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS: Height of the map, default value is `20rem`. +## Simple Example + Example simple `mapbox` input: ```markdown @@ -88,6 +96,8 @@ The rendered output looks like this: {{< mapbox 113.953277 22.559102 11 >}} +## Custom Style Example + Example `mapbox` input with the custom style: ```markdown @@ -100,6 +110,26 @@ 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" >}} +## Multiple Markers Example + +Example `mapbox` input with multiple markers: + +```markdown +{{}} +``` + +{{< mapbox + lng=113.953277 + lat=22.559102 + markers="[{\"lng\": 113.81841, \"lat\": 22.637524, \"description\": \"Bao'an International Airport\"},{\"lng\": 113.953386, \"lat\": 22.559052, \"description\": \"Marker 2\"},{\"lng\": 114.035746,\"lat\": 22.615667, \"description\": \"Shenzhen North railway station\"}]" +>}} + + + [mapbox]: https://docs.mapbox.com/mapbox-gl-js [vector-tiles]: https://docs.mapbox.com/help/glossary/vector-tiles/ [style-spec]: https://docs.mapbox.com/mapbox-gl-js/style-spec/ diff --git a/content/en/documentation/getting-started/configuration/index.md b/content/en/documentation/getting-started/configuration/index.md index 5017047b..1af6dad8 100644 --- a/content/en/documentation/getting-started/configuration/index.md +++ b/content/en/documentation/getting-started/configuration/index.md @@ -1400,9 +1400,9 @@ c4u # access token of Mapbox GL JS accessToken = "" # style for the light theme - lightStyle = "mapbox://styles/mapbox/light-v9" + lightStyle = "mapbox://styles/mapbox/light-v11" # style for the dark theme - darkStyle = "mapbox://styles/mapbox/dark-v9" + darkStyle = "mapbox://styles/mapbox/dark-v11" # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}} navigation = true # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}} diff --git a/content/zh-cn/documentation/content-management/shortcodes/extended/mapbox/index.md b/content/zh-cn/documentation/content-management/shortcodes/extended/mapbox/index.md index 81f73760..042d1535 100644 --- a/content/zh-cn/documentation/content-management/shortcodes/extended/mapbox/index.md +++ b/content/zh-cn/documentation/content-management/shortcodes/extended/mapbox/index.md @@ -11,7 +11,7 @@ author: description: mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能。 resources: - name: featured-image - src: featured-image.jpg + src: featured-image.webp tags: - Shortcodes - Content @@ -26,6 +26,8 @@ mapbox: +## 参数 + [Mapbox GL JS][mapbox] 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles][vector-tiles] 和 [Mapbox styles][style-spec] 为来源，将它们渲染成互动式地图。 `mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS: @@ -54,6 +56,10 @@ mapbox: 深色主题的地图样式，默认值是 [Front matter][front-matter] 或者 [主题配置][theme-config] 中设置的值。 +- **markers** _[可选]_ （**第七个**位置参数）{{< version 0.3.11 >}} + + 地图标记的数组，数组元素是对象，对象包含 `lng`、`lat` 和 `description` 三个属性。 + - **navigation** _[可选]_ 是否添加 [NavigationControl][navigationcontrol], 默认值是 [Front matter][front-matter] 或者 [主题配置][theme-config] 中设置的值。 @@ -78,6 +84,8 @@ mapbox: 地图的高度，默认值是 `20rem`。 +## 简单示例 + 一个简单的 `mapbox` 示例： ```markdown @@ -90,6 +98,8 @@ mapbox: {{< mapbox 113.953277 22.559102 11 >}} +## 自定义样式 + 一个带有自定义样式的 `mapbox` 示例： ```markdown @@ -102,6 +112,26 @@ mapbox: {{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}} +## 多标记示例 + +一个带有多个标记的 `mapbox` 示例： + +```markdown +{{}} +``` + +{{< mapbox + lng=113.953277 + lat=22.559102 + markers="[{\"lng\": 113.81841, \"lat\": 22.637524, \"description\": \"宝安国际机场\"},{\"lng\": 113.953386, \"lat\": 22.559052, \"description\": \"标记 2\"},{\"lng\": 114.035746,\"lat\": 22.615667, \"description\": \"深圳北站\"}]" +>}} + + + [mapbox]: https://docs.mapbox.com/mapbox-gl-js [vector-tiles]: https://docs.mapbox.com/help/glossary/vector-tiles/ [style-spec]: https://docs.mapbox.com/mapbox-gl-js/style-spec/ diff --git a/content/zh-cn/documentation/getting-started/configuration/index.md b/content/zh-cn/documentation/getting-started/configuration/index.md index 78bb047c..ee64cf46 100644 --- a/content/zh-cn/documentation/getting-started/configuration/index.md +++ b/content/zh-cn/documentation/getting-started/configuration/index.md @@ -1391,9 +1391,9 @@ c4u # Mapbox GL JS 的 access token accessToken = "" # 浅色主题的地图样式 - lightStyle = "mapbox://styles/mapbox/light-v9" + lightStyle = "mapbox://styles/mapbox/light-v11" # 深色主题的地图样式 - darkStyle = "mapbox://styles/mapbox/dark-v9" + darkStyle = "mapbox://styles/mapbox/dark-v11" # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}} navigation = true # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}} diff --git a/go.mod b/go.mod index 7294dfc8..47ac0e61 100644 --- a/go.mod +++ b/go.mod @@ -3,7 +3,7 @@ module github.com/hugo-fixit/docs go 1.20 require ( - github.com/hugo-fixit/FixIt v0.3.12-0.20240910094900-fad3c988deab // indirect + github.com/hugo-fixit/FixIt v0.3.12-0.20240923082518-fabe057f610d // indirect github.com/hugo-fixit/component-projects v1.1.3 // indirect github.com/hugo-fixit/shortcode-caniuse v1.1.3 // indirect github.com/hugo-fixit/shortcode-rewards v1.0.4 // indirect diff --git a/go.sum b/go.sum index 71cc7685..bdfcbe8c 100644 --- a/go.sum +++ b/go.sum @@ -1,5 +1,5 @@ -github.com/hugo-fixit/FixIt v0.3.12-0.20240910094900-fad3c988deab h1:FGIq9PptHv7bCWjjFXgahNF/cNZMmCof94UykwQbpcE= -github.com/hugo-fixit/FixIt v0.3.12-0.20240910094900-fad3c988deab/go.mod h1:3XIRedrqakO7/a4ZnhE46haMRF8HgsT0N0B5j5D2iRU= +github.com/hugo-fixit/FixIt v0.3.12-0.20240923082518-fabe057f610d h1:QOK9d+fqpr57p5SoI2ClZbhoHb+Jw6sPX6wV7oRl97Y= +github.com/hugo-fixit/FixIt v0.3.12-0.20240923082518-fabe057f610d/go.mod h1:3XIRedrqakO7/a4ZnhE46haMRF8HgsT0N0B5j5D2iRU= github.com/hugo-fixit/component-projects v1.1.3 h1:iK6q07CpFsnnJGh8q2stVjv6Lr77dTM9o+P7LGDEYmE= github.com/hugo-fixit/component-projects v1.1.3/go.mod h1:nXW0R37REwpfwUD1I4RtB5QW71vw66nRyB9uEpYxr+c= github.com/hugo-fixit/shortcode-caniuse v1.1.3 h1:U1YBJz5SI/d1BBQhHcD0eVgJdCcpzK2usSizPiu+a4w=