WIP highlight feature

opendatasoft · Jan 10, 2024 · b59663e · b59663e
1 parent 1f7c971
commit b59663e
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -96,6 +96,32 @@ export default class MapPOI {
         });
     }
 
+    private setLayerLayoutProperty(layerId: string, name: string, value: unknown) {
+        this.queue((map) => {
+            map.setLayoutProperty(layerId, name, value );
+        });
+    }
+
+    /** Add a feature state and edit layer layout property to sort on top the active feature */
+    private highlightFeature(feature: ActiveFeatureType) {
+        if(!feature) return;
+        const {layer} = feature;
+        this.updateFeatureState(feature, POPUP_FEATURE_STATE_KEY, true);
+        this.setLayerLayoutProperty(layer.id, `${layer.type}-sort-key`, [
+            'case',
+            ["==", ["id"], feature.id], 1,
+            0
+        ]);
+
+    }
+
+    private unhighlightFeature(feature: ActiveFeatureType) {
+        if(!feature) return;
+        const {layer} = feature;
+        this.updateFeatureState(feature, POPUP_FEATURE_STATE_KEY, false);
+        this.setLayerLayoutProperty(layer.id, `${layer.type}-sort-key`, 0);
+    }
+
     /** Initialize a resize observer to always fit the map to its container */
     private initializeMapResizer(map: maplibregl.Map, container: HTMLElement) {
         // Set a resizeObserver to resize map on container size changes
@@ -172,15 +198,15 @@ export default class MapPOI {
     }
 
     private navigateToFeature(direction: number) {
-        this.updateFeatureState(this.activeFeature, POPUP_FEATURE_STATE_KEY, false);
+        this.unhighlightFeature(this.activeFeature);
         const activeFeatureIndex = this.availableFeaturesOnClick.indexOf(this.activeFeature);
         this.activeFeature = this.availableFeaturesOnClick[activeFeatureIndex + direction];
         this.updatePopupContent();
         this.updatePopupDisplay();
         if (this.activeFeature?.geometry.type === 'Point') {
             this.popup.setLngLat(this.activeFeature?.geometry.coordinates as LngLatLike);
         }
-        this.updateFeatureState(this.activeFeature, POPUP_FEATURE_STATE_KEY, true);
+        this.highlightFeature(this.activeFeature);
     }
 
     private renderFeaturesNavigationControls() {
@@ -307,7 +333,7 @@ export default class MapPOI {
         });
 
         // Removing feature state for the obsolete active feature.
-        this.updateFeatureState(this.activeFeature, POPUP_FEATURE_STATE_KEY, false);
+        this.unhighlightFeature(this.activeFeature);
         const hasFeatures = !!features.length;
         // Current rule: use the first feature to build the popup.
         // TO DO: Create a menu to display a list of feature to choose from.
@@ -340,7 +366,7 @@ export default class MapPOI {
 
         this.updatePopupContent();
         this.updatePopupDisplay();
-        this.updateFeatureState(this.activeFeature, POPUP_FEATURE_STATE_KEY, true);
+        this.highlightFeature(this.activeFeature);
     }
 
     initialize(
@@ -520,7 +546,7 @@ export default class MapPOI {
 
     constructor() {
         this.popup.on('close', () => {
-            this.updateFeatureState(this.activeFeature, POPUP_FEATURE_STATE_KEY, false);
+            this.unhighlightFeature(this.activeFeature);
             this.onPopupDisplayUpdate(this.activePopupDisplay, null);
             this.activePopupDisplay = null;
             this.activeFeature = null;