feat: configurable copyright for OS data (#88)

src/my-map.ts

@@ -142,6 +142,9 @@ export class MyMap extends LitElement {
   @property({ type: String })
   osFeaturesApiKey = import.meta.env.VITE_APP_OS_FEATURES_API_KEY || "";
 
+  @property({ type: String })
+  osCopyright = `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`;
+
   @property({ type: Boolean })
   hideResetControl = false;
 
@@ -164,8 +167,12 @@ export class MyMap extends LitElement {
     const useVectorTiles =
       !this.disableVectorTiles && Boolean(this.osVectorTilesApiKey);
 
-    const rasterBaseMap = makeRasterBaseMap(this.osVectorTilesApiKey);
+    const rasterBaseMap = makeRasterBaseMap(
+      this.osCopyright,
+      this.osVectorTilesApiKey
+    );
     const osVectorTileBaseMap = makeOsVectorTileBaseMap(
+      this.osCopyright,
       this.osVectorTilesApiKey
     );
 

src/os-layers.ts

@@ -11,15 +11,12 @@ const tileServiceUrl = `https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/
 const vectorTileServiceUrl = `https://api.os.uk/maps/vector/v1/vts/tile/{z}/{y}/{x}.pbf?srs=3857&key=`;
 const vectorTileStyleUrl = `https://api.os.uk/maps/vector/v1/vts/resources/styles?srs=3857&key=`;
 
-// currently based on Southwark's OS license
-const COPYRIGHT = "© Crown copyright and database rights 2021 OS (0)100019252";
-
-export function makeRasterBaseMap(apiKey?: string) {
+export function makeRasterBaseMap(copyright: string, apiKey?: string) {
   return new TileLayer({
     source: apiKey
       ? new XYZ({
           url: tileServiceUrl + apiKey,
-          attributions: [COPYRIGHT],
+          attributions: [copyright],
           attributionsCollapsible: false,
           maxZoom: 20,
         })
@@ -30,23 +27,23 @@ export function makeRasterBaseMap(apiKey?: string) {
   });
 }
 
-export function makeOsVectorTileBaseMap(apiKey: string) {
+export function makeOsVectorTileBaseMap(copyright: string, apiKey: string) {
   let osVectorTileLayer = new VectorTileLayer({
     declutter: true,
     source: new VectorTileSource({
       format: new MVT(),
       url: vectorTileServiceUrl + apiKey,
-      attributions: [COPYRIGHT],
+      attributions: [copyright],
       attributionsCollapsible: false,
     }),
   });
-  
+
   if (apiKey) {
     // ref https://github.com/openlayers/ol-mapbox-style#usage-example
     fetch(vectorTileStyleUrl + apiKey)
-      .then(response => response.json())
-      .then(glStyle => stylefunction(osVectorTileLayer, glStyle, "esri"))
-      .catch(error => console.log(error));
+      .then((response) => response.json())
+      .then((glStyle) => stylefunction(osVectorTileLayer, glStyle, "esri"))
+      .catch((error) => console.log(error));
   }
 
   return osVectorTileLayer;