fix: apiKey in my-map.historic HTML demo (#44)

* Extend `MyMapElement.attribution()` getter
nfreear · Nov 12, 2023 · c6c49ad · c6c49ad
1 parent 689d338
commit c6c49ad
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/demo/my-map.historic.html b/demo/my-map.historic.html
@@ -32,7 +32,7 @@
 
 <my-map
   zoom="14"
-  tile-url="https://api.maptiler.com/tiles/uk-osgb63k1885/{z}/{x}/{y}.png?key={apikey}"
+  tile-url="https://api.maptiler.com/tiles/uk-osgb63k1885/{z}/{x}/{y}.png?key={apiKey}"
   api-key="50989pBsEFYDspzgw3P3"
   attribution="© {MT} | © {NLS} ({gb1in})"
 >
@@ -47,7 +47,7 @@ <h1> Historic Maps </h1>
         </p>
       <form>
       <p>
-        <small>Map: <q>Great Britain, Ordnance Survey, One-Inch to the mile (1:63,360), 'Hills' edition, 1885-1903</q></small>
+        <small>Map tiles: <q>Great Britain, Ordnance Survey, One-Inch to the mile (1:63,360), 'Hills' edition, 1885-1903</q></small>
         (<a href="https://maps.nls.uk/projects/api/#gb1inch">NLS</a>)
       </p>
     </div>

diff --git a/src/components/MyMapElement.js b/src/components/MyMapElement.js
@@ -208,6 +208,7 @@ export class MyMapElement extends MyElement {
   }
 
   get attribution () {
+    const YEAR = new Date().getFullYear();
     const ATTR = this.getAttribute('attribution') || 'Map data &copy; {OSM} contributors, Imagery © {MB}';
     return ATTR
       .replace('{OSM}', '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>')
@@ -216,6 +217,8 @@ export class MyMapElement extends MyElement {
       .replace('{MT}', '<a href="https://www.maptiler.com/copyright/" part="att mt">MapTiler</a>')
       .replace('{NLS}', '<a href="https://maps.nls.uk/projects/api/" part="att nls">National Library of Scotland</a>')
       .replace('{gb1in}', '<a href="https://maps.nls.uk/projects/api/#gb1inch" title="Great Britain, Ordnance Survey one-inch to the mile (1:63,360), \'Hills\' edition, 1885-1903">GB 1in</a>')
+      .replace('{OS}', '<a href="https://osdatahub.os.uk/legal/overview">Ordnance Survey</a>')
+      .replace('{OSC}', `Contains <a href="https://osdatahub.os.uk/legal/overview" title="Ordnance Survey">OS data</a> © Crown copyright and database rights ${YEAR}`)
     ;
   }