fix(landing): correct attribution example (#2118)

* docs(attribution): improve example usage * fix(landing): correct attribution example
linz · Mar 18, 2022 · c6b0a96 · c6b0a96
1 parent 10e3c0f
commit c6b0a96
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 59 deletions.
diff --git a/packages/attribution/README.md b/packages/attribution/README.md
@@ -11,10 +11,14 @@ npm install @basemaps/attribution
 ```js
 import { Attribution } from '@basemaps/attribution';
 
-const attributions = await attributions.load(attrURL);
+const attributions = await Attribution.load('https://basemaps.linz.govt.nz/v1/tiles/aerial/EPSG:3857/attribution.json?api=...');
 
-const attrList = attributions.filter([19455725.1, -5053732.8, 19456330.7, -5053278.8], 17)));
+// Find all imagery sets inside the following bounding box
+const attrList = attributions.filter([144.7377202, -45.8938181, 195.62639, -37.65336], 6);
+
+// Convert the attrubtion list to a human readable description
 const description = attributions.renderList(attrList);
+// "NZ 10m Satellite Imagery (2020-2021) & GEBCO 2020 Grid"
 ```
 
 Using a CDN see https://basemaps.linz.govt.nz/examples/index.openlayers.attribution.wmts.3857.html.

diff --git a/packages/landing/static/examples/index.openlayers.attribution.wmts.3857.html b/packages/landing/static/examples/index.openlayers.attribution.wmts.3857.html
@@ -1,59 +1,55 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>OpenLayers WMTS Basemaps Demo</title>
-    <link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
-        type="text/css"
-    />
-    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
-    $ATTR_FILE
-  </head>
-
-  <body>
-    <div id="map" style="width: 800px; height: 600px;"></div>
-    <script>
-     (async () => {
-         const apiKey = localStorage.getItem('api-key');
-         if (! apiKey) {
-             throw new Error('Missing api-key in localStorage');
-         }
-
-         const projection = 'EPSG:3857';
-         const baseUrl = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/' + projection;
-         const loadingWmts = fetch(baseUrl+'/WMTSCapabilities.xml?api='+apiKey);
-         const attributions = new BasemapsAttribution(projection);
-         const loadingAttrs = attributions.load(baseUrl+'/attribution.json?api='+apiKey);
-
-         const parser = new ol.format.WMTSCapabilities();
-         const wmtsXml = parser.read(await (await loadingWmts).text());
-         const options = ol.source.WMTS.optionsFromCapabilities(wmtsXml, {
-             layer: 'aerial',
-             matrixSet: projection,
-         });
-
-         const view  = new ol.View({
-             center: [19467552, -5074414],
-             zoom: 6,
-         });
-
-         const source = new ol.source.WMTS(options);
-
-         const map = new ol.Map({
-             target: 'map',
-             layers: [new ol.layer.Tile({ source, projection })],
-             controls: ol.control.defaults({ attributionOptions: { collapsed: false, collapsible: false } }),
-             view,
-         });
-
-         await loadingAttrs;
-         map.addEventListener('moveend', () => {
-             source.setAttributions(attributions.renderList(
-                 attributions.filter(view.calculateExtent(), view.getZoom())));
-         });
-     })();
-    </script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>OpenLayers WMTS Basemaps Demo</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
+    type="text/css" />
+  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
+  $ATTR_FILE
+</head>
+
+<body>
+  <div id="map" style="width: 800px; height: 600px;"></div>
+  <script>
+    (async () => {
+      const apiKey = localStorage.getItem('api-key');
+      if (!apiKey) throw new Error('Missing api-key in localStorage');
+
+      const projection = 'EPSG:3857';
+      const baseUrl = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/' + projection;
+      const loadingWmts = fetch(baseUrl + '/WMTSCapabilities.xml?api=' + apiKey);
+
+      const parser = new ol.format.WMTSCapabilities();
+      const wmtsXml = parser.read(await (await loadingWmts).text());
+      const options = ol.source.WMTS.optionsFromCapabilities(wmtsXml, {
+        layer: 'aerial',
+        matrixSet: projection,
+      });
+
+      const view = new ol.View({ center: [19467552, -5074414], zoom: 6, });
+
+      const source = new ol.source.WMTS(options);
+
+      const map = new ol.Map({
+        target: 'map',
+        layers: [new ol.layer.Tile({ source, projection })],
+        controls: ol.control.defaults({ attributionOptions: { collapsed: false, collapsible: false } }),
+        view,
+      });
+
+      const attributions = await BasemapsAttribution.load(baseUrl + '/attribution.json?api=' + apiKey);
+      // Ignore the hillshade layers from attribution
+      attributions.isIgnored = a => a.collection.title.toLowerCase().includes('geographx')
+      map.addEventListener('moveend', () => {
+        // Transform the extent into Lat/Long
+        const extent = ol.proj.transformExtent(view.calculateExtent(), projection, 'EPSG:4326');
+        const filtered = attributions.filter(extent, view.getZoom());
+        source.setAttributions(attributions.renderList(filtered));
+      });
+    })();
+  </script>
+</body>
+
+</html>