Parameterize the map popup

archesproject · Jan 17, 2025 · 883c841 · 883c841
1 parent c00873d
commit 883c841
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
@@ -198,6 +198,7 @@ onMounted(async () => {
                     :overlays="overlays"
                     :sources="sources"
                     :include-drawer="false"
+                    :popup-enabled="false"
                 />
             </div>
 

diff --git a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -33,6 +33,7 @@ const props = defineProps<{
     basemaps: Basemap[];
     sources: MapSource[];
     includeDrawer: boolean;
+    popupEnabled: boolean;
 }>();
 
 const map: Ref<Map | null> = ref(null);
@@ -116,6 +117,7 @@ function updateSelectedDrawnFeature(feature: Feature) {
             :overlays="overlays"
             :sources="sources"
             :is-drawing-enabled="true"
+            :is-popup-enabled="popupEnabled"
             @map-initialized="
                 (mapInstance) => {
                     map = mapInstance;

diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -66,6 +66,7 @@ interface Props {
     isDrawingEnabled?: boolean;
     drawnFeatures?: Feature[];
     drawnFeaturesBuffer?: Buffer;
+    isPopupEnabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -76,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
     isDrawingEnabled: false,
     drawnFeatures: () => [],
     drawnFeaturesBuffer: undefined,
+    isPopupEnabled: false,
 });
 
 const {
@@ -86,6 +88,7 @@ const {
     isDrawingEnabled,
     drawnFeatures,
     drawnFeaturesBuffer,
+    isPopupEnabled,
 } = props;
 
 let resultsSelected = inject("resultsSelected") as Ref<string[]>;
@@ -105,7 +108,7 @@ const resourceOverlaysClickHandlers: {
     [key: string]: (e: MapMouseEvent) => void;
 } = {};
 
-// const popupInstance: Ref<Popup | null> = ref(null);
+const popupInstance: Ref<Popup | null> = ref(null);
 const clickedFeatures: Ref<Feature[]> = ref([]);
 const clickedCoordinates: Ref<[number, number]> = ref([0, 0]);
 const popupContainerRerenderKey = ref(0);
@@ -144,15 +147,17 @@ watch(
     },
 );
 
-// watch(clickedFeatures, () => {
-//     if (popupInstance.value) {
-//         popupInstance.value.remove();
-//     }
-//     popupInstance.value = new maplibregl.Popup()
-//         .setLngLat(clickedCoordinates.value)
-//         .setDOMContent(popupContainer.value!.$el)
-//         .addTo(map.value!);
-// });
+if (isPopupEnabled) {
+    watch(clickedFeatures, () => {
+        if (popupInstance.value) {
+            popupInstance.value.remove();
+        }
+        popupInstance.value = new maplibregl.Popup()
+            .setLngLat(clickedCoordinates.value)
+            .setDOMContent(popupContainer.value!.$el)
+            .addTo(map.value!);
+    });
+}
 
 onMounted(() => {
     createMap();