feat: ability to set multiple custom attributions and collapse

src/components/my-map/index.ts

@@ -96,6 +96,9 @@ export class MyMap extends LitElement {
     geometry: {},
   };
 
+  @property({ type: String })
+  drawGeojsonDataCopyright = "";
+
   @property({ type: Number })
   drawGeojsonDataBuffer = 100;
 
@@ -147,6 +150,9 @@ export class MyMap extends LitElement {
     features: [],
   };
 
+  @property({ type: String })
+  geojsonDataCopyright = "";
+
   @property({ type: String })
   geojsonColor = "#ff0000";
 
@@ -166,7 +172,8 @@ export class MyMap extends LitElement {
   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`;
+  osCopyright =
+    `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`;
 
   @property({ type: String })
   osProxyEndpoint = "";
@@ -195,6 +202,9 @@ export class MyMap extends LitElement {
   @property({ type: Boolean })
   showPrint = false;
 
+  @property({ type: Boolean })
+  collapseAttributions = false;
+
   @property({ type: Object })
   clipGeojsonData = {
     type: "Feature",
@@ -219,11 +229,13 @@ export class MyMap extends LitElement {
       this.osVectorTilesApiKey,
       this.osProxyEndpoint,
       this.osCopyright,
+      this.collapseAttributions,
     );
     const osVectorTileBaseMap = makeOsVectorTileBaseMap(
       this.osVectorTilesApiKey,
       this.osProxyEndpoint,
       this.osCopyright,
+      this.collapseAttributions,
     );
 
     const useVectorTiles =
@@ -365,11 +377,13 @@ export class MyMap extends LitElement {
         featureProjection: "EPSG:3857",
       });
       geojsonSource.addFeatures(features);
+      geojsonSource.setAttributions(this.geojsonDataCopyright);
     } else if (this.geojsonData.type === "Feature") {
       let feature = new GeoJSON().readFeature(this.geojsonData, {
         featureProjection: "EPSG:3857",
       });
       geojsonSource.addFeature(feature);
+      geojsonSource.setAttributions(this.geojsonDataCopyright);
     }
 
     const geojsonLayer = new VectorLayer({
@@ -425,6 +439,7 @@ export class MyMap extends LitElement {
           featureProjection: "EPSG:3857",
         });
         drawingSource.addFeature(feature);
+        drawingSource.setAttributions(this.drawGeojsonDataCopyright);
         fitToData(map, drawingSource, this.drawGeojsonDataBuffer);
       }
 

src/components/my-map/os-layers.ts

@@ -10,12 +10,18 @@ import { getServiceURL } from "../../lib/ordnanceSurvey";
 export function makeRasterBaseMap(
   apiKey: string,
   proxyEndpoint: string,
-  copyright: string
+  copyright: string,
+  collapseAttributions: boolean,
 ): TileLayer<OSM> {
   const isUsingOS = Boolean(apiKey || proxyEndpoint);
   // Fallback to OSM if not using OS services
   const basemap = isUsingOS
-    ? makeOSRasterBaseMap(apiKey, proxyEndpoint, copyright)
+    ? makeOSRasterBaseMap(
+        apiKey,
+        proxyEndpoint,
+        copyright,
+        collapseAttributions,
+      )
     : makeDefaultTileLayer();
   basemap.set("name", "rasterBaseMap");
   return basemap;
@@ -24,7 +30,8 @@ export function makeRasterBaseMap(
 function makeOSRasterBaseMap(
   apiKey: string,
   proxyEndpoint: string,
-  copyright: string
+  copyright: string,
+  collapseAttributions: boolean,
 ): TileLayer<XYZ> {
   const tileServiceURL = getServiceURL({
     service: "xyz",
@@ -36,7 +43,7 @@ function makeOSRasterBaseMap(
       url: tileServiceURL,
       attributions: [copyright],
       crossOrigin: "anonymous",
-      attributionsCollapsible: false,
+      attributionsCollapsible: collapseAttributions,
       maxZoom: 20,
     }),
   });
@@ -54,7 +61,8 @@ function makeDefaultTileLayer(): TileLayer<OSM> {
 export function makeOsVectorTileBaseMap(
   apiKey: string,
   proxyEndpoint: string,
-  copyright: string
+  copyright: string,
+  collapseAttributions: boolean,
 ): VectorTileLayer | undefined {
   const isUsingOS = Boolean(apiKey || proxyEndpoint);
   if (!isUsingOS) return;
@@ -74,7 +82,7 @@ export function makeOsVectorTileBaseMap(
       format: new MVT(),
       url: vectorTileServiceUrl,
       attributions: [copyright],
-      attributionsCollapsible: false,
+      attributionsCollapsible: collapseAttributions,
     }),
   });
 

src/components/my-map/styles.scss

@@ -90,3 +90,11 @@
   width: 30px;
   height: auto;
 }
+
+.ol-attribution ul {
+  display: block;
+}
+
+.ol-attribution li {
+  display: list-item;
+}