feat: highlight map feature from list selection

teritorio · Jan 15, 2025 · d797452 · d797452
1 parent ea1e3e9
commit d797452
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 34 deletions.
diff --git a/src/components/LoCha/LoChaObject.vue b/src/components/LoCha/LoChaObject.vue
@@ -6,6 +6,9 @@ const props = defineProps<{
   feature: GeoJSON.Feature
 }>()
 
+if (!props.feature.id)
+  throw new Error(`Feature ID is missing.`)
+
 if (!props.feature.properties)
   throw new Error(`Feature ${props.feature.id} has no properties.`)
 
@@ -41,27 +44,23 @@ const title = computed(() => {
 })
 
 const color = computed(() => loChaColors[status.value])
-const { showLink, selectedLink } = useLoCha()
+const { showLink, selectedLink, resetLink } = useLoCha()
 const style = computed(() => {
   if (!selectedLink.value)
     return
 
-  if ([selectedLink.value.after, selectedLink.value.before].includes(props.feature.id?.toString())) {
-    return {
-      opacity: 1,
-    }
-  }
-
   return {
-    opacity: 0.3,
+    opacity: selectedLink.value.id.includes(props.feature.id!.toString()) ? 1 : 0.3,
   }
 })
 
 function handleClick(id?: string) {
   if (!id)
     throw new Error('Object not found')
 
-  showLink(id, status.value)
+  selectedLink.value?.id.includes(id)
+    ? resetLink()
+    : showLink(id, status.value)
 }
 </script>
 

diff --git a/src/components/VMap.vue b/src/components/VMap.vue
@@ -7,11 +7,29 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 
 const emit = defineEmits<MapEmits>()
 
-const { loCha } = useLoCha()
-const { init, handleMapDataUpdate } = useMap()
+const { loCha, selectedFeatures } = useLoCha()
+const { init, handleMapDataUpdate, setFeatureHighlight } = useMap()
 
 onMounted(() => init(emit))
 
+function updateFeatureHighlight(features: GeoJSON.Feature[] | undefined, state: boolean) {
+  if (!features)
+    return
+
+  features.forEach((f) => {
+    if (!f.id || !f.properties)
+      return
+
+    // TODO: use f.id once API returns a numeric int
+    setFeatureHighlight(f.properties.id.toString(), state)
+  })
+}
+
+watch(selectedFeatures, (newValue, oldValue) => {
+  updateFeatureHighlight(newValue, true)
+  updateFeatureHighlight(oldValue, false)
+})
+
 watch(loCha, (newValue) => {
   if (newValue) {
     handleMapDataUpdate(newValue)

diff --git a/src/composables/useLoCha.ts b/src/composables/useLoCha.ts
@@ -58,6 +58,7 @@ export interface LoCha {
   selectedLink: Ref<ApiLink | undefined>
   selectedFeatures: ComputedRef<GeoJSON.Feature[] | undefined>
   setLoCha: (loCha: ApiResponse) => void
+  resetLink: () => void
 }
 
 // Internal state variables
@@ -119,6 +120,10 @@ export function useLoCha(): LoCha {
     selectedLink.value = link
   }
 
+  function resetLink(): void {
+    selectedLink.value = undefined
+  }
+
   function _getFeature(id: string): GeoJSON.Feature | undefined {
     return loCha.value?.features.find(feature => feature.id?.toString() === id)
   }
@@ -193,5 +198,6 @@ export function useLoCha(): LoCha {
     selectedLink,
     selectedFeatures,
     setLoCha,
+    resetLink,
   }
 }
diff --git a/src/composables/useMap.ts b/src/composables/useMap.ts
@@ -20,6 +20,8 @@ export interface IMap {
    * @param data - The data to update the map with.
    */
   handleMapDataUpdate: (data: ApiResponse) => void
+
+  setFeatureHighlight: (id: string, state: boolean) => void
 }
 
 /**
@@ -275,25 +277,12 @@ export function useMap(): IMap {
         if (hoveredStateId.value) {
           _removePopup()
 
-          map.value!.setFeatureState(
-            {
-              source: SOURCE_ID,
-              id: hoveredStateId.value,
-            },
-            { hover: false },
-          )
+          setFeatureHighlight(hoveredStateId.value, false)
         }
 
         hoveredStateId.value = feature.id.toString()
 
-        map.value!.setFeatureState(
-          {
-            source: SOURCE_ID,
-            id: hoveredStateId.value,
-          },
-          { hover: true },
-        )
-
+        setFeatureHighlight(hoveredStateId.value, true)
         _openPopup(e.lngLat, feature)
       })
 
@@ -311,13 +300,7 @@ export function useMap(): IMap {
         map.value.getCanvas().style.cursor = ''
 
         if (hoveredStateId.value) {
-          map.value!.setFeatureState(
-            {
-              source: SOURCE_ID,
-              id: hoveredStateId.value,
-            },
-            { hover: false },
-          )
+          setFeatureHighlight(hoveredStateId.value, false)
           hoveredStateId.value = undefined
         }
 
@@ -326,10 +309,24 @@ export function useMap(): IMap {
     })
   }
 
+  function setFeatureHighlight(id: string, state: boolean): void {
+    if (!map.value)
+      throw new Error('Call useMap.init() function first.')
+
+    map.value!.setFeatureState(
+      {
+        source: SOURCE_ID,
+        id,
+      },
+      { hover: state },
+    )
+  }
+
   /**
    * Opens a popup when a feature is clicked on the map.
    * It displays the feature's ID at the coordinates of the feature.
-   * @param e - The MapMouseEvent triggered by the click.
+   * @param coords - Popup coordinates.
+   * @param feature - Selected feature information for Popup display
    */
   function _openPopup(coords: LngLatLike, feature: MapGeoJSONFeature): void {
     if (!map.value)
@@ -381,5 +378,6 @@ export function useMap(): IMap {
   return {
     init,
     handleMapDataUpdate,
+    setFeatureHighlight,
   }
 }