diff options
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode')
3 files changed, 0 insertions, 211 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg Binary files differdeleted file mode 100644 index 1e76914..0000000 --- a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/featured-image.jpg +++ /dev/null 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 deleted file mode 100644 index 6f0aace..0000000 --- a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -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" >}} diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md deleted file mode 100644 index 985aa96..0000000 --- a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -weight: 7 -title: "主题文档 - mapbox Shortcode" -date: 2020-03-03T13:29:59+08:00 -lastmod: 2020-03-03T13:29:59+08:00 -draft: false -author: "Dillon" -authorLink: "https://dillonzq.com" -description: "mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能." -images: [] -resources: -- name: "featured-image" - src: "featured-image.jpg" - -tags: ["shortcodes"] -categories: ["documentation"] - -hiddenFromHomePage: true - -toc: - enable: false -mapbox: - lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true - darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true ---- - -{{< version 0.2.0 >}} - -`mapbox` shortcode 使用 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 库提供互动式地图的功能. - -<!--more--> - -**Mapbox GL JS** 是一个 JavaScript 库，它使用 WebGL, 以 [vector tiles](https://docs.mapbox.com/help/glossary/vector-tiles/) 和 [Mapbox styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 为来源, 将它们渲染成互动式地图. - -`mapbox` shortcode 有以下命名参数来使用 Mapbox GL JS: - -* **lng** *[必需]* (**第一个**位置参数) - - 地图初始中心点的经度, 以度为单位. - -* **lat** *[必需]* (**第二个**位置参数) - - 地图初始中心点的纬度, 以度为单位. - -* **zoom** *[可选]* (**第三个**位置参数) - - 地图的初始缩放级别, 默认值是 `10`. - -* **marked** *[可选]* (**第四个**位置参数) - - 是否在地图的初始中心点添加图钉, 默认值是 `true`. - -* **light-style** *[可选]* (**第五个**位置参数) - - 浅色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **dark-style** *[可选]* (**第六个**位置参数) - - 深色主题的地图样式, 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **navigation** *[可选]* - - 是否添加 [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **geolocate** *[可选]* - - 是否添加 [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **scale** *[可选]* - - 是否添加 [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **fullscreen** *[可选]* - - 是否添加 [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol), 默认值是[前置参数](../theme-documentation-content#front-matter)或者[网站配置](../theme-documentation-basics#site-configuration)中设置的值. - -* **width** *[可选]* - - 地图的宽度, 默认值是 `100%`. - -* **height** *[可选]* - - 地图的高度, 默认值是 `20rem`. - -一个简单的 `mapbox` 示例: - -```markdown -{{</* mapbox 121.485 31.233 12 */>}} -或者 -{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}} -``` - -呈现的输出效果如下: - -{{< mapbox 121.485 31.233 12 >}} - -一个带有自定义样式的 `mapbox` 示例: - -```markdown -{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}} -或者 -{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}} -``` - -呈现的输出效果如下: - -{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}} |
