npm - @basemaps/landing - Versions diffs - 7.8.0 → 7.10.0 - Mend

@basemaps/landing 7.8.0 → 7.10.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 (48) hide show

package/build/components/debug.d.ts +5 -1
package/build/components/debug.js +41 -2
package/build/components/debug.js.map +1 -1
package/build/components/map.d.ts +0 -2
package/build/components/map.js +5 -65
package/build/components/map.js.map +1 -1
package/build/components/map.label.d.ts +15 -0
package/build/components/map.label.js +106 -0
package/build/components/map.label.js.map +1 -0
package/build/components/map.switcher.js +4 -6
package/build/components/map.switcher.js.map +1 -1
package/build/config.map.d.ts +5 -0
package/build/config.map.js +21 -1
package/build/config.map.js.map +1 -1
package/build/tile.matrix.d.ts +8 -2
package/build/tile.matrix.js +6 -6
package/build/tile.matrix.js.map +1 -1
package/build/url.d.ts +1 -0
package/build/url.js +7 -1
package/build/url.js.map +1 -1
package/dist/docs/404.html +22 -0
package/dist/docs/configuration/index.html +7 -0
package/dist/docs/deployment/index.html +7 -0
package/dist/docs/developer-guide/index.html +7 -0
package/dist/docs/examples/_overview/index.html +7 -0
package/dist/docs/examples/leaflet.xyz.3857/index.html +7 -0
package/dist/docs/examples/maplibre.opacity.3857/index.html +7 -0
package/dist/docs/examples/maplibre.vector.3857/index.html +7 -0
package/dist/docs/index.html +7 -0
package/dist/docs/operator-guide/cog-quality/index.html +7 -0
package/dist/docs/operator-guide/empty-tiles/index.html +7 -0
package/dist/docs/operator-guide/gebco/index.html +7 -0
package/dist/docs/operator-guide/index.html +7 -0
package/dist/docs/operator-guide/quick-start/index.html +7 -0
package/dist/docs/operator-guide/relief-shade/index.html +7 -0
package/dist/docs/operator-guide/static/projection_beehive_fakenztm2000.webp +0 -0
package/dist/docs/operator-guide/static/projection_beehive_nztm2000quad.webp +0 -0
package/dist/docs/operator-guide/static/projection_nztm2000quad_0_0_0.webp +0 -0
package/dist/docs/operator-guide/texture-shade/index.html +8 -1
package/dist/docs/operator-guide/xyz-projection/index.html +533 -0
package/dist/docs/quick-start/index.html +7 -0
package/dist/docs/sitemap.xml +24 -19
package/dist/docs/sitemap.xml.gz +0 -0
package/dist/docs/user-guide/_get-started/index.html +8 -1
package/dist/docs/user-guide/api-documentation/index.html +8 -1
package/dist/docs/user-guide/api-documentation/{swagger-9e70fa04.html → swagger-a5588c46.html} +1 -1
package/dist/docs/user-guide/technical-documentation/index.html +7 -0
package/package.json +5 -5

package/dist/docs/operator-guide/xyz-projection/index.html ADDED Viewed

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta content="width=device-width,initial-scale=1" name="viewport"/>
+<link href="http://localhost:8000/docs/operator-guide/xyz-projection/" rel="canonical"/>
+<link href="../texture-shade/" rel="prev"/>
+<link href="../../user-guide/_get-started/" rel="next"/>
+<link href="../../assets/images/favicon.png" rel="icon"/>
+<meta content="mkdocs-1.5.3, mkdocs-material-9.4.10" name="generator"/>
+<title>XYZ and projection math - LINZ Basemaps</title>
+<link href="../../assets/stylesheets/main.fad675c6.min.css" rel="stylesheet"/>
+<link href="../../assets/stylesheets/palette.356b1318.min.css" rel="stylesheet"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i%7COpen+Sans+Mono:400,400i,700,700i&amp;display=fallback" rel="stylesheet"/>
+<style>:root{--md-text-font:"Open Sans";--md-code-font:"Open Sans Mono"}</style>
+<link href="../../index.css" rel="stylesheet"/>
+<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 n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config",""),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
+<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
+</head>
+<body data-md-color-accent="indigo" data-md-color-primary="indigo" data-md-color-scheme="default" dir="ltr">
+<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
+<input autocomplete="off" class="md-toggle" data-md-toggle="drawer" id="__drawer" type="checkbox"/>
+<input autocomplete="off" class="md-toggle" data-md-toggle="search" id="__search" type="checkbox"/>
+<label class="md-overlay" for="__drawer"></label>
+<div data-md-component="skip">
+<a class="md-skip" href="#xyz-and-projection-math">
+          Skip to content
+        </a>
+</div>
+<div data-md-component="announce">
+</div>
+<header class="md-header md-header--shadow" data-md-component="header">
+<nav aria-label="Header" class="md-header__inner md-grid">
+<a aria-label="LINZ Basemaps" class="md-header__button md-logo" data-md-component="logo" href="../.." title="LINZ Basemaps">
+<img alt="logo" src="../../linz-motif.svg"/>
+</a>
+<label class="md-header__button md-icon" for="__drawer">
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"></path></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">
+              XYZ and projection math
+          </span>
+</div>
+</div>
+</div>
+<form class="md-header__option" data-md-component="palette">
+<input aria-label="Switch to dark mode" class="md-option" data-md-color-accent="indigo" data-md-color-media="(prefers-color-scheme: light)" data-md-color-primary="indigo" data-md-color-scheme="default" id="__palette_1" name="__palette" type="radio"/>
+<label class="md-header__button md-icon" for="__palette_2" hidden="" title="Switch to dark mode">
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 12 20 8.69Z"></path></svg>
+</label>
+<input aria-label="Switch to light mode" class="md-option" data-md-color-accent="indigo" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-primary="indigo" data-md-color-scheme="slate" id="__palette_2" name="__palette" type="radio"/>
+<label class="md-header__button md-icon" for="__palette_1" hidden="" title="Switch to light mode">
+<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-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 12 20 8.69Z"></path></svg>
+</label>
+</form>
+<div class="md-header__source">
+<a class="md-source" data-md-component="source" href="https://github.com/linz/basemaps" title="Go to repository">
+<div class="md-source__icon md-icon">
+<svg viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><!--! Font Awesome Free 6.4.2 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 2023 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.81z"></path></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 aria-label="Navigation" class="md-nav md-nav--primary" data-md-level="0">
+<label class="md-nav__title" for="__drawer">
+<a aria-label="LINZ Basemaps" class="md-nav__button md-logo" data-md-component="logo" href="../.." title="LINZ Basemaps">
+<img alt="logo" src="../../linz-motif.svg"/>
+</a>
+    LINZ Basemaps
+  </label>
+<div class="md-nav__source">
+<a class="md-source" data-md-component="source" href="https://github.com/linz/basemaps" title="Go to repository">
+<div class="md-source__icon md-icon">
+<svg viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><!--! Font Awesome Free 6.4.2 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 2023 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.81z"></path></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 class="md-nav__link" href="../..">
+<span class="md-ellipsis">
+    LINZ Basemaps
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../configuration/">
+<span class="md-ellipsis">
+    Configuration
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../deployment/">
+<span class="md-ellipsis">
+    Deployment
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../quick-start/">
+<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" id="__nav_5" type="checkbox"/>
+<div class="md-nav__link md-nav__container">
+<a class="md-nav__link" href="../../developer-guide/">
+<span class="md-ellipsis">
+    Developer guide
+  </span>
+</a>
+</div>
+<nav aria-expanded="false" aria-labelledby="__nav_5_label" class="md-nav" data-md-level="1">
+<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="">
+</ul>
+</nav>
+</li>
+<li class="md-nav__item md-nav__item--nested">
+<input class="md-nav__toggle md-toggle" id="__nav_6" type="checkbox"/>
+<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 aria-expanded="false" aria-labelledby="__nav_6_label" class="md-nav" data-md-level="1">
+<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 class="md-nav__link" href="../../examples/_overview/">
+<span class="md-ellipsis">
+    Overview
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../examples/leaflet.xyz.3857/">
+<span class="md-ellipsis">
+    Leaflet Raster Map
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../examples/maplibre.opacity.3857/">
+<span class="md-ellipsis">
+    Maplibre Opacity Slider
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../examples/maplibre.vector.3857/">
+<span class="md-ellipsis">
+    Maplibre Vector Map
+  </span>
+</a>
+</li>
+</ul>
+</nav>
+</li>
+<li class="md-nav__item md-nav__item--active md-nav__item--nested">
+<input checked="" class="md-nav__toggle md-toggle" id="__nav_7" type="checkbox"/>
+<div class="md-nav__link md-nav__container">
+<a class="md-nav__link" href="../">
+<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 aria-expanded="true" aria-labelledby="__nav_7_label" class="md-nav" data-md-level="1">
+<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 class="md-nav__link" href="../cog-quality/">
+<span class="md-ellipsis">
+    COG Quality
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../empty-tiles/">
+<span class="md-ellipsis">
+    Sparse Datasets and empty tiles
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../gebco/">
+<span class="md-ellipsis">
+    Gebco re-project to NZTM2000Quad cog file
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../quick-start/">
+<span class="md-ellipsis">
+    Running LINZ Basemaps - Quick Start
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../relief-shade/">
+<span class="md-ellipsis">
+    Relief shade
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../texture-shade/">
+<span class="md-ellipsis">
+    Texture shading
+  </span>
+</a>
+</li>
+<li class="md-nav__item md-nav__item--active">
+<input class="md-nav__toggle md-toggle" id="__toc" type="checkbox"/>
+<label class="md-nav__link md-nav__link--active" for="__toc">
+<span class="md-ellipsis">
+    XYZ and projection math
+  </span>
+<span class="md-nav__icon md-icon"></span>
+</label>
+<a class="md-nav__link md-nav__link--active" href="./">
+<span class="md-ellipsis">
+    XYZ and projection math
+  </span>
+</a>
+<nav aria-label="Table of contents" class="md-nav md-nav--secondary">
+<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 class="md-nav__link" href="#background">
+<span class="md-ellipsis">
+      Background
+    </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#process">
+<span class="md-ellipsis">
+      Process
+    </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#example">
+<span class="md-ellipsis">
+      Example
+    </span>
+</a>
+<nav aria-label="Example" class="md-nav">
+<ul class="md-nav__list">
+<li class="md-nav__item">
+<a class="md-nav__link" href="#example-code">
+<span class="md-ellipsis">
+      Example Code
+    </span>
+</a>
+</li>
+</ul>
+</nav>
+</li>
+</ul>
+</nav>
+</li>
+</ul>
+</nav>
+</li>
+<li class="md-nav__item md-nav__item--nested">
+<input class="md-nav__toggle md-toggle" id="__nav_8" type="checkbox"/>
+<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 aria-expanded="false" aria-labelledby="__nav_8_label" class="md-nav" data-md-level="1">
+<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 class="md-nav__link" href="../../user-guide/_get-started/">
+<span class="md-ellipsis">
+    Get started with LINZ Basemaps
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../user-guide/api-documentation/">
+<span class="md-ellipsis">
+    API documentation
+  </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../../user-guide/technical-documentation/">
+<span class="md-ellipsis">
+    Technical documentation and specifications
+  </span>
+</a>
+</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 aria-label="Table of contents" class="md-nav md-nav--secondary">
+<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 class="md-nav__link" href="#background">
+<span class="md-ellipsis">
+      Background
+    </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#process">
+<span class="md-ellipsis">
+      Process
+    </span>
+</a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#example">
+<span class="md-ellipsis">
+      Example
+    </span>
+</a>
+<nav aria-label="Example" class="md-nav">
+<ul class="md-nav__list">
+<li class="md-nav__item">
+<a class="md-nav__link" href="#example-code">
+<span class="md-ellipsis">
+      Example Code
+    </span>
+</a>
+</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="xyz-and-projection-math">XYZ and projection math</h1>
+<p><a href="https://github.com/linz/NZTM2000TileMatrixSet">NZTM2000Quad</a> is not supported by many third party tools especially inside the Vector Tile space. Often tools expect tiles to be served as <code>/{z}/{x}/{y}.mvt</code> and assume the projection is <a href="https://docs.ogc.org/is/17-083r2/17-083r2.html#63">WebMercatorQuad</a>.</p>
+<p>Basemaps uses the lack of built in projection information to allow tools to work with NZTM2000Quad tiles without knowing they are in a different tile matrix set.</p>
+<p>This is how basemaps provides <a href="https://epsg.io/2193">NZTM2000 EPSG:2193</a> support to Aerial imagery on https://basemaps.linz.govt.nz using custom projection logic <a href="https://github.com/linz/basemaps/blob/master/packages/landing/src/tile.matrix.ts#L56">basemaps/landing</a></p>
+<h2 id="background">Background</h2>
+<p>Tile mapping services use a <a href="https://docs.ogc.org/is/17-083r2/17-083r2.html">TileMatrixSet</a> to describe where the tiles are meant to be positioned on the globe using a origin point and scale information per zoom level, most web mapping systems assume the tile matrix set is <a href="https://docs.ogc.org/is/17-083r2/17-083r2.html#63">WebMercatorQuad</a>.</p>
+<p>Assuming the target tile matrix set is similar to WebMercatorQuad, which has a square tile grid, with zoom levels increasing at a factor of 2 and starting with a single tile z:0, x:0, y:0 points can be projected into a "fake" version of the tile matrix set and then used with any tool that supports <a href="https://epsg.io/4326">EPSG:4326</a> to <a href="https://epsg.io/3857">EPSG:3857</a> math such as tippecanoe.</p>
+<h2 id="process">Process</h2>
+<p>To create a fake projection from a tile grid the process is</p>
+<ul>
+<li>Take a lat, lon pair (<a href="https://epsg.io/4326">EPSG:4326</a> degrees) and project into the target projection (eg <a href="https://epsg.io/2193">EPSG:2193</a>)</li>
+<li>Take the target x,y pair (<a href="https://epsg.io/2193">EPSG:2193</a> metres) and project where in the tile grid the point would be located (px)</li>
+<li>Take the x,y pixels pair and assume it is now a WebMercatorQuad tile then project it to <a href="https://epsg.io/3857">EPSG:3857</a></li>
+<li>Take the x,y (<a href="https://epsg.io/3857">EPSG:3857</a> metres) and project it into lat, lon (<a href="https://epsg.io/4326">EPSG:4326</a>)</li>
+</ul>
+<p>The point is now in the fake projection and can be combined with applications that consume XYZ tiles</p>
+<h2 id="example">Example</h2>
+<p>To convert an example point, such as the <a href="https://en.wikipedia.org/wiki/Beehive_(New_Zealand)">Beehive</a> is located at <code>-41.2784°</code>, <code>174.7767°</code> (<a href="https://epsg.io/4326">EPSG:4326</a>) <img alt="Beehive NZTM2000Quad" src="../static/projection_beehive_nztm2000quad.webp"/></p>
+<p>Converting to <a href="https://epsg.io/2193">NZTM2000 EPSG:2193</a> <code>x: 1748795.82...</code>, <code>y: 5428814.899...</code></p>
+<p>Using NZTM2000Quad to convert to pixel cooridantes of tile z:0, x:0, y:0 yields <code>x:128.0001..., y:127.999...</code></p>
+<p><img alt="Beehive NZTM2000Quad" src="../static/projection_nztm2000quad_0_0_0.webp"/></p>
+<p>converting to metres EPSG:3857 x: <code>21.883...</code>, y: <code>7.2815...</code> and then into lat,lon (<a href="https://epsg.io/4326">EPSG:4326</a>) <code>0.0001...</code>, <code>0.0000...</code> as NZTM2000Quad is centred on the beehive the result of lat,lon approx 0,0 is expected!</p>
+<p><img alt="Beehive FakeNZTM2000Quad" src="../static/projection_beehive_fakenztm2000.webp"/></p>
+<p>These lat,lon coordinates can now be used in a system that works with XYZ tiles but assumes that they are in WebMercatorQuad</p>
+<h3 id="example-code">Example Code</h3>
+<p>Using <a href="https://github.com/linz/basemaps/tree/master/packages/geo">@basemaps/geo</a></p>
+<div class="language-typescript highlight"><pre><span></span><code><span id="__span-0-1"><a href="#__codelineno-0-1" id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="nx">NZTM2000QuadTms</span><span class="p">,</span><span class="w"> </span><span class="nx">GoogleTms</span><span class="p">,</span><span class="w"> </span><span class="nx">Projection</span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@basemaps/geo'</span>
+</span><span id="__span-0-2"><a href="#__codelineno-0-2" id="__codelineno-0-2" name="__codelineno-0-2"></a>
+</span><span id="__span-0-3"><a href="#__codelineno-0-3" id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="c1">// Convert to NZTMQuad pixel location</span>
+</span><span id="__span-0-4"><a href="#__codelineno-0-4" id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="kd">const</span><span class="w"> </span><span class="nx">nztmXy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Projection</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">Nztm2000QuadTms</span><span class="p">).</span><span class="nx">fromWgs84</span><span class="p">([</span><span class="mf">174.7767</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">41.2784</span><span class="p">])</span>
+</span><span id="__span-0-5"><a href="#__codelineno-0-5" id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="kd">const</span><span class="w"> </span><span class="nx">nztmPixels</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Nztm2000QuadTms</span><span class="p">.</span><span class="nx">sourceToPixels</span><span class="p">(</span><span class="nx">nztmXy</span><span class="p">[</span><span class="mf">0</span><span class="p">],</span><span class="w"> </span><span class="nx">nztmXy</span><span class="p">[</span><span class="mf">1</span><span class="p">],</span><span class="mf">0</span><span class="p">)</span>
+</span><span id="__span-0-6"><a href="#__codelineno-0-6" id="__codelineno-0-6" name="__codelineno-0-6"></a>
+</span><span id="__span-0-7"><a href="#__codelineno-0-7" id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="c1">// Convert from pixels assuming EPSG:3857 WebMercatorQuad</span>
+</span><span id="__span-0-8"><a href="#__codelineno-0-8" id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="kd">const</span><span class="w"> </span><span class="nx">googleXy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">GoogleTms</span><span class="p">.</span><span class="nx">pixelsToSource</span><span class="p">(</span><span class="nx">nztmPixels</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">nztmPixels</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">)</span>
+</span><span id="__span-0-9"><a href="#__codelineno-0-9" id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="kd">const</span><span class="w"> </span><span class="nx">latLon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Projection</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">GoogleTms</span><span class="p">).</span><span class="nx">toWgs84</span><span class="p">([</span><span class="nx">googleXy</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">googleXy</span><span class="p">.</span><span class="nx">y</span><span class="p">])</span><span class="sb">```</span>
+</span></code></pre></div>
+</article>
+</div>
+</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/" rel="noopener" target="_blank">
+      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.f886a092.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.6c14ae12.min.js"></script>
+<script>document$.subscribe(() => {
+            window.update_swagger_ui_iframe_height = function (id) {
+                var iFrameID = document.getElementById(id);
+                if (iFrameID) {
+                    full_height = (iFrameID.contentWindow.document.body.scrollHeight + 80) + "px";
+                    iFrameID.height = full_height;
+                    iFrameID.style.height = full_height;
+                }
+            }
+            let iframe_id_list = []
+            var iframes = document.getElementsByClassName("swagger-ui-iframe");
+            for (var i = 0; i < iframes.length; i++) {
+                iframe_id_list.push(iframes[i].getAttribute("id"))
+            }
+            let ticking = true;
+            document.addEventListener('scroll', function(e) {
+                if (!ticking) {
+                    window.requestAnimationFrame(()=> {
+                        let half_vh = window.innerHeight/2;
+                        for(var i = 0; i < iframe_id_list.length; i++) {
+                            let element = document.getElementById(iframe_id_list[i])
+                            if(element==null){
+                                return
+                            }
+                            let diff = element.getBoundingClientRect().top
+                            if(element.contentWindow.update_top_val){
+                                element.contentWindow.update_top_val(half_vh - diff)
+                            }
+                        }
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            });
+            const dark_scheme_name = "slate"
+            window.scheme = document.body.getAttribute("data-md-color-scheme")
+            const options = {
+                attributeFilter: ['data-md-color-scheme'],
+            };
+            function color_scheme_callback(mutations) {
+                for (let mutation of mutations) {
+                    if (mutation.attributeName === "data-md-color-scheme") {
+                        scheme = document.body.getAttribute("data-md-color-scheme")
+                        var iframe_list = document.getElementsByClassName("swagger-ui-iframe")
+                        for(var i = 0; i < iframe_list.length; i++) {
+                            var ele = iframe_list.item(i);
+                            if (ele) {
+                                if (scheme === dark_scheme_name) {
+                                    ele.contentWindow.enable_dark_mode();
+                                } else {
+                                    ele.contentWindow.disable_dark_mode();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            observer = new MutationObserver(color_scheme_callback);
+            observer.observe(document.body, options);
+            })</script></body>
+</html>

package/dist/docs/quick-start/index.html CHANGED Viewed

@@ -255,6 +255,13 @@
   </span>
 </a>
 </li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="../operator-guide/xyz-projection/">
+<span class="md-ellipsis">
+    XYZ and projection math
+  </span>
+</a>
+</li>
 </ul>
 </nav>
 </li>