Highlight selected feature

archesproject · Nov 26, 2024 · 992697e · 992697e
1 parent 37520de
commit 992697e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 6 deletions.
diff --git a/afrc/migrations/0001_initial.py b/afrc/migrations/0001_initial.py
@@ -1447,9 +1447,14 @@ def add_map_layers(apps, schema_editor):
                             "==", "$type", "Point"
                         ]],
                         "paint": {
-                            "circle-radius": 6,
+                            "circle-radius": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                6,
+                                4
+                            ],
                             "circle-opacity": 1,
-                            "circle-color": "#00f"
+                            "circle-color": "#00f",
                         }
                     }, {
                         "id": "referencecollections-point",
@@ -1469,7 +1474,12 @@ def add_map_layers(apps, schema_editor):
                         "type": "line",
                         "paint": {
                             "line-color": "#00f",
-                            "line-width": 3
+                            "line-width": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                3,
+                                1
+                            ]
                         },
                         "layout": {
                             "line-cap": "round",
@@ -1483,7 +1493,12 @@ def add_map_layers(apps, schema_editor):
                         "type": "line",
                         "paint": {
                             "line-color": "#00f",
-                            "line-width": 3
+                            "line-width": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                3,
+                                1
+                            ],
                         },
                         "filter": [
                             "==",
@@ -1503,7 +1518,7 @@ def add_map_layers(apps, schema_editor):
                         "paint": {
                             "fill-color": "#00f",
                             "fill-opacity": 0.1,
-                            "fill-outline-color": "#0ff"
+                            "fill-outline-color": "#00f"
                         },
                         "filter": [
                             "==",

diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -126,6 +126,13 @@ watch(
     { deep: true },
 );
 
+watch(
+    () => resultsSelected,
+    (selected) => {
+        updateFeatureSelection(selected);
+    }, {deep: true}
+);
+
 watch(
     () => drawnFeaturesBuffer,
     () => {
@@ -187,6 +194,28 @@ async function fitBoundsOfFeatures(features: FeatureCollection) {
     });
 }
 
+function updateFeatureSelection(selected: Ref<string[]>) {
+    const layers = []
+    overlays.forEach((overlay) => {
+        layers.push(...overlay.layerdefinitions.map(
+            (layerDefinition) => layerDefinition.id,
+        ));
+    });
+    const features = map.value!.queryRenderedFeatures({layers:layers});
+    features.forEach(feature => {
+        const featureSelected = selected.value.includes(feature.properties?.resourceinstanceid);
+        map.value.setFeatureState(
+            {
+                source: "referencecollections",
+                sourceLayer: "referencecollections",
+                id: feature.id,
+            },
+            { selected: featureSelected }
+        );
+    });
+}
+
+
 function addBufferLayer() {
     map.value!.addSource(BUFFER_LAYER_ID, {
         type: "geojson",

diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -10,10 +10,21 @@ const props = defineProps({
         required: true,
     },
 });
+
+function selectResult(resourceid) {
+    resultsSelected.value = [resourceid];
+}
+
+function clearResult(e) {
+    resultsSelected.value = [];
+}
+
 </script>
 
 <template>
-    <section class="result">
+    <section class="result" :class="{ hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)}"
+            @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
+            @mouseleave="clearResult">
         <div class="image-placeholder">
             <img src="https://picsum.photos/160" />
         </div>
@@ -47,6 +58,10 @@ const props = defineProps({
     display: flex;
     flex-direction: row;
 }
+.result.hovered {
+    background-color: rgb(239 245 252);
+    border: 1px solid rgb(139 145 252);
+}
 .result .result-content {
     height: 10rem;
     overflow: hidden;