add hover effect on all maps

benoitdemaegdt · Dec 15, 2023 · e41d89a · e41d89a
1 parent 84a91b4
commit e41d89a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 58 deletions.
diff --git a/components/content/Overview.vue b/components/content/Overview.vue
@@ -64,7 +64,11 @@ const { data: geojson } = await useAsyncData(`geojson-${path}`, () => {
     .findOne();
 });
 
-const features = geojson.value.features;
+const features = geojson.value.features.map((feature, index) => ({
+  id: index,
+  ...feature
+}));
+
 const doneFeatures = features.filter(feature => feature.properties.status === 'done');
 const doneDistance = getDistance({ features: doneFeatures });
 const avancement = Math.round(doneDistance / voie.distance * 100);

diff --git a/composables/useMap.ts b/composables/useMap.ts
@@ -117,25 +117,7 @@ export const useMap = () => {
       }
     });
 
-    let hoveredLineId = null;
-    map.on('mousemove', 'done-sections', e => {
-      map.getCanvas().style.cursor = 'pointer';
-
-      if (e.features.length > 0) {
-        if (hoveredLineId !== null) {
-          map.setFeatureState({ source: 'done-sections', id: hoveredLineId }, { hover: false });
-        }
-        hoveredLineId = e.features[0].id;
-        map.setFeatureState({ source: 'done-sections', id: hoveredLineId }, { hover: true });
-      }
-    });
-    map.on('mouseleave', 'done-sections', () => {
-      map.getCanvas().style.cursor = '';
-      if (hoveredLineId !== null) {
-        map.setFeatureState({ source: 'done-sections', id: hoveredLineId }, { hover: false });
-      }
-      hoveredLineId = null;
-    });
+    applyHoverEffect({ map, layer: 'done-sections' });
   }
 
   function plotWipSections({ map, features }: { map: any; features: LineStringFeature[] }) {
@@ -197,25 +179,7 @@ export const useMap = () => {
     }
     animateDashArray(0);
 
-    let hoveredLineId = null;
-    map.on('mousemove', 'wip-sections', e => {
-      map.getCanvas().style.cursor = 'pointer';
-
-      if (e.features.length > 0) {
-        if (hoveredLineId !== null) {
-          map.setFeatureState({ source: 'wip-sections', id: hoveredLineId }, { hover: false });
-        }
-        hoveredLineId = e.features[0].id;
-        map.setFeatureState({ source: 'wip-sections', id: hoveredLineId }, { hover: true });
-      }
-    });
-    map.on('mouseleave', 'wip-sections', () => {
-      map.getCanvas().style.cursor = '';
-      if (hoveredLineId !== null) {
-        map.setFeatureState({ source: 'wip-sections', id: hoveredLineId }, { hover: false });
-      }
-      hoveredLineId = null;
-    });
+    applyHoverEffect({ map, layer: 'wip-sections' });
   }
 
   function plotPlannedSections({ map, features }: { map: any; features: LineStringFeature[] }) {
@@ -251,25 +215,8 @@ export const useMap = () => {
         'line-dasharray': [2, 2]
       }
     });
-    let hoveredLineId = null;
-    map.on('mousemove', 'planned-sections', e => {
-      map.getCanvas().style.cursor = 'pointer';
 
-      if (e.features.length > 0) {
-        if (hoveredLineId !== null) {
-          map.setFeatureState({ source: 'planned-sections', id: hoveredLineId }, { hover: false });
-        }
-        hoveredLineId = e.features[0].id;
-        map.setFeatureState({ source: 'planned-sections', id: hoveredLineId }, { hover: true });
-      }
-    });
-    map.on('mouseleave', 'planned-sections', () => {
-      map.getCanvas().style.cursor = '';
-      if (hoveredLineId !== null) {
-        map.setFeatureState({ source: 'planned-sections', id: hoveredLineId }, { hover: false });
-      }
-      hoveredLineId = null;
-    });
+    applyHoverEffect({ map, layer: 'planned-sections' });
   }
 
   function plotVarianteSections({ map, features }: { map: any; features: LineStringFeature[] }) {
@@ -649,6 +596,32 @@ export const useMap = () => {
     }
   }
 
+  function applyHoverEffect({ map, layer }) {
+    let hoveredLineId = null;
+    map.on('mousemove', layer, e => {
+      map.getCanvas().style.cursor = 'pointer';
+
+      if (e.features.length > 0) {
+        if (hoveredLineId !== null) {
+          map.setFeatureState({ source: layer, id: hoveredLineId }, { hover: false });
+        }
+        if (e.features[0].id !== undefined) {
+          hoveredLineId = e.features[0].id;
+          if (hoveredLineId !== null) {
+            map.setFeatureState({ source: layer, id: hoveredLineId }, { hover: true });
+          }
+        }
+      }
+    });
+    map.on('mouseleave', layer, () => {
+      map.getCanvas().style.cursor = '';
+      if (hoveredLineId !== null) {
+        map.setFeatureState({ source: layer, id: hoveredLineId }, { hover: false });
+      }
+      hoveredLineId = null;
+    });
+  }
+
   return {
     plotDoneSections,
     plotWipSections,

diff --git a/pages/carte-interactive/index.vue b/pages/carte-interactive/index.vue
@@ -15,7 +15,10 @@ const { data: voies } = await useAsyncData(() => {
   return queryContent('voies-lyonnaises').where({ _type: 'json' }).find();
 });
 
-const features = voies.value.map(voie => voie.features).flat();
+const features = voies.value.map(voie => voie.features).flat().map((feature, index) => ({
+  id: index,
+  ...feature
+}));
 
 const description = 'Découvrez la carte interactive des Voies Lyonnaises. Itinéraires rue par rue. Plan régulièrement mis à jour pour une information complète.';
 const COVER_IMAGE_URL = 'https://cyclopolis.lavilleavelo.org/cyclopolis.png';