add attribution settings (#32)

* add attribution settings

* linting

Author: BryonLewis

demo/src/DemoToggleCompare.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     const availableStyles = [
       openStreetMapStyle,
       naipStyle,
-      nyImagery
+      nyImagery,
     ]
 
     const selectedStyleIndexA = ref(0)
@@ -115,7 +115,7 @@ export default defineComponent({
     const selectedLayersA = ref<string[]>([])
     const selectedLayersB = ref<string[]>([])
 
-    const handleMapReady = (map: MaplibreMap) => {
+    const handleMapAReady = (map: MaplibreMap) => {
       mapAInstance.value = map;
       mapAInstance.value.setStyle(availableStyles[selectedStyleIndexA.value]);
     }
@@ -145,7 +145,7 @@ export default defineComponent({
       selectedStyleIndexB,
       selectedLayersA,
       selectedLayersB,
-      handleMapReady,
+      handleMapAReady,
       handleToggleCompare,
     }
   }
@@ -214,7 +214,7 @@ export default defineComponent({
         :camera="{ center: [-74.1847, 43.1339], zoom: 9, bearing: 0, pitch: 0 }" 
         :swiperOptions="swiperOptions"
         :compareEnabled="compareEnabled"
-        @map-ready="handleMapReady"
+        @map-ready-a="handleMapAReady"
       />
     </div>
   </div>

src/components/LayerCompare.vue

@@ -2,7 +2,9 @@
 import {
   defineComponent, PropType,
 } from 'vue';
-import { StyleSpecification, RequestParameters, ResourceType } from 'maplibre-gl';
+import {
+  AttributionControlOptions, StyleSpecification, RequestParameters, ResourceType,
+} from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import type { SwiperOptions, CameraData } from './MapCompare.vue';
 import MapCompare from './MapCompare.vue';
@@ -73,6 +75,11 @@ export default defineComponent({
         arrowColor: '#666',
       }),
     },
+    attributionControl: {
+      type: [Object, Boolean] as PropType<AttributionControlOptions | false>,
+      required: false,
+      default: () => undefined,
+    },
   },
   emits: ['panend', 'zoomend', 'pitchend', 'rotateend'],
   setup(_props, { emit }) {
@@ -113,6 +120,7 @@ export default defineComponent({
     :layer-order="layerOrder"
     :headers="headers"
     :transform-request="transformRequest"
+    :attribution-control="attributionControl"
     @panend="handlePanEnd"
     @zoomend="handleZoomEnd"
     @pitchend="handlePitchEnd"

src/components/MapCompare.vue

@@ -98,6 +98,11 @@ export default defineComponent({
         darkMode: false,
       }),
     },
+    attributionControl: {
+      type: [Object, Boolean] as PropType<maplibregl.AttributionControlOptions | false>,
+      required: false,
+      default: () => undefined,
+    },
   },
   emits: ['panend', 'zoomend', 'pitchend', 'rotateend', 'loading-complete'],
   setup(props, { slots, emit }) {
@@ -225,6 +230,7 @@ export default defineComponent({
           url,
           headers: props.headers,
         }),
+        attributionControl: props.attributionControl,
       });
 
       // Initialize Map B
@@ -239,6 +245,7 @@ export default defineComponent({
           url,
           headers: props.headers,
         }),
+        attributionControl: props.attributionControl,
       });
 
       // Enforce absolute positioning immediately after map creation

src/components/ToggleCompare.vue

@@ -8,7 +8,6 @@ import {
   PropType,
   computed,
   nextTick,
-  defineExpose,
 } from 'vue';
 import maplibregl, { Map as MaplibreMap, StyleSpecification } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -123,8 +122,17 @@ export default defineComponent({
         darkMode: false,
       }),
     },
+    mapContainerId: {
+      type: String,
+      default: 'mapContainer',
+    },
+    attributionControl: {
+      type: [Object, Boolean] as PropType<maplibregl.AttributionControlOptions | false>,
+      required: false,
+      default: () => undefined,
+    },
   },
-  emits: ['panend', 'zoomend', 'pitchend', 'rotateend', 'loading-complete', 'map-ready'],
+  emits: ['panend', 'zoomend', 'pitchend', 'rotateend', 'loading-complete', 'map-ready-a', 'map-ready-b'],
   setup(props, { slots, emit }) {
     const containerRef = ref<HTMLElement>();
     const mapARef = ref<HTMLElement>();
@@ -143,12 +151,6 @@ export default defineComponent({
     let mapAPitchEndHandler: (() => void) | null = null;
     let mapARotateEndHandler: (() => void) | null = null;
 
-    // Expose mapA instance
-    const getMapA = () => mapA;
-    defineExpose({
-      getMapA,
-    });
-
     // Helper function to enforce absolute positioning on map containers
     const enforceAbsolutePosition = () => {
       if (mapARef.value) {
@@ -274,6 +276,7 @@ export default defineComponent({
           url,
           headers: props.headers,
         }),
+        attributionControl: props.attributionControl,
       });
 
       // Enforce absolute positioning immediately after map creation
@@ -353,7 +356,7 @@ export default defineComponent({
       mapA!.on('rotateend', mapARotateEndHandler);
 
       // Emit map-ready event
-      emit('map-ready', mapA);
+      emit('map-ready-a', mapA);
     };
 
     const initializeMapB = async () => {
@@ -370,6 +373,7 @@ export default defineComponent({
           url,
           headers: props.headers,
         }),
+        attributionControl: props.attributionControl,
       });
 
       // Enforce absolute positioning immediately after map creation
@@ -422,6 +426,7 @@ export default defineComponent({
         enforceAbsolutePosition();
       };
       mapB!.on('resize', mapBResizeHandler);
+      emit('map-ready-b', mapB);
     };
 
     const initializeMaps = async () => {
@@ -581,6 +586,7 @@ export default defineComponent({
 
 <template>
   <div
+    :id="mapContainerId"
     ref="containerRef"
     class="map-compare-container"
     :style="{