npm - @basemaps/landing - Versions diffs - 8.4.0 → 8.6.0 - Mend

@basemaps/landing 8.4.0 → 8.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist/docs/user-guide/working-with-vector-tiles/styling/index.html ADDED Viewed

@@ -0,0 +1,2584 @@
+<!doctype html>
+<html lang="en" class="no-js">
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+        <link rel="canonical" href="http://localhost:8000/docs/user-guide/working-with-vector-tiles/styling/">
+        <link rel="prev" href="../schema/water_polygons/">
+        <link rel="next" href="../usage/">
+      <link rel="icon" href="../../../assets/images/favicon.png">
+      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.44">
+        <title>How to Style our Vector Tiles - LINZ Basemaps</title>
+      <link rel="stylesheet" href="../../../assets/stylesheets/main.0253249f.min.css">
+        <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i%7COpen+Sans+Mono:400,400i,700,700i&display=fallback">
+        <style>:root{--md-text-font:"Open Sans";--md-code-font:"Open Sans Mono"}</style>
+      <link rel="stylesheet" href="../../../index.css">
+    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
+<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config",""),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
+    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
+  </head>
+    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
+    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
+    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
+    <label class="md-overlay" for="__drawer"></label>
+    <div data-md-component="skip">
+        <a href="#how-to-style-our-vector-tiles" class="md-skip">
+          Skip to content
+        </a>
+    </div>
+    <div data-md-component="announce">
+    </div>
+<header class="md-header md-header--shadow" data-md-component="header">
+  <nav class="md-header__inner md-grid" aria-label="Header">
+    <a href="../../.." title="LINZ Basemaps" class="md-header__button md-logo" aria-label="LINZ Basemaps" data-md-component="logo">
+  <img src="../../../linz-motif.svg" alt="logo">
+    </a>
+    <label class="md-header__button md-icon" for="__drawer">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
+    </label>
+    <div class="md-header__title" data-md-component="header-title">
+      <div class="md-header__ellipsis">
+        <div class="md-header__topic">
+          <span class="md-ellipsis">
+            LINZ Basemaps
+          </span>
+        </div>
+        <div class="md-header__topic" data-md-component="header-topic">
+          <span class="md-ellipsis">
+              How to Style our Vector Tiles
+          </span>
+        </div>
+      </div>
+    </div>
+        <form class="md-header__option" data-md-component="palette">
+    <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="Switch to dark mode"  type="radio" name="__palette" id="__palette_0">
+      <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
+      </label>
+    <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="Switch to light mode"  type="radio" name="__palette" id="__palette_1">
+      <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
+      </label>
+</form>
+      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
+      <div class="md-header__source">
+        <a href="https://github.com/linz/basemaps" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+      </div>
+  </nav>
+</header>
+    <div class="md-container" data-md-component="container">
+      <main class="md-main" data-md-component="main">
+        <div class="md-main__inner md-grid">
+              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
+                <div class="md-sidebar__scrollwrap">
+                  <div class="md-sidebar__inner">
+<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
+  <label class="md-nav__title" for="__drawer">
+    <a href="../../.." title="LINZ Basemaps" class="md-nav__button md-logo" aria-label="LINZ Basemaps" data-md-component="logo">
+  <img src="../../../linz-motif.svg" alt="logo">
+    </a>
+    LINZ Basemaps
+  </label>
+    <div class="md-nav__source">
+      <a href="https://github.com/linz/basemaps" title="Go to repository" class="md-source" data-md-component="source">
+  <div class="md-source__icon md-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
+  </div>
+  <div class="md-source__repository">
+    GitHub
+  </div>
+</a>
+    </div>
+  <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../.." class="md-nav__link">
+  <span class="md-ellipsis">
+    LINZ Basemaps
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../configuration/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Configuration
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../deployment/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Deployment
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../quick-start/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Quick start guide
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../../developer-guide/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Developer guide
+  </span>
+            </a>
+              <label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="0">
+                <span class="md-nav__icon md-icon"></span>
+              </label>
+          </div>
+        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_5">
+            <span class="md-nav__icon md-icon"></span>
+            Developer guide
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../../developer-guide/run-basemaps-locally/" class="md-nav__link">
+  <span class="md-ellipsis">
+    How to run basemaps locally
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" >
+          <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0">
+  <span class="md-ellipsis">
+    Cli methods
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_5_3">
+            <span class="md-nav__icon md-icon"></span>
+            Cli methods
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../../developer-guide/cli-methods/bundle-the-basemaps-assets-archive/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Bundle the basemaps assets archive
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../developer-guide/cli-methods/bundle-the-basemaps-config-file/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Bundle the basemaps config file
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" >
+          <label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0">
+  <span class="md-ellipsis">
+    Server methods
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_5_4">
+            <span class="md-nav__icon md-icon"></span>
+            Server methods
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../../developer-guide/server-methods/serve-basemaps-with-bundled-config-file/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Serve basemaps using a bundled config file
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../developer-guide/server-methods/serve-basemaps-with-collection-of-geotiff-files/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Serve basemaps using a collection of GeoTIFF files
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
+          <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
+  <span class="md-ellipsis">
+    Examples
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_6">
+            <span class="md-nav__icon md-icon"></span>
+            Examples
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../../examples/_overview/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Overview
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../examples/leaflet.xyz.3857/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Leaflet Raster Map
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../examples/maplibre.opacity.3857/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Maplibre Opacity Slider
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../examples/maplibre.vector.3857/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Maplibre Vector Map
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../../operator-guide/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Operator guide
+  </span>
+            </a>
+              <label class="md-nav__link " for="__nav_7" id="__nav_7_label" tabindex="0">
+                <span class="md-nav__icon md-icon"></span>
+              </label>
+          </div>
+        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_7">
+            <span class="md-nav__icon md-icon"></span>
+            Operator guide
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/cog-quality/" class="md-nav__link">
+  <span class="md-ellipsis">
+    COG Quality
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/empty-tiles/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Sparse Datasets and empty tiles
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/gebco/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Gebco re-project to NZTM2000Quad cog file
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/quick-start/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Running LINZ Basemaps - Quick Start
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/relief-shade/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Relief shade
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/texture-shade/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Texture shading
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../../operator-guide/xyz-projection/" class="md-nav__link">
+  <span class="md-ellipsis">
+    XYZ and projection math
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" checked>
+          <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0">
+  <span class="md-ellipsis">
+    User guide
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="true">
+          <label class="md-nav__title" for="__nav_8">
+            <span class="md-nav__icon md-icon"></span>
+            User guide
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../../_get-started/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Get started with LINZ Basemaps
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../api-documentation/" class="md-nav__link">
+  <span class="md-ellipsis">
+    API documentation
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../../technical-documentation/" class="md-nav__link">
+  <span class="md-ellipsis">
+    Technical documentation and specifications
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_4" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../use-in-esri-software/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Use in Esri software
+  </span>
+            </a>
+              <label class="md-nav__link " for="__nav_8_4" id="__nav_8_4_label" tabindex="0">
+                <span class="md-nav__icon md-icon"></span>
+              </label>
+          </div>
+        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_4_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_4">
+            <span class="md-nav__icon md-icon"></span>
+            Use in Esri software
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_4_2" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../use-in-esri-software/how-to-add-emergency-imagery-to-arcgis/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    How to add emergency imagery in ArcGIS
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_4_2_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_4_2">
+            <span class="md-nav__icon md-icon"></span>
+            How to add emergency imagery in ArcGIS
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_4_3" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../use-in-esri-software/how-to-add-individual-linz-basemaps-layers-to-arcgis/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    How to add individual LINZ Basemap layers to ArcGIS
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_4_3_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_4_3">
+            <span class="md-nav__icon md-icon"></span>
+            How to add individual LINZ Basemap layers to ArcGIS
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_4_4" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../use-in-esri-software/how-to-add-linz-aerial-imagery-basemaps-to-arcgis-online/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    How to add LINZ aerial imagery Basemaps to ArcGIS Online
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_4_4_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_4_4">
+            <span class="md-nav__icon md-icon"></span>
+            How to add LINZ aerial imagery Basemaps to ArcGIS Online
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_4_5" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../../use-in-esri-software/how-to-add-linz-basemaps-to-arcgis-online-basemaps/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    How to add LINZ Basemaps to ArcGIS Online Basemaps
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_4_5_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_4_5">
+            <span class="md-nav__icon md-icon"></span>
+            How to add LINZ Basemaps to ArcGIS Online Basemaps
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5" checked>
+          <div class="md-nav__link md-nav__container">
+            <a href="../" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Working with Vector Tiles
+  </span>
+            </a>
+              <label class="md-nav__link " for="__nav_8_5" id="__nav_8_5_label" tabindex="0">
+                <span class="md-nav__icon md-icon"></span>
+              </label>
+          </div>
+        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_8_5_label" aria-expanded="true">
+          <label class="md-nav__title" for="__nav_8_5">
+            <span class="md-nav__icon md-icon"></span>
+            Working with Vector Tiles
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5_2" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../creation/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Creation
+  </span>
+            </a>
+              <label class="md-nav__link " for="__nav_8_5_2" id="__nav_8_5_2_label" tabindex="0">
+                <span class="md-nav__icon md-icon"></span>
+              </label>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_5_2_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_5_2">
+            <span class="md-nav__icon md-icon"></span>
+            Creation
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5_2_2" >
+          <label class="md-nav__link" for="__nav_8_5_2_2" id="__nav_8_5_2_2_label" tabindex="0">
+  <span class="md-ellipsis">
+    Inputs
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_8_5_2_2_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_5_2_2">
+            <span class="md-nav__icon md-icon"></span>
+            Inputs
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../creation/inputs/json-schema-file/" class="md-nav__link">
+  <span class="md-ellipsis">
+    JSON Schema File
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5_3" >
+          <label class="md-nav__link" for="__nav_8_5_3" id="__nav_8_5_3_label" tabindex="0">
+  <span class="md-ellipsis">
+    Schema
+  </span>
+            <span class="md-nav__icon md-icon"></span>
+          </label>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_5_3_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_5_3">
+            <span class="md-nav__icon md-icon"></span>
+            Schema
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+    <li class="md-nav__item">
+      <a href="../schema/addresses/" class="md-nav__link">
+  <span class="md-ellipsis">
+    addresses
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/aerialways/" class="md-nav__link">
+  <span class="md-ellipsis">
+    aerialways
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/boundaries/" class="md-nav__link">
+  <span class="md-ellipsis">
+    boundaries
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/buildings/" class="md-nav__link">
+  <span class="md-ellipsis">
+    buildings
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/contours/" class="md-nav__link">
+  <span class="md-ellipsis">
+    contours
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/dam_lines/" class="md-nav__link">
+  <span class="md-ellipsis">
+    dam_lines
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/ferries/" class="md-nav__link">
+  <span class="md-ellipsis">
+    ferries
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/land/" class="md-nav__link">
+  <span class="md-ellipsis">
+    land
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/parcel_boundaries/" class="md-nav__link">
+  <span class="md-ellipsis">
+    parcel_boundaries
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/pier_lines/" class="md-nav__link">
+  <span class="md-ellipsis">
+    pier_lines
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/place_labels/" class="md-nav__link">
+  <span class="md-ellipsis">
+    place_labels
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/pois/" class="md-nav__link">
+  <span class="md-ellipsis">
+    pois
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/public_transport/" class="md-nav__link">
+  <span class="md-ellipsis">
+    public_transport
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/sites/" class="md-nav__link">
+  <span class="md-ellipsis">
+    sites
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/street_labels/" class="md-nav__link">
+  <span class="md-ellipsis">
+    street_labels
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/street_polygons/" class="md-nav__link">
+  <span class="md-ellipsis">
+    street_polygons
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/streets/" class="md-nav__link">
+  <span class="md-ellipsis">
+    streets
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/water_lines/" class="md-nav__link">
+  <span class="md-ellipsis">
+    water_lines
+  </span>
+      </a>
+    </li>
+    <li class="md-nav__item">
+      <a href="../schema/water_polygons/" class="md-nav__link">
+  <span class="md-ellipsis">
+    water_polygons
+  </span>
+      </a>
+    </li>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5_4" checked>
+          <div class="md-nav__link md-nav__container">
+            <a href="./" class="md-nav__link md-nav__link--active">
+  <span class="md-ellipsis">
+    Styling
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_5_4_label" aria-expanded="true">
+          <label class="md-nav__title" for="__nav_8_5_4">
+            <span class="md-nav__icon md-icon"></span>
+            Styling
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+    <li class="md-nav__item md-nav__item--nested">
+        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8_5_5" >
+          <div class="md-nav__link md-nav__container">
+            <a href="../usage/" class="md-nav__link ">
+  <span class="md-ellipsis">
+    Usage
+  </span>
+            </a>
+          </div>
+        <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_8_5_5_label" aria-expanded="false">
+          <label class="md-nav__title" for="__nav_8_5_5">
+            <span class="md-nav__icon md-icon"></span>
+            Usage
+          </label>
+          <ul class="md-nav__list" data-md-scrollfix>
+          </ul>
+        </nav>
+    </li>
+          </ul>
+        </nav>
+    </li>
+          </ul>
+        </nav>
+    </li>
+  </ul>
+</nav>
+                  </div>
+                </div>
+              </div>
+              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
+                <div class="md-sidebar__scrollwrap">
+                  <div class="md-sidebar__inner">
+<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
+    <label class="md-nav__title" for="__toc">
+      <span class="md-nav__icon md-icon"></span>
+      Table of contents
+    </label>
+    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
+        <li class="md-nav__item">
+  <a href="#understanding-the-shortbread-schema" class="md-nav__link">
+    <span class="md-ellipsis">
+      Understanding the Shortbread Schema
+    </span>
+  </a>
+    <nav class="md-nav" aria-label="Understanding the Shortbread Schema">
+      <ul class="md-nav__list">
+          <li class="md-nav__item">
+  <a href="#key-shortbread-layers-include" class="md-nav__link">
+    <span class="md-ellipsis">
+      Key Shortbread Layers Include:
+    </span>
+  </a>
+</li>
+      </ul>
+    </nav>
+</li>
+        <li class="md-nav__item">
+  <a href="#linz-specific-considerations" class="md-nav__link">
+    <span class="md-ellipsis">
+      LINZ-Specific Considerations
+    </span>
+  </a>
+    <nav class="md-nav" aria-label="LINZ-Specific Considerations">
+      <ul class="md-nav__list">
+          <li class="md-nav__item">
+  <a href="#land-vs-ocean-polygons" class="md-nav__link">
+    <span class="md-ellipsis">
+      Land vs Ocean Polygons
+    </span>
+  </a>
+</li>
+          <li class="md-nav__item">
+  <a href="#using-maputnik-visual-style-editor" class="md-nav__link">
+    <span class="md-ellipsis">
+      Using Maputnik (Visual Style Editor)
+    </span>
+  </a>
+    <nav class="md-nav" aria-label="Using Maputnik (Visual Style Editor)">
+      <ul class="md-nav__list">
+          <li class="md-nav__item">
+  <a href="#getting-started-with-maputnik" class="md-nav__link">
+    <span class="md-ellipsis">
+      Getting Started with Maputnik
+    </span>
+  </a>
+</li>
+          <li class="md-nav__item">
+  <a href="#example-tutorial-customizing-contour-lines" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example Tutorial: Customizing Contour Lines
+    </span>
+  </a>
+</li>
+      </ul>
+    </nav>
+</li>
+          <li class="md-nav__item">
+  <a href="#customizing-in-qgis" class="md-nav__link">
+    <span class="md-ellipsis">
+      Customizing in QGIS
+    </span>
+  </a>
+    <nav class="md-nav" aria-label="Customizing in QGIS">
+      <ul class="md-nav__list">
+          <li class="md-nav__item">
+  <a href="#accessing-style-properties" class="md-nav__link">
+    <span class="md-ellipsis">
+      Accessing Style Properties
+    </span>
+  </a>
+</li>
+          <li class="md-nav__item">
+  <a href="#example-customizing-water-features" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example: Customizing Water Features
+    </span>
+  </a>
+</li>
+      </ul>
+    </nav>
+</li>
+          <li class="md-nav__item">
+  <a href="#customizing-with-maplibre-gl-js" class="md-nav__link">
+    <span class="md-ellipsis">
+      Customizing with MapLibre GL JS
+    </span>
+  </a>
+    <nav class="md-nav" aria-label="Customizing with MapLibre GL JS">
+      <ul class="md-nav__list">
+          <li class="md-nav__item">
+  <a href="#basic-style-customization" class="md-nav__link">
+    <span class="md-ellipsis">
+      Basic Style Customization
+    </span>
+  </a>
+</li>
+      </ul>
+    </nav>
+</li>
+      </ul>
+    </nav>
+</li>
+    </ul>
+</nav>
+                  </div>
+                </div>
+              </div>
+            <div class="md-content" data-md-component="content">
+              <article class="md-content__inner md-typeset">
+<h1 id="how-to-style-our-vector-tiles">How to Style our Vector Tiles</h1>
+<p>LINZ vector tiles can be styled using the <a href="https://docs.mapbox.com/style-spec/guides/">Mapbox GL Style Specification</a>. This JSON-based specification defines how vector tiles should be rendered, including colors, fonts, and feature visibility. You can view an example of a complete style specification at:</p>
+<div class="language-text highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>https://basemaps.linz.govt.nz/v1/styles/topographic.json?api=YOUR_API_KEY
+</span></code></pre></div>
+<h2 id="understanding-the-shortbread-schema">Understanding the Shortbread Schema</h2>
+<p>The Shortbread vector tile schema is a lean, general-purpose schema designed for OpenStreetMap data. LINZ has adopted this schema for their vector tiles, making them compatible with a wide ecosystem of tools and styles.</p>
+<h3 id="key-shortbread-layers-include">Key Shortbread Layers Include:</h3>
+<ul>
+<li><strong>water</strong>: Lakes, rivers, and water bodies</li>
+<li><strong>boundaries</strong>: Boundaries between the land and sea, defined by mean high water</li>
+<li><strong>transportation</strong>: Roads, paths, railways</li>
+<li><strong>buildings</strong>: Building footprints</li>
+<li><strong>place_labels</strong>: City, town, and place names</li>
+<li><strong>pois</strong>: Points of interest</li>
+</ul>
+<p>We publish the <a href="../schema/addresses/">Shortbread Vector Tile Schema</a> for each layer of our vector tiles. Most layers group features by <code>kind</code>. For each group, we describe the attributes, properties, and the zoom levels at which those features appear.</p>
+<h2 id="linz-specific-considerations">LINZ-Specific Considerations</h2>
+<h3 id="land-vs-ocean-polygons">Land vs Ocean Polygons</h3>
+<p>One crucial difference when working with LINZ tiles compared to standard Shortbread implementations is that <strong>LINZ defines land polygons rather than ocean polygons</strong>. This means:</p>
+<ul>
+<li>When styling water features, you'll need to style the background as water and the boundaries polygons as your land color</li>
+<li>This is the opposite of many other vector tile providers who define ocean polygons</li>
+<li>Your styles will need to be adjusted accordingly when migrating from other providers</li>
+</ul>
+<h3 id="using-maputnik-visual-style-editor">Using Maputnik (Visual Style Editor)</h3>
+<p>Maputnik is a free, open-source visual editor for creating and modifying map styles. It's the recommended tool for users of all skill levels.</p>
+<h4 id="getting-started-with-maputnik">Getting Started with Maputnik</h4>
+<ol>
+<li>
+<p><strong>Access Maputnik</strong></p>
+<ul>
+<li><a href="https://maplibre.org/maputnik">Online version</a>, or</li>
+<li><a href="https://github.com/maplibre/maputnik?tab=readme-ov-file#usage">Download for local use</a></li>
+</ul>
+</li>
+<li>
+<p><strong>Connect to LINZ Vector Tiles</strong></p>
+<ul>
+<li>Click "Open"</li>
+<li>
+<p>Load from URL:</p>
+<div class="language-text highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>https://basemaps.linz.govt.nz/v1/styles/topographic.json?api=YOUR_API_KEY
+</span></code></pre></div>
+</li>
+</ul>
+<ul>
+<li>Open the Style settings and switch the Style Renderer from MapLibreGL JS to Open Layers (experimental)</li>
+</ul>
+</li>
+</ol>
+<h4 id="example-tutorial-customizing-contour-lines">Example Tutorial: Customizing Contour Lines</h4>
+<p>Let's walk through changing the color and thickness of contour lines:</p>
+<ol>
+<li>
+<p><strong>Identify the Layer</strong></p>
+<ul>
+<li>Click on a contour line on the map</li>
+<li>Maputnik will show all layers at that location
+   <img alt="Contours Layer" src="static/contours.webp" /></li>
+</ul>
+</li>
+<li>
+<p><strong>Modify Paint Properties</strong></p>
+<ul>
+<li>In the layer panel, find "Paint properties"</li>
+<li>Change line color: Click the color swatch and select your desired color (e.g., #8B4513 for brown)</li>
+<li>Adjust line width : Set the thickness (e.g., 1.5 for thicker lines)
+   <img alt="Modify Paint" src="static/modify-paint.webp" /></li>
+</ul>
+</li>
+<li>
+<p><strong>Add Filters</strong> (optional)</p>
+<ul>
+<li>Show only major contours (e.g., every 100m):
+   <img alt="Add Filter" src="static/add-filter.webp" /></li>
+</ul>
+</li>
+<li>
+<p><strong>Export Your Style</strong></p>
+<ul>
+<li>Click "Export" → "Download Style"</li>
+<li>Save the JSON file for use in your application</li>
+</ul>
+</li>
+</ol>
+<h3 id="customizing-in-qgis">Customizing in QGIS</h3>
+<p>QGIS provides a familiar GIS interface for customizing vector tile styles.</p>
+<h4 id="accessing-style-properties">Accessing Style Properties</h4>
+<ol>
+<li>
+<p><strong>Open Layer Properties</strong></p>
+<ul>
+<li>Right-click the vector tile layer → Properties</li>
+<li>Go to Symbology tab</li>
+<li>You'll see all sub-layers from the vector tiles</li>
+</ul>
+</li>
+<li>
+<p><strong>Modify Individual Layers</strong></p>
+<ul>
+<li>Double-click any sub-layer to edit its style</li>
+<li>Apply standard QGIS styling options</li>
+</ul>
+</li>
+</ol>
+<h4 id="example-customizing-water-features">Example: Customizing Water Features</h4>
+<ol>
+<li>
+<p><strong>Select the Water Layer</strong></p>
+<ul>
+<li>In the Symbology tab, find and select the "water" layer</li>
+</ul>
+</li>
+<li>
+<p><strong>Change Fill Style</strong></p>
+<ul>
+<li>Click on the symbol</li>
+<li>Set Fill Color: #a5bfdd (light blue)</li>
+<li>Set Stroke Color: #5080b0 (darker blue)</li>
+<li>Set Stroke Width: 0.5</li>
+</ul>
+</li>
+<li>
+<p><strong>Add Rule-Based Styling</strong> (optional)</p>
+<ul>
+<li>Change from "Single Symbol" to "Rule-based"</li>
+<li>Add rules for different water types:<ul>
+<li>Rivers: Darker blue</li>
+<li>Lakes: Standard blue</li>
+<li>Wetlands: Blue-green</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>
+<p><strong>Save Your Style</strong></p>
+<ul>
+<li>Click "Style Manager" button → "Save Style"</li>
+<li>Save as .qml file for reuse in other projects</li>
+</ul>
+</li>
+</ol>
+<h3 id="customizing-with-maplibre-gl-js">Customizing with MapLibre GL JS</h3>
+<p>For web developers, MapLibre provides programmatic control over styling.</p>
+<h4 id="basic-style-customization">Basic Style Customization</h4>
+<div class="language-html highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="cp">&lt;!doctype html&gt;</span>
+</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
+</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
+</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
+</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a>    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="p">/&gt;</span>
+</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a>    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
+</span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a><span class="w">      </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-8"><a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a><span class="w">        </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
+</span><span id="__span-2-9"><a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a><span class="w">      </span><span class="p">}</span>
+</span><span id="__span-2-10"><a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a>
+</span><span id="__span-2-11"><a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a><span class="w">      </span><span class="p">#</span><span class="nn">map</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-12"><a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a><span class="w">        </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">vh</span><span class="p">;</span>
+</span><span id="__span-2-13"><a id="__codelineno-2-13" name="__codelineno-2-13" href="#__codelineno-2-13"></a><span class="w">        </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">vw</span><span class="p">;</span>
+</span><span id="__span-2-14"><a id="__codelineno-2-14" name="__codelineno-2-14" href="#__codelineno-2-14"></a><span class="w">      </span><span class="p">}</span>
+</span><span id="__span-2-15"><a id="__codelineno-2-15" name="__codelineno-2-15" href="#__codelineno-2-15"></a><span class="w">    </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
+</span><span id="__span-2-16"><a id="__codelineno-2-16" name="__codelineno-2-16" href="#__codelineno-2-16"></a>  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
+</span><span id="__span-2-17"><a id="__codelineno-2-17" name="__codelineno-2-17" href="#__codelineno-2-17"></a>
+</span><span id="__span-2-18"><a id="__codelineno-2-18" name="__codelineno-2-18" href="#__codelineno-2-18"></a>  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
+</span><span id="__span-2-19"><a id="__codelineno-2-19" name="__codelineno-2-19" href="#__codelineno-2-19"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;map&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+</span><span id="__span-2-20"><a id="__codelineno-2-20" name="__codelineno-2-20" href="#__codelineno-2-20"></a>    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
+</span><span id="__span-2-21"><a id="__codelineno-2-21" name="__codelineno-2-21" href="#__codelineno-2-21"></a><span class="w">      </span><span class="kd">const</span><span class="w"> </span><span class="nx">map</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">maplibregl</span><span class="p">.</span><span class="nb">Map</span><span class="p">({</span>
+</span><span id="__span-2-22"><a id="__codelineno-2-22" name="__codelineno-2-22" href="#__codelineno-2-22"></a><span class="w">        </span><span class="nx">container</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;map&#39;</span><span class="p">,</span>
+</span><span id="__span-2-23"><a id="__codelineno-2-23" name="__codelineno-2-23" href="#__codelineno-2-23"></a>
+</span><span id="__span-2-24"><a id="__codelineno-2-24" name="__codelineno-2-24" href="#__codelineno-2-24"></a><span class="w">        </span><span class="nx">style</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-25"><a id="__codelineno-2-25" name="__codelineno-2-25" href="#__codelineno-2-25"></a><span class="w">          </span><span class="nx">version</span><span class="o">:</span><span class="w"> </span><span class="mf">8</span><span class="p">,</span>
+</span><span id="__span-2-26"><a id="__codelineno-2-26" name="__codelineno-2-26" href="#__codelineno-2-26"></a><span class="w">          </span><span class="nx">sources</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-27"><a id="__codelineno-2-27" name="__codelineno-2-27" href="#__codelineno-2-27"></a><span class="w">            </span><span class="s1">&#39;LINZ Basemaps&#39;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-28"><a id="__codelineno-2-28" name="__codelineno-2-28" href="#__codelineno-2-28"></a><span class="w">              </span><span class="nx">attribution</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;© 2022 Toitū Te Whenua - CC BY 4.0&#39;</span><span class="p">,</span>
+</span><span id="__span-2-29"><a id="__codelineno-2-29" name="__codelineno-2-29" href="#__codelineno-2-29"></a><span class="w">              </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;vector&#39;</span><span class="p">,</span>
+</span><span id="__span-2-30"><a id="__codelineno-2-30" name="__codelineno-2-30" href="#__codelineno-2-30"></a><span class="w">              </span><span class="nx">tiles</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
+</span><span id="__span-2-31"><a id="__codelineno-2-31" name="__codelineno-2-31" href="#__codelineno-2-31"></a><span class="w">                </span><span class="s1">&#39;https://basemaps.linz.govt.nz/v1/tiles/topographic-v2/WebMercatorQuad/{z}/{x}/{y}.pbf?api=c01jwykec5weqkbr50vc30xwzgs&#39;</span><span class="p">,</span>
+</span><span id="__span-2-32"><a id="__codelineno-2-32" name="__codelineno-2-32" href="#__codelineno-2-32"></a><span class="w">              </span><span class="p">],</span>
+</span><span id="__span-2-33"><a id="__codelineno-2-33" name="__codelineno-2-33" href="#__codelineno-2-33"></a><span class="w">              </span><span class="nx">tilejson</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;3.0.0&#39;</span><span class="p">,</span>
+</span><span id="__span-2-34"><a id="__codelineno-2-34" name="__codelineno-2-34" href="#__codelineno-2-34"></a><span class="w">              </span><span class="nx">maxzoom</span><span class="o">:</span><span class="w"> </span><span class="mf">15</span><span class="p">,</span>
+</span><span id="__span-2-35"><a id="__codelineno-2-35" name="__codelineno-2-35" href="#__codelineno-2-35"></a><span class="w">            </span><span class="p">},</span>
+</span><span id="__span-2-36"><a id="__codelineno-2-36" name="__codelineno-2-36" href="#__codelineno-2-36"></a><span class="w">          </span><span class="p">},</span>
+</span><span id="__span-2-37"><a id="__codelineno-2-37" name="__codelineno-2-37" href="#__codelineno-2-37"></a><span class="w">          </span><span class="nx">layers</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
+</span><span id="__span-2-38"><a id="__codelineno-2-38" name="__codelineno-2-38" href="#__codelineno-2-38"></a><span class="w">            </span><span class="p">{</span>
+</span><span id="__span-2-39"><a id="__codelineno-2-39" name="__codelineno-2-39" href="#__codelineno-2-39"></a><span class="w">              </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;background&#39;</span><span class="p">,</span>
+</span><span id="__span-2-40"><a id="__codelineno-2-40" name="__codelineno-2-40" href="#__codelineno-2-40"></a><span class="w">              </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;background&#39;</span><span class="p">,</span>
+</span><span id="__span-2-41"><a id="__codelineno-2-41" name="__codelineno-2-41" href="#__codelineno-2-41"></a><span class="w">              </span><span class="nx">paint</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-42"><a id="__codelineno-2-42" name="__codelineno-2-42" href="#__codelineno-2-42"></a><span class="w">                </span><span class="s1">&#39;background-color&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#87CEEB&#39;</span><span class="p">,</span><span class="w"> </span><span class="c1">// Sky blue for ocean</span>
+</span><span id="__span-2-43"><a id="__codelineno-2-43" name="__codelineno-2-43" href="#__codelineno-2-43"></a><span class="w">              </span><span class="p">},</span>
+</span><span id="__span-2-44"><a id="__codelineno-2-44" name="__codelineno-2-44" href="#__codelineno-2-44"></a><span class="w">            </span><span class="p">},</span>
+</span><span id="__span-2-45"><a id="__codelineno-2-45" name="__codelineno-2-45" href="#__codelineno-2-45"></a><span class="w">            </span><span class="p">{</span>
+</span><span id="__span-2-46"><a id="__codelineno-2-46" name="__codelineno-2-46" href="#__codelineno-2-46"></a><span class="w">              </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;coastline&#39;</span><span class="p">,</span>
+</span><span id="__span-2-47"><a id="__codelineno-2-47" name="__codelineno-2-47" href="#__codelineno-2-47"></a><span class="w">              </span><span class="nx">paint</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-48"><a id="__codelineno-2-48" name="__codelineno-2-48" href="#__codelineno-2-48"></a><span class="w">                </span><span class="s1">&#39;fill-color&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#f5f5dc&#39;</span><span class="p">,</span><span class="w"> </span><span class="c1">// Beige for land</span>
+</span><span id="__span-2-49"><a id="__codelineno-2-49" name="__codelineno-2-49" href="#__codelineno-2-49"></a><span class="w">              </span><span class="p">},</span>
+</span><span id="__span-2-50"><a id="__codelineno-2-50" name="__codelineno-2-50" href="#__codelineno-2-50"></a><span class="w">              </span><span class="nx">source</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;LINZ Basemaps&#39;</span><span class="p">,</span>
+</span><span id="__span-2-51"><a id="__codelineno-2-51" name="__codelineno-2-51" href="#__codelineno-2-51"></a><span class="w">              </span><span class="s1">&#39;source-layer&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;boundaries&#39;</span><span class="p">,</span>
+</span><span id="__span-2-52"><a id="__codelineno-2-52" name="__codelineno-2-52" href="#__codelineno-2-52"></a><span class="w">              </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;fill&#39;</span><span class="p">,</span>
+</span><span id="__span-2-53"><a id="__codelineno-2-53" name="__codelineno-2-53" href="#__codelineno-2-53"></a><span class="w">            </span><span class="p">},</span>
+</span><span id="__span-2-54"><a id="__codelineno-2-54" name="__codelineno-2-54" href="#__codelineno-2-54"></a><span class="w">            </span><span class="p">{</span>
+</span><span id="__span-2-55"><a id="__codelineno-2-55" name="__codelineno-2-55" href="#__codelineno-2-55"></a><span class="w">              </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;roads&#39;</span><span class="p">,</span>
+</span><span id="__span-2-56"><a id="__codelineno-2-56" name="__codelineno-2-56" href="#__codelineno-2-56"></a><span class="w">              </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;line&#39;</span><span class="p">,</span>
+</span><span id="__span-2-57"><a id="__codelineno-2-57" name="__codelineno-2-57" href="#__codelineno-2-57"></a><span class="w">              </span><span class="nx">source</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;LINZ Basemaps&#39;</span><span class="p">,</span>
+</span><span id="__span-2-58"><a id="__codelineno-2-58" name="__codelineno-2-58" href="#__codelineno-2-58"></a><span class="w">              </span><span class="s1">&#39;source-layer&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;streets&#39;</span><span class="p">,</span>
+</span><span id="__span-2-59"><a id="__codelineno-2-59" name="__codelineno-2-59" href="#__codelineno-2-59"></a><span class="w">              </span><span class="nx">filter</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;all&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">[</span><span class="s1">&#39;==&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;kind&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;motorway&#39;</span><span class="p">]],</span>
+</span><span id="__span-2-60"><a id="__codelineno-2-60" name="__codelineno-2-60" href="#__codelineno-2-60"></a><span class="w">              </span><span class="nx">paint</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-61"><a id="__codelineno-2-61" name="__codelineno-2-61" href="#__codelineno-2-61"></a><span class="w">                </span><span class="s1">&#39;line-color&#39;</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#e89218&#39;</span><span class="p">,</span>
+</span><span id="__span-2-62"><a id="__codelineno-2-62" name="__codelineno-2-62" href="#__codelineno-2-62"></a><span class="w">                </span><span class="s1">&#39;line-width&#39;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-2-63"><a id="__codelineno-2-63" name="__codelineno-2-63" href="#__codelineno-2-63"></a><span class="w">                  </span><span class="nx">base</span><span class="o">:</span><span class="w"> </span><span class="mf">1.4</span><span class="p">,</span>
+</span><span id="__span-2-64"><a id="__codelineno-2-64" name="__codelineno-2-64" href="#__codelineno-2-64"></a><span class="w">                  </span><span class="nx">stops</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
+</span><span id="__span-2-65"><a id="__codelineno-2-65" name="__codelineno-2-65" href="#__codelineno-2-65"></a><span class="w">                    </span><span class="p">[</span><span class="mf">8</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">],</span>
+</span><span id="__span-2-66"><a id="__codelineno-2-66" name="__codelineno-2-66" href="#__codelineno-2-66"></a><span class="w">                    </span><span class="p">[</span><span class="mf">12</span><span class="p">,</span><span class="w"> </span><span class="mf">4</span><span class="p">],</span>
+</span><span id="__span-2-67"><a id="__codelineno-2-67" name="__codelineno-2-67" href="#__codelineno-2-67"></a><span class="w">                    </span><span class="p">[</span><span class="mf">16</span><span class="p">,</span><span class="w"> </span><span class="mf">8</span><span class="p">],</span>
+</span><span id="__span-2-68"><a id="__codelineno-2-68" name="__codelineno-2-68" href="#__codelineno-2-68"></a><span class="w">                    </span><span class="p">[</span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="mf">16</span><span class="p">],</span>
+</span><span id="__span-2-69"><a id="__codelineno-2-69" name="__codelineno-2-69" href="#__codelineno-2-69"></a><span class="w">                  </span><span class="p">],</span>
+</span><span id="__span-2-70"><a id="__codelineno-2-70" name="__codelineno-2-70" href="#__codelineno-2-70"></a><span class="w">                </span><span class="p">},</span>
+</span><span id="__span-2-71"><a id="__codelineno-2-71" name="__codelineno-2-71" href="#__codelineno-2-71"></a><span class="w">              </span><span class="p">},</span>
+</span><span id="__span-2-72"><a id="__codelineno-2-72" name="__codelineno-2-72" href="#__codelineno-2-72"></a><span class="w">            </span><span class="p">},</span>
+</span><span id="__span-2-73"><a id="__codelineno-2-73" name="__codelineno-2-73" href="#__codelineno-2-73"></a><span class="w">          </span><span class="p">],</span>
+</span><span id="__span-2-74"><a id="__codelineno-2-74" name="__codelineno-2-74" href="#__codelineno-2-74"></a><span class="w">          </span><span class="nx">center</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="mf">174.7633</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">36.8485</span><span class="p">],</span>
+</span><span id="__span-2-75"><a id="__codelineno-2-75" name="__codelineno-2-75" href="#__codelineno-2-75"></a><span class="w">          </span><span class="nx">zoom</span><span class="o">:</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span>
+</span><span id="__span-2-76"><a id="__codelineno-2-76" name="__codelineno-2-76" href="#__codelineno-2-76"></a><span class="w">        </span><span class="p">},</span>
+</span><span id="__span-2-77"><a id="__codelineno-2-77" name="__codelineno-2-77" href="#__codelineno-2-77"></a><span class="w">      </span><span class="p">});</span>
+</span><span id="__span-2-78"><a id="__codelineno-2-78" name="__codelineno-2-78" href="#__codelineno-2-78"></a><span class="w">    </span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
+</span><span id="__span-2-79"><a id="__codelineno-2-79" name="__codelineno-2-79" href="#__codelineno-2-79"></a>  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
+</span><span id="__span-2-80"><a id="__codelineno-2-80" name="__codelineno-2-80" href="#__codelineno-2-80"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
+</span></code></pre></div>
+<iframe src="index.maplibre.vector.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+              </article>
+            </div>
+<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
+        </div>
+      </main>
+        <footer class="md-footer">
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+      <div class="md-copyright">
+    <div class="md-copyright__highlight">
+      <a href="https://www.linz.govt.nz/copyright">© CC BY 4.0 LINZ</a>
+    </div>
+    Made with
+    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
+      Material for MkDocs
+    </a>
+</div>
+    </div>
+  </div>
+</footer>
+    </div>
+    <div class="md-dialog" data-md-component="dialog">
+      <div class="md-dialog__inner md-typeset"></div>
+    </div>
+    <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.indexes", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
+      <script src="../../../assets/javascripts/bundle.83f73b43.min.js"></script>
+  </body>
+</html>