Repository: TelesCoop/iarbre
Pull request #218: feat(front) : adds switch day/night for vulnerability to heat #173
Author: login: QuentinMadura
Created: 2025-04-29T14:06:04Z | Merged: 2025-04-30T15:52:22Z

Preview : [feature-feat-173-day-night-v-carte.iarbre.fr](feature-feat-173-day-night-v-carte.iarbre.fr)



Diff:
diff --git a/docs/changelog.md b/docs/changelog.md
index e167394b..9177bec2 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,4 +1,12 @@
-# Journal de changements
+# Journal des changements
+
+## 🔖 0.5.0 (2025-04-23): Amélioration de la partie vulnérabilité à la chaleur
+
+### ✨feat : Ajout de la possibilité de visualiser les données diurnes/nocturnes pour le calque de vulnérabilité
+
+Ajout de la visualisation des données diurnes et nocturnes pour le calque de vulnérabilité à la chaleur. Ces
+informations sont accessibles dans la pop-up, avec un changement entre les modes disponible via le panel contextuel des
+outils.
 
 ## 🔖 0.5.0 (2025-xx-xx):
 
@@ -45,11 +53,15 @@ Suivant la configuration, le calque était chargé puis déchargé puis chargé
 Calcul de la plantabilité à l'aide de raster
 
 1. Convertir les données de Data pour tous les facteurs en raster haute résolution (1x1m)
-2. Convolution des rasters, individuellement, avec un noyau carré 5x5. Les pixels des rasters de résultat contiennent le pourcentage de chaque facteur sur des tuiles carrés 5x5m.
+2. Convolution des rasters, individuellement, avec un noyau carré 5x5. Les pixels des rasters de résultat contiennent le
+   pourcentage de chaque facteur sur des tuiles carrés 5x5m.
 3. Somme pondérée des rasters d'OCS, avec les poids relatifs aux facteurs, pour produire un raster de plantabilité
-4. On crée des geoms qui sont des carrés 5x5m qui vont être insérées dans une DB PostGIS. On utilise les valeurs des pixels dans le raster de plantabilité pour remplir le champ correspondant à la plantabilité et à la plantabilité seuillée.
+4. On crée des geoms qui sont des carrés 5x5m qui vont être insérées dans une DB PostGIS. On utilise les valeurs des
+   pixels dans le raster de plantabilité pour remplir le champ correspondant à la plantabilité et à la plantabilité
+   seuillée.
 
-En BDD nous n'avons que des géoms qui correspondent au score de plantabilité. Nous n'avons pas de géoms qui correspondent à l'occupation des sols par chaque facteur.
+En BDD nous n'avons que des géoms qui correspondent au score de plantabilité. Nous n'avons pas de géoms qui
+correspondent à l'occupation des sols par chaque facteur.
 
 Les couleurs ont aussi évolué pour une meilleure lisibilité.
 
@@ -67,7 +79,8 @@ Mise à jour de l'échelle de couleurs sur 9 niveaux. La pop-up est aussi mise 
 
 ### ✨ feat: Intégration de [Sveltia CMS](https://github.com/sveltia/sveltia-cms) pour modifier le site statique
 
-Le contenu du site statique [iarbre.fr](https://iarbre.fr/) peut désormais être modifié sans coder en se connectant avec ses identifiants Github à l'interface d'administration [iarbre.fr/admin](https://iarbre.fr/admin).
+Le contenu du site statique [iarbre.fr](https://iarbre.fr/) peut désormais être modifié sans coder en se connectant avec
+ses identifiants Github à l'interface d'administration [iarbre.fr/admin](https://iarbre.fr/admin).
 
 Cette interface permettra à l’avenir de modifier et de publier des articles de blog.
 
@@ -79,7 +92,9 @@ Cette interface permettra à l’avenir de modifier et de publier des articles d
 
 ### ✨ feat: Possibilité d'ouvrir la carte sur un calque spécifique
 
-Le nom du calque est désormais codé dans l'url, ce qui permet de partager une vue spécifique de la carte, voilà par ex. l'url centrée sur Lyon centre avec les données de vulnérabilité à la chaleur : [carte.iarbre.fr/vulnerability/16/45.75773/4.85377](https://carte.iarbre.fr/vulnerability/16/45.75773/4.85377)
+Le nom du calque est désormais codé dans l'url, ce qui permet de partager une vue spécifique de la carte, voilà par ex.
+l'url centrée sur Lyon centre avec les données de vulnérabilité à la
+chaleur : [carte.iarbre.fr/vulnerability/16/45.75773/4.85377](https://carte.iarbre.fr/vulnerability/16/45.75773/4.85377)
 
 &rarr; Ticket [#183](https://github.com/TelesCoop/iarbre/issues/183)
 
@@ -97,7 +112,10 @@ Le nom du calque est désormais codé dans l'url, ce qui permet de partager une
 
 ### ✨ feat: Calque vulnérabilité à la chaleur
 
-Nous avons commencé l'intégration des [travaux](https://geoweb.grandlyon.com/portal/apps/storymaps/collections/7e7862ec92694601a7085074dcaf7481?item=3) de Maurine Di Tommaso (Direction Environnement, Écologie, Énergie). Le travail est en cours pour la séparation jour/nuit et une lisibilité accrue des scores.
+Nous avons commencé l'intégration
+des [travaux](https://geoweb.grandlyon.com/portal/apps/storymaps/collections/7e7862ec92694601a7085074dcaf7481?item=3) de
+Maurine Di Tommaso (Direction Environnement, Écologie, Énergie). Le travail est en cours pour la séparation jour/nuit et
+une lisibilité accrue des scores.
 
 ![Capture d'écran pour le calque vulnérabilité à la chaleur](assets/images/changelog/v0.3.0/vulnerabilite_chaleur.png)
 
@@ -105,19 +123,25 @@ Nous avons commencé l'intégration des [travaux](https://geoweb.grandlyon.com/p
 
 ### ✨ feat: Possibilité d'ouvrir la carte à des coordonnées spécifiques
 
-Les coordonnées GPS sont désormais codées dans l'url, ce qui permet de partager une vue spécifique de la carte, voilà par ex. l'url centrée sur le Lac du Bourget : [carte.iarbre.fr/11/45.72454/5.88074](https://carte.iarbre.fr/11/45.72454/5.88074)
+Les coordonnées GPS sont désormais codées dans l'url, ce qui permet de partager une vue spécifique de la carte, voilà
+par ex. l'url centrée sur le Lac du
+Bourget : [carte.iarbre.fr/11/45.72454/5.88074](https://carte.iarbre.fr/11/45.72454/5.88074)
 
 &rarr; Commit [0103e77](https://github.com/TelesCoop/iarbre/commit/0103e7703c3934f8eeba012fe80b6f64fa2e319f)
 
 ### 👷 devops: Génération de données fictives de tests
 
-Nous sommes désormais en mesure de générer en quelques secondes des données pour tester l'application. Cela signifie en particulier que les tests qui vérifient que la carte est correctement affichée vont désormais être exécutés automatiquement.
+Nous sommes désormais en mesure de générer en quelques secondes des données pour tester l'application. Cela signifie en
+particulier que les tests qui vérifient que la carte est correctement affichée vont désormais être exécutés
+automatiquement.
 
 &rarr; Commit [7435604](https://github.com/TelesCoop/iarbre/commit/7435604852342895fbf08791261524c58e45b8f8)
 
 ### ⚡️ perf: Amélioration de la performance de la génération des tuiles
 
-La fonction de transformation des géométries entre les système Lambert-93 et Pseudo-Mercator a été accélérée en supposant que la transformation d'un polygone est équivalente au polygone formé de la projection de chacun de ces sommets.
+La fonction de transformation des géométries entre les système Lambert-93 et Pseudo-Mercator a été accélérée en
+supposant que la transformation d'un polygone est équivalente au polygone formé de la projection de chacun de ces
+sommets.
 
 &rarr; Commit [7435604](https://github.com/TelesCoop/iarbre/commit/7435604852342895fbf08791261524c58e45b8f8)
 
@@ -131,11 +155,13 @@ Nous utilisons Tailwind comme framework CSS sur le projet. Une refacto a été f
 
 ### 🐛 fix: MapPopUp
 
-Il n'existait qu'une PopUp pour le calque de plantabilité, il y en a maintenant une aussi pour les ZCLs. Correction aussi des bugs de fonctionnement.
+Il n'existait qu'une PopUp pour le calque de plantabilité, il y en a maintenant une aussi pour les ZCLs. Correction
+aussi des bugs de fonctionnement.
 
 ![Capture d'écran de la popup pour les Zones Climatiques Locales](assets/images/changelog/v0.2.0/lcz-popup.png)
 
-&rarr; Commits [8434d74](https://github.com/TelesCoop/iarbre/commit/8434d74d075c34e27da6d116aafdc152931d927f) et [b87264a](https://github.com/TelesCoop/iarbre/commit/b87264a624db2e5b6bdb9aac6794dafaf2be69dc)
+&rarr; Commits [8434d74](https://github.com/TelesCoop/iarbre/commit/8434d74d075c34e27da6d116aafdc152931d927f)
+et [b87264a](https://github.com/TelesCoop/iarbre/commit/b87264a624db2e5b6bdb9aac6794dafaf2be69dc)
 
 ### ✨ feat: Création du changelog
 
@@ -153,7 +179,10 @@ Ajout dans la navbar d'un bouton qui ouvre une fenêtre permettant d'envoyer des
 
 ### ✨ feat: Légende ZCL + sources des données
 
-Mise à jour de la légende des ZCLs et ajout d'un lien vers la source des données dans le `AttributionControl` de `MapLibre` : [ERASME](https://datagora.erasme.org/projets/calque-de-plantabilite/) pour le Calque de Plantabilité et le [CEREMA] (https://www.data.gouv.fr/en/datasets/cartographie-des-zones-climatiques-locales-lcz-de-83-aires-urbaines-de-plus-de-50-000-habitants-2022/)pour les Zones Climatiques Locales
+Mise à jour de la légende des ZCLs et ajout d'un lien vers la source des données dans le `AttributionControl` de
+`MapLibre` : [ERASME](https://datagora.erasme.org/projets/calque-de-plantabilite/) pour le Calque de Plantabilité et
+le [CEREMA] (https://www.data.gouv.fr/en/datasets/cartographie-des-zones-climatiques-locales-lcz-de-83-aires-urbaines-de-plus-de-50-000-habitants-2022/)
+pour les Zones Climatiques Locales
 
 ![Capture d'écran de la mention du CEREMA](assets/images/changelog/v0.2.0/mention-cerema.png)
 
@@ -173,7 +202,9 @@ Quand une PR est prête pour review, une instance est deployée par la CI pour v
 
 ### ✅ test: Meilleurs tests de génération des tuiles sur la grille
 
-On teste maintenant sur des villes fictives (et plus petites) que les tuiles couvrent bien toutes la surface et qu'elles ne se chevauchent pas. Ca été aussi à l'occasion de revoir la génération de grille pour réduire le nombre de tuiles inutiles créées.
+On teste maintenant sur des villes fictives (et plus petites) que les tuiles couvrent bien toutes la surface et qu'elles
+ne se chevauchent pas. Ca été aussi à l'occasion de revoir la génération de grille pour réduire le nombre de tuiles
+inutiles créées.
 
 &rarr; Commit [af7ac23](https://github.com/TelesCoop/iarbre/commit/af7ac23391666c34ebb5127712d217da1c3bd9f8)
 
@@ -181,13 +212,16 @@ On teste maintenant sur des villes fictives (et plus petites) que les tuiles cou
 
 ### ✨ feat: Calque de plantabilité
 
-Affiche le calque de plantabilité à la maille 20x20m avec des tuiles hexagonales et des données remises à jour. La [méthodologie](https://www.data.gouv.fr/fr/datasets/cartographie-des-zones-https://github.com/TelesCoop/iarbre/issues/178
-Affiche les Zones Climatique Locales, telle que calculées par le [CEREMA](https://www.data.gouv.fr/fr/datasets/cartographie-des-zones-climatiques-locales-lcz-de-83-aires-urbaines-de-plus-de-50-000-habitants-2022/).
+Affiche le calque de plantabilité à la maille 20x20m avec des tuiles hexagonales et des données remises à jour.
+La [méthodologie](https://www.data.gouv.fr/fr/datasets/cartographie-des-zones-https://github.com/TelesCoop/iarbre/issues/178
+Affiche les Zones Climatique Locales, telle que calculées par
+le [CEREMA](https://www.data.gouv.fr/fr/datasets/cartographie-des-zones-climatiques-locales-lcz-de-83-aires-urbaines-de-plus-de-50-000-habitants-2022/).
 Le changement entre les calques se fait à l'aide
 
 ### ✨ feat: Site vitrine
 
-Le [site](https://iarbre.fr) de présentation du projet est en ligne. Il est généré à partir des fichiers présents dans le dossier `static`.
+Le [site](https://iarbre.fr) de présentation du projet est en ligne. Il est généré à partir des fichiers présents dans
+le dossier `static`.
 
 ### 📝 doc: Création d'une documentation avec MkDocs
 
@@ -201,7 +235,9 @@ En cliquant sur le calque de plantabilité, un popup apparaît pour afficher le
 
 ### ✨ feat: CI et deploy
 
-Un CI sur GitHub déploie automatiquement la branche `dev` sur l'instance de [`preprod`](https://preprod-carte.iarbre.fr) et la branche `main` surl'instance de [`prod`](https://carte.iarbre.fr), après avoir fait tourner l'intégralité des tests (front et back).
+Un CI sur GitHub déploie automatiquement la branche `dev` sur l'instance de [`preprod`](https://preprod-carte.iarbre.fr)
+et la branche `main` surl'instance de [`prod`](https://carte.iarbre.fr), après avoir fait tourner l'intégralité des
+tests (front et back).
 Il existe aussi une instance [`feature`](https://feature-carte.iarbre.fr) pour tester une feature en ligne.
 
 &rarr; Commit [f78b230
diff --git a/front/components.d.ts b/front/components.d.ts
index 66f08897..69fe0dd0 100644
--- a/front/components.d.ts
+++ b/front/components.d.ts
@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Button: typeof import('primevue/button')['default']
+    Checkbox: typeof import('primevue/checkbox')['default']
     ClimateZoneScorePopupContent: typeof import('./src/components/map/popup/ClimateZoneScorePopupContent.vue')['default']
     ClimateZonesLegend: typeof import('./src/components/map/legend/ClimateZonesLegend.vue')['default']
     Divider: typeof import('primevue/divider')['default']
@@ -17,21 +18,27 @@ declare module 'vue' {
     InputText: typeof import('primevue/inputtext')['default']
     LayerSwitcher: typeof import('./src/components/map/layerSwitcher/LayerSwitcher.vue')['default']
     MapComponent: typeof import('./src/components/map/MapComponent.vue')['default']
+    MapContextTools: typeof import('./src/components/map/contextTools/MapContextTools.vue')['default']
     MapLayerSwitcher: typeof import('./src/components/map/layerSwitcher/MapLayerSwitcher.vue')['default']
     MapLegend: typeof import('./src/components/map/legend/MapLegend.vue')['default']
     MapScorePopup: typeof import('./src/components/map/popup/MapScorePopup.vue')['default']
-    Message: typeof import("primevue/message")["default"]
     NavbarComponent: typeof import('./src/components/navbar/NavbarComponent.vue')['default']
     PlantabilityLegend: typeof import('./src/components/map/legend/PlantabilityLegend.vue')['default']
     PlantabilityScorePopupContent: typeof import('./src/components/map/popup/PlantabilityScorePopupContent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScoreLabel: typeof import('./src/components/map/ScoreLabel.vue')['default']
+    Select: typeof import('primevue/select')['default']
+    SelectButton: typeof import('primevue/selectbutton')['default']
     Textarea: typeof import('primevue/textarea')['default']
     Toast: typeof import('primevue/toast')['default']
     ToggleButton: typeof import('primevue/togglebutton')['default']
+    VulnerabilityContextTool: typeof import('./src/components/map/contextTools/VulnerabilityContextTool.vue')['default']
     VulnerabilityLegend: typeof import('./src/components/map/legend/VulnerabilityLegend.vue')['default']
     VulnerabilityScorePopupContent: typeof import('./src/components/map/popup/VulnerabilityScorePopupContent.vue')['default']
     VulnerabilityScorePopupItem: typeof import('./src/components/map/popup/VulnerabilityScorePopupItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    Tooltip: typeof import('primevue/tooltip')['default']
+  }
 }
diff --git a/front/package-lock.json b/front/package-lock.json
index eb61f26f..4dfc3190 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -12,6 +12,7 @@
         "@tailwindcss/vite": "^4.0.17",
         "maplibre-gl": "^5.4.0",
         "pinia": "^3.0.0",
+        "primeicons": "^7.0.0",
         "primevue": "^4.3.3",
         "tailwindcss-primeui": "^0.6.1",
         "vue": "^3.4.29",
@@ -8038,6 +8039,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
     "node_modules/primevue": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.3.tgz",
diff --git a/front/package.json b/front/package.json
index 3ba7c7af..0f1f5bc6 100644
--- a/front/package.json
+++ b/front/package.json
@@ -21,6 +21,7 @@
     "@tailwindcss/vite": "^4.0.17",
     "maplibre-gl": "^5.4.0",
     "pinia": "^3.0.0",
+    "primeicons": "^7.0.0",
     "primevue": "^4.3.3",
     "tailwindcss-primeui": "^0.6.1",
     "vue": "^3.4.29",
diff --git a/front/src/components/map/MapComponent.vue b/front/src/components/map/MapComponent.vue
index e5a216f1..238d65c6 100644
--- a/front/src/components/map/MapComponent.vue
+++ b/front/src/components/map/MapComponent.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import { useMapStore } from "@/stores/map"
 import { onMounted, type PropType } from "vue"
-import MapLegend from "@/components/map/legend/MapLegend.vue"
-import MapScorePopup from "@/components/map/popup/MapScorePopup.vue"
-import MapLayerSwitcher from "@/components/map/layerSwitcher/MapLayerSwitcher.vue"
 import { type MapParams } from "@/types"
 
 const props = defineProps({
@@ -25,8 +22,7 @@ const emit = defineEmits<{
 const mapStore = useMapStore()
 
 onMounted(() => {
-  mapStore.initMap(props.mapId, model.value.dataType)
-
+  mapStore.initMap(props.mapId, model.value.dataType!)
   const mapInstance = mapStore.getMapInstance(props.mapId)
 
   mapInstance.jumpTo({
@@ -51,7 +47,10 @@ onMounted(() => {
 <template>
   <div :id="mapId" class="h-full w-full" data-cy="map-component"></div>
   <map-legend />
-  <map-layer-switcher />
+  <div class="absolute top-0 left-0 pl-[30px] pt-[30px] flex gap-2 flex-col z-1">
+    <map-layer-switcher />
+    <map-context-tools />
+  </div>
   <div :id="`popup-${mapId}`" :style="{ display: mapStore.popupData ? 'block' : 'none' }">
     <map-score-popup v-if="mapStore.popupData" :popup-data="mapStore.popupData" />
   </div>
diff --git a/front/src/components/map/contextTools/MapContextTools.vue b/front/src/components/map/contextTools/MapContextTools.vue
new file mode 100644
index 00000000..14d0e471
--- /dev/null
+++ b/front/src/components/map/contextTools/MapContextTools.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useMapStore } from "@/stores/map"
+import { DataType } from "@/utils/enum"
+import VulnerabilityContextTool from "@/components/map/contextTools/VulnerabilityContextTool.vue"
+import { computed } from "vue"
+
+const mapStore = useMapStore()
+const show = computed(() => {
+  return mapStore.selectedDataType === DataType.VULNERABILITY
+})
+</script>
+
+<template>
+  <div
+    v-if="show"
+    class="rounded-md bg-white p-4 border-primary-500 border-0.5 shadow-lg z-10 flex items-center gap-4"
+    data-cy="map-context-tools"
+  >
+    <vulnerability-context-tool />
+  </div>
+</template>
+
+<style>
+@reference "@/styles/main.css";
+.context-menu-tools {
+  @apply flex flex-col gap-2 w-full;
+}
+
+.context-menu-tool {
+  @apply flex items-center gap-2;
+}
+
+.context-menu-title {
+  @apply text-primary-500 font-accent text-sm font-semibold;
+}
+</style>
diff --git a/front/src/components/map/contextTools/VulnerabilityContextTool.vue b/front/src/components/map/contextTools/VulnerabilityContextTool.vue
new file mode 100644
index 00000000..69eeaf59
--- /dev/null
+++ b/front/src/components/map/contextTools/VulnerabilityContextTool.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useMapStore } from "@/stores/map"
+import { VulnerabilityMode } from "@/utils/vulnerability"
+import { computed } from "vue"
+import { DataType } from "@/utils/enum"
+
+const mapStore = useMapStore()
+
+const isDay = computed(() => {
+  return mapStore.vulnerabilityMode === VulnerabilityMode.DAY
+})
+
+const toggleMode = (value: boolean) => {
+  mapStore.vulnerabilityMode = value ? VulnerabilityMode.DAY : VulnerabilityMode.NIGHT
+  mapStore.changeDataType(DataType.VULNERABILITY)
+}
+</script>
+<template>
+  <div class="context-menu-tools">
+    <div class="context-menu-tool">
+      <span class="context-menu-title">Vulnérabilité : </span>
+      <ToggleButton
+        :model-value="isDay"
+        off-icon="pi pi-sun"
+        off-label="Diurne"
+        on-icon="pi pi-moon"
+        on-label="Nocturne"
+        @update:model-value="toggleMode"
+      />
+    </div>
+  </div>
+</template>
diff --git a/front/src/components/map/layerSwitcher/LayerSwitcher.vue b/front/src/components/map/layerSwitcher/LayerSwitcher.vue
index 520bf61c..2d72c413 100644
--- a/front/src/components/map/layerSwitcher/LayerSwitcher.vue
+++ b/front/src/components/map/layerSwitcher/LayerSwitcher.vue
@@ -2,7 +2,6 @@
 import { useMapStore } from "@/stores/map"
 import { DataType, DataTypeToLabel } from "@/utils/enum"
 import { computed } from "vue"
-import Select from "primevue/select"
 
 const mapStore = useMapStore()
 
diff --git a/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue b/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
index ccd8b827..d29b2de3 100644
--- a/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
+++ b/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
@@ -1,10 +1,8 @@
-<script lang="ts" setup>
-import LayerSwitcher from "@/components/map/layerSwitcher/LayerSwitcher.vue"
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div
-    class="absolute top-5 left-[30px] rounded-md w-[24.75rem] bg-white p-4 border-primary-500 border-0.5 shadow-lg z-10 flex items-center gap-4"
+    class="bg-white rounded-md p-4 border-primary-500 border-0.5 shadow-lg z-10 flex items-center gap-4 w-[24.75rem]"
     data-cy="map-layer-switcher"
   >
     <layer-switcher />
diff --git a/front/src/components/map/legend/MapLegend.vue b/front/src/components/map/legend/MapLegend.vue
index 55fb34c9..b0df5aa6 100644
--- a/front/src/components/map/legend/MapLegend.vue
+++ b/front/src/components/map/legend/MapLegend.vue
@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import PlantabilityLegend from "@/components/map/legend/PlantabilityLegend.vue"
-import ClimateZonesLegend from "@/components/map/legend/ClimateZonesLegend.vue"
-import VulnerabilityLegend from "@/components/map/legend/VulnerabilityLegend.vue"
 import { useMapStore } from "@/stores/map"
 import { DataType, DataTypeToLabel } from "@/utils/enum"
 
@@ -24,8 +21,9 @@ const mapStore = useMapStore()
 .map-legend {
   @apply bg-white;
   @apply p-3;
+  @apply lg:mt-[30px] lg:mr-[30px];
   @apply absolute z-3;
-  @apply max-lg:bottom-[48px] max-lg:left-[30px] lg:top-4 lg:right-4;
+  @apply max-lg:bottom-[24px] max-lg:left-[30px] lg:top-0 lg:right-0;
   @apply flex flex-col items-center;
   @apply rounded-md border-primary-500 border-0.5;
   @apply shadow-lg;
diff --git a/front/src/components/map/legend/PlantabilityLegend.vue b/front/src/components/map/legend/PlantabilityLegend.vue
index 1ca0cd86..cbcd684b 100644
--- a/front/src/components/map/legend/PlantabilityLegend.vue
+++ b/front/src/components/map/legend/PlantabilityLegend.vue
@@ -1,15 +1,12 @@
-<script lang="ts" setup>
-import ScoreLabel from "../ScoreLabel.vue"
-import { ScoreLabelSize } from "@/utils/enum"
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div
     class="font-accent flex items-center justify-center text-xs leading-3 gap-2 text-primary-900"
     data-cy="plantability-legend"
   >
-    <span class="text-[0.9rem] leading-3">Non plantable</span>
-    <div class="flex gap-2">
+    <span class="text-sm leading-3">Non plantable</span>
+    <div class="flex p-2">
       <score-label
         v-for="index in [0, 2, 4, 6, 8, 10]"
         :key="index"
@@ -18,6 +15,6 @@ import { ScoreLabelSize } from "@/utils/enum"
         class="flex items-center justify-center"
       />
     </div>
-    <span class="text-[0.9rem] leading-3">Plantable</span>
+    <span class="text-sm leading-3">Plantable</span>
   </div>
 </template>
diff --git a/front/src/components/map/legend/VulnerabilityLegend.vue b/front/src/components/map/legend/VulnerabilityLegend.vue
index 528adca4..a0e41879 100644
--- a/front/src/components/map/legend/VulnerabilityLegend.vue
+++ b/front/src/components/map/legend/VulnerabilityLegend.vue
@@ -7,10 +7,16 @@ import { VulnerabilityLegend } from "@/utils/vulnerability"
     class="font-accent flex flex-col items-center justify-center text-xs leading-3 gap-2"
     data-cy="vulnerability-zones-legend"
   >
-    <div class="flex p-2 flex-wrap justify-center gap-2">
-      <div v-for="(color, name) in VulnerabilityLegend" :key="name" class="flex items-center gap-1">
+    <div class="flex p-2 flex-wrap justify-center gap-2 items-center">
+      <span class="leading-3 text-sm"> Faible </span>
+      <div
+        v-for="(color, name) in VulnerabilityLegend"
+        :key="name"
+        class="flex flex-col items-center gap-1"
+      >
         <div :style="{ backgroundColor: color }" class="w-4 h-8 rounded"></div>
       </div>
+      <span class="leading-3 text-sm"> Fort </span>
     </div>
   </div>
 </template>
diff --git a/front/src/components/map/popup/VulnerabilityScorePopupContent.vue b/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
index 2bab4edd..1d6b7fbf 100644
--- a/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
+++ b/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { MapScorePopupData } from "@/types"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 import {
   getVulnerabilityColor,
   getVulnerabilityDesc,
@@ -9,7 +9,7 @@ import {
   vulnerabilityScore,
   VulnerabilityType
 } from "@/utils/vulnerability"
-import VulnerabilityScorePopupItem from "@/components/map/popup/VulnerabilityScorePopupItem.vue"
+import { useMapStore } from "@/stores/map"
 
 const props = defineProps({
   popupData: {
@@ -17,17 +17,16 @@ const props = defineProps({
     type: Object as () => MapScorePopupData
   }
 })
-
-const vulnerabilityMode = ref(VulnerabilityMode.DAY)
-const score = computed(() => props.popupData.properties[`indice_${vulnerabilityMode.value}`])
+const mapStore = useMapStore()
+const score = computed(() => props.popupData.properties[`indice_${mapStore.vulnerabilityMode}`])
 const expositionScore = computed(
-  () => props.popupData.properties[`expo_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`expo_index_${mapStore.vulnerabilityMode}`]
 )
 const difficultyScore = computed(
-  () => props.popupData.properties[`capaf_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`capaf_index_${mapStore.vulnerabilityMode}`]
 )
 const sensibilityScore = computed(
-  () => props.popupData.properties[`sensibilty_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`sensibilty_index_${mapStore.vulnerabilityMode}`]
 )
 </script>
 <template>
@@ -41,7 +40,7 @@ const sensibilityScore = computed(
       </div>
       <span class="font-accent text-base" data-cy="vulnerability-score-popup-title"
         >Vulnérabilité {{ getVulnerabilityDesc(score) }} aux fortes chaleurs
-        {{ vulnerabilityMode === VulnerabilityMode.DAY ? "en journée" : "la nuit" }}
+        {{ mapStore.vulnerabilityMode === VulnerabilityMode.DAY ? "en journée" : "la nuit" }}
       </span>
     </div>
     <div class="w-full text-sm">
diff --git a/front/src/layouts/DefaultLayout.vue b/front/src/layouts/DefaultLayout.vue
index 1b32ccba..6c94bf23 100644
--- a/front/src/layouts/DefaultLayout.vue
+++ b/front/src/layouts/DefaultLayout.vue
@@ -16,6 +16,7 @@ import Navbar from "@/components/navbar/NavbarComponent.vue"
 <style scoped>
 .navbar {
   @apply flex items-center justify-between;
+  @apply z-1;
   height: calc(var(--header-height));
   padding: 30px 15px 30px 30px;
 }
diff --git a/front/src/main.ts b/front/src/main.ts
index a530ba72..65e4a54e 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -21,5 +21,4 @@ app.use(PrimeVue, {
   }
 })
 app.use(ToastService)
-
 app.mount("#app")
diff --git a/front/src/stores/map.ts b/front/src/stores/map.ts
index 8fed5991..93018b92 100644
--- a/front/src/stores/map.ts
+++ b/front/src/stores/map.ts
@@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
+  const FILL_COLOR_MAP = computed(() => {
+    return {
+      [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
+      [DataType.VULNERABILITY]: [
+        "match",
+        ["get", `indice_${vulnerabilityMode.value}`],
+        ...VULNERABILITY_COLOR_MAP
+      ],
+      [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
+    }
+  })
 
   const getAttributionSource = () => {
     const sourceCode =
@@ -84,7 +93,6 @@ export const useMapStore = defineStore("map", () => {
   ) => {
     const feature = extractFeatures(features, datatype, geolevel)
     if (!feature) return undefined
-
     return propertyName ? feature.properties[propertyName] : feature.properties
   }
 
@@ -101,11 +109,8 @@ export const useMapStore = defineStore("map", () => {
   }
 
   const setupTile = (map: Map, datatype: DataType, geolevel: GeoLevel) => {
-    if (datatype === null) return
-
     const sourceId = getSourceId(datatype, geolevel)
     const layerId = getLayerId(datatype, geolevel)
-
     map.addLayer({
       id: layerId,
       type: "fill",
@@ -114,7 +119,7 @@ export const useMapStore = defineStore("map", () => {
       "source-layer": `${geolevel}--${datatype}`,
       layout: {},
       paint: {
-        "fill-color": FILL_COLOR_MAP[datatype] as any,
+        "fill-color": FILL_COLOR_MAP.value[datatype] as any,
         "fill-outline-color": "#00000000",
         "fill-opacity": 0.6
       }
@@ -178,7 +183,6 @@ export const useMapStore = defineStore("map", () => {
   }
 
   const changeDataType = (datatype: DataType) => {
-    if (selectedDataType.value == datatype) return
     removeActivePopup()
 
     const previousDataType = selectedDataType.value!
@@ -222,7 +226,7 @@ export const useMapStore = defineStore("map", () => {
     popupDomElement.value = document.getElementById(`popup-${mapId}`)
   }
 
-  const initMap = (mapId: string, initialDatatype: DataType | null) => {
+  const initMap = (mapId: string, initialDatatype: DataType) => {
     selectedDataType.value = initialDatatype
     mapInstancesByIds.value[mapId] = new Map({
       container: mapId, // container id
@@ -246,6 +250,7 @@ export const useMapStore = defineStore("map", () => {
     popupData,
     selectedDataType,
     changeDataType,
-    getMapInstance
+    getMapInstance,
+    vulnerabilityMode
   }
 })
diff --git a/front/src/styles/main.css b/front/src/styles/main.css
index 4567b9bc..6deeeb81 100644
--- a/front/src/styles/main.css
+++ b/front/src/styles/main.css
@@ -3,6 +3,7 @@
 @import "maplibre-gl/dist/maplibre-gl.css";
 @import "@/styles/maplibre.css";
 @import "@/styles/utility.css";
+@import "primeicons/primeicons.css";
 
 @font-face {
   font-family: "IBM Plex Mono";
diff --git a/front/src/styles/maplibre.css b/front/src/styles/maplibre.css
index 21620405..cc800bb5 100644
--- a/front/src/styles/maplibre.css
+++ b/front/src/styles/maplibre.css
@@ -1,3 +1,7 @@
+.maplibregl-popup {
+  @apply z-50;
+}
+
 .maplibregl-popup-content {
   border-radius: 10px;
   padding: 10px;
diff --git a/front/src/theme/iArbre.ts b/front/src/theme/iArbre.ts
index 4571b2e4..f275d962 100644
--- a/front/src/theme/iArbre.ts
+++ b/front/src/theme/iArbre.ts
@@ -119,6 +119,32 @@ export const IArbrePreset = definePreset(Aura, {
           }
         }
       }
+    },
+    togglebutton: {
+      padding: defaultPadding,
+      border: defaultBorder,
+      color: "{primary.500}",
+      colorScheme: {
+        light: {
+          // @ts-ignore
+          background: "white",
+          color: "{primary.500}",
+          hoverColor: "white",
+          hoverBackground: "{primary.500}",
+          icon: {
+            color: "{primary.500}",
+            hoverColor: "white",
+            checkedColor: "white"
+          },
+          checked: {
+            color: "white",
+            background: "{primary.500}"
+          },
+          content: {
+            checkedBackground: "{primary.500}"
+          }
+        }
+      }
     }
   }
 })
diff --git a/front/src/utils/enum.ts b/front/src/utils/enum.ts
index ed5f25e8..f873a06f 100644
--- a/front/src/utils/enum.ts
+++ b/front/src/utils/enum.ts
@@ -9,10 +9,6 @@ export enum DataType {
   VULNERABILITY = "vulnerability"
 }
 
-export enum ScoreLabelSize {
-  SMALL = "small"
-}
-
 export const DataTypeToLabel: Record<DataType, string> = {
   [DataType.PLANTABILITY]: "Score de plantabilité",
   [DataType.LOCAL_CLIMATE_ZONES]: "Zones climatiques locales",
diff --git a/front/src/utils/vulnerability.ts b/front/src/utils/vulnerability.ts
index adcd6778..3f993117 100644
--- a/front/src/utils/vulnerability.ts
+++ b/front/src/utils/vulnerability.ts
@@ -4,7 +4,7 @@ export enum VulnerabilityLegendName {
   LOW3 = "faible à moyenne",
   MEDIUM1 = "moyenne",
   MEDIUM2 = "moyenne à élevée",
-  MEDIUM3 = "elevée",
+  MEDIUM3 = "élevée",
   HIGH1 = "très élevée",
   HIGH2 = "critique",
   HIGH3 = "extrêmement critique"


Reviews:
user: login: ludovicdmt
body: Il manque #208 pour que la couleur des tuiles change aussi avec le toogle mais ce qui est fait jusque là me convient.
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-29T15:21:47Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T07:00:28Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T07:00:40Z
user: login: ludovicdmt
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-30T07:02:45Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T07:04:11Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T07:20:03Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T13:47:56Z
user: login: ludovicdmt
body: Après test visuel je trouve ça niquel et merci pour le changelog ! 

Ca peut être dans une PR suivante et je ferais le ticket pour avoir un test e2e du changement avec le ContextSwitch
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-30T14:00:04Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T14:03:41Z
user: login: QuentinMadura
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T14:04:50Z
user: login: Marc-AntoineA
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T15:11:30Z

Review comments:
diff_hunk: @@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useMapStore } from "@/stores/map"
+import { VulnerabilityMode } from "@/utils/vulnerability"
+import { computed } from "vue"
+
+const mapStore = useMapStore()
+
+const isDay = computed(() => {
+  return mapStore.vulnerabilityMode === VulnerabilityMode.DAY
+})
+
+const toggleMode = (value: boolean) => {
+  mapStore.vulnerabilityMode = value ? VulnerabilityMode.DAY : VulnerabilityMode.NIGHT
+}
+</script>
+<template>
+  <div>
+    <div class="context-menu-tool">
+      <span class="context-menu-title">Activer données : </span>
path: front/src/components/map/contextTools/VulnerabilityContextTool.vue
user: login: ludovicdmt
body: C'est un détail et ce n'est pas dans les maquettes, ni le ticket mais j'aurais plus mis "Vulnérabilité : diurne/nocturne" en gardant le picto.
C'est pour coller à la source des données : https://geoweb.grandlyon.com/portal/apps/storymaps/collections/7e7862ec92694601a7085074dcaf7481?item=3

Comme tu le sens
created_at: 2025-04-29T15:12:01Z
author_association: MEMBER
diff_hunk: @@ -7,10 +7,16 @@ import { VulnerabilityLegend } from "@/utils/vulnerability"
     class="font-accent flex flex-col items-center justify-center text-xs leading-3 gap-2"
     data-cy="vulnerability-zones-legend"
   >
-    <div class="flex p-2 flex-wrap justify-center gap-2">
-      <div v-for="(color, name) in VulnerabilityLegend" :key="name" class="flex items-center gap-1">
+    <div class="flex p-2 flex-wrap justify-center gap-2 items-center">
+      <span> Faible </span>
+      <div
+        v-for="(color, name) in VulnerabilityLegend"
+        :key="name"
+        class="flex flex-col items-center gap-1"
+      >
         <div :style="{ backgroundColor: color }" class="w-4 h-8 rounded"></div>
       </div>
+      <span> Fort </span>
path: front/src/components/map/legend/VulnerabilityLegend.vue
user: login: ludovicdmt
body: Geoffrey avait 2 proposition sans trancher. 
Plus favorable à enlever le texte, c'est pour moi intuitif que c'est gradué de gauche à droite.

Je te laisse décider, tu as un avis plus pertinent que moi là dessus
created_at: 2025-04-29T15:16:22Z
author_association: MEMBER
diff_hunk: @@ -10,37 +10,38 @@ import {
   VulnerabilityType
 } from "@/utils/vulnerability"
 import VulnerabilityScorePopupItem from "@/components/map/popup/VulnerabilityScorePopupItem.vue"
+import { useMapStore } from "@/stores/map"
 
 const props = defineProps({
   popupData: {
     required: true,
     type: Object as () => MapScorePopupData
   }
 })
-const vulnerabilityMode = ref(VulnerabilityMode.DAY)
-const score = computed(() => props.popupData.properties[`indice_${vulnerabilityMode.value}`])
+const mapStore = useMapStore()
+const score = computed(() => props.popupData.properties[`indice_${mapStore.vulnerabilityMode}`])
 const expositionScore = computed(
-  () => props.popupData.properties[`expo_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`expo_index_${mapStore.vulnerabilityMode}`]
 )
 const difficultyScore = computed(
-  () => props.popupData.properties[`capaf_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`capaf_index_${mapStore.vulnerabilityMode}`]
 )
 const sensibilityScore = computed(
-  () => props.popupData.properties[`sensibilty_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`sensibilty_index_${mapStore.vulnerabilityMode}`]
 )
 </script>
 <template>
   <div data-cy="lcz-score-popup">
     <div class="flex items-center gap-2 w-11/12 mb-2">
       <div
         :style="{ backgroundColor: getVulnerabilityColor(score) }"
-        class="w-28 h-12 p-2 text-xl rounded flex items-center justify-center text-white"
+        class="w-32 h-12 p-2 text-xl rounded flex items-center justify-center text-white"
path: front/src/components/map/popup/VulnerabilityScorePopupContent.vue
user: login: ludovicdmt
body: Pourquoi ça change ici ? C'est pas dans l'autre PR de maquette ?
created_at: 2025-04-29T15:17:24Z
author_association: MEMBER
diff_hunk: @@ -1,3 +1,7 @@
+.maplibregl-popup {
+  @apply z-50;
path: front/src/styles/maplibre.css
user: login: ludovicdmt
body: Pourquoi tu changes dans cette PR la position du popup?
created_at: 2025-04-29T15:19:11Z
author_association: MEMBER
diff_hunk: @@ -10,37 +10,38 @@ import {
   VulnerabilityType
 } from "@/utils/vulnerability"
 import VulnerabilityScorePopupItem from "@/components/map/popup/VulnerabilityScorePopupItem.vue"
+import { useMapStore } from "@/stores/map"
 
 const props = defineProps({
   popupData: {
     required: true,
     type: Object as () => MapScorePopupData
   }
 })
-const vulnerabilityMode = ref(VulnerabilityMode.DAY)
-const score = computed(() => props.popupData.properties[`indice_${vulnerabilityMode.value}`])
+const mapStore = useMapStore()
+const score = computed(() => props.popupData.properties[`indice_${mapStore.vulnerabilityMode}`])
 const expositionScore = computed(
-  () => props.popupData.properties[`expo_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`expo_index_${mapStore.vulnerabilityMode}`]
 )
 const difficultyScore = computed(
-  () => props.popupData.properties[`capaf_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`capaf_index_${mapStore.vulnerabilityMode}`]
 )
 const sensibilityScore = computed(
-  () => props.popupData.properties[`sensibilty_index_${vulnerabilityMode.value}`]
+  () => props.popupData.properties[`sensibilty_index_${mapStore.vulnerabilityMode}`]
 )
 </script>
 <template>
   <div data-cy="lcz-score-popup">
     <div class="flex items-center gap-2 w-11/12 mb-2">
       <div
         :style="{ backgroundColor: getVulnerabilityColor(score) }"
-        class="w-28 h-12 p-2 text-xl rounded flex items-center justify-center text-white"
+        class="w-32 h-12 p-2 text-xl rounded flex items-center justify-center text-white"
path: front/src/components/map/popup/VulnerabilityScorePopupContent.vue
user: login: QuentinMadura
body: Petite digression 😅 
created_at: 2025-04-30T07:00:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,3 +1,7 @@
+.maplibregl-popup {
+  @apply z-50;
path: front/src/styles/maplibre.css
user: login: QuentinMadura
body: Idem petite digression 😅 
created_at: 2025-04-30T07:00:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,3 +1,7 @@
+.maplibregl-popup {
+  @apply z-50;
path: front/src/styles/maplibre.css
user: login: ludovicdmt
body: Ah ok très bien !

created_at: 2025-04-30T07:02:45Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useMapStore } from "@/stores/map"
+import { VulnerabilityMode } from "@/utils/vulnerability"
+import { computed } from "vue"
+
+const mapStore = useMapStore()
+
+const isDay = computed(() => {
+  return mapStore.vulnerabilityMode === VulnerabilityMode.DAY
+})
+
+const toggleMode = (value: boolean) => {
+  mapStore.vulnerabilityMode = value ? VulnerabilityMode.DAY : VulnerabilityMode.NIGHT
+}
+</script>
+<template>
+  <div>
+    <div class="context-menu-tool">
+      <span class="context-menu-title">Activer données : </span>
path: front/src/components/map/contextTools/VulnerabilityContextTool.vue
user: login: QuentinMadura
body: Je cherchais un label approprié. Corrigé, merci @ludovicdmt 
created_at: 2025-04-30T07:04:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -7,10 +7,16 @@ import { VulnerabilityLegend } from "@/utils/vulnerability"
     class="font-accent flex flex-col items-center justify-center text-xs leading-3 gap-2"
     data-cy="vulnerability-zones-legend"
   >
-    <div class="flex p-2 flex-wrap justify-center gap-2">
-      <div v-for="(color, name) in VulnerabilityLegend" :key="name" class="flex items-center gap-1">
+    <div class="flex p-2 flex-wrap justify-center gap-2 items-center">
+      <span> Faible </span>
+      <div
+        v-for="(color, name) in VulnerabilityLegend"
+        :key="name"
+        class="flex flex-col items-center gap-1"
+      >
         <div :style="{ backgroundColor: color }" class="w-4 h-8 rounded"></div>
       </div>
+      <span> Fort </span>
path: front/src/components/map/legend/VulnerabilityLegend.vue
user: login: QuentinMadura
body: Mon regard c'est que je préfère que l'information soit la plus facilement compréhensible possible ! 
created_at: 2025-04-30T07:20:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
+  const FILL_COLOR_MAP = computed(() => {
+    return {
+      [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
+      [DataType.VULNERABILITY]: [
+        "match",
+        ["get", `indice_${vulnerabilityMode.value}`],
path: front/src/stores/map.ts
user: login: QuentinMadura
body: J'ai besoin d'une computed pour avoir de la réactivité au niveau de `indice_${vulnerabilityMode.value}`
created_at: 2025-04-30T13:47:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
path: front/src/stores/map.ts
user: login: ludovicdmt
body: Détail et on s'enfout un peu mais pour le coup c'est plus `floor` que `round` la ref non ? Et c'est dans MapLibre et pas MabBox ?
created_at: 2025-04-30T13:57:58Z
author_association: MEMBER
diff_hunk: @@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
path: front/src/stores/map.ts
user: login: QuentinMadura
body: Pour être honnête, je sais pas 😅 . Faut demander à @Marc-AntoineA 
created_at: 2025-04-30T14:03:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
path: front/src/stores/map.ts
user: login: QuentinMadura
body: Je suis d'accord pour le test e2e. Je pense que j'aurai pas le temps de le faire avant de partir en vacances ce soir.
created_at: 2025-04-30T14:04:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,27 +1,36 @@
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
 import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
+import { VulnerabilityMode as VulnerabilityModeType } from "@/utils/vulnerability"
 import { VULNERABILITY_COLOR_MAP } from "@/utils/vulnerability"
 import { PLANTABILITY_COLOR_MAP } from "@/utils/plantability"
 import { CLIMATE_ZONE_MAP_COLOR_MAP } from "@/utils/climateZones"
 
-// reference https://docs.mapbox.com/style-spec/reference/expressions/#round
-const FILL_COLOR_MAP = {
-  [DataType.PLANTABILITY]: ["match", ["floor", ["get", "indice"]], ...PLANTABILITY_COLOR_MAP],
-  [DataType.VULNERABILITY]: ["match", ["get", "indice_day"], ...VULNERABILITY_COLOR_MAP],
-  [DataType.LOCAL_CLIMATE_ZONES]: ["match", ["get", "indice"], ...CLIMATE_ZONE_MAP_COLOR_MAP]
-}
 export const useMapStore = defineStore("map", () => {
   const mapInstancesByIds = ref<Record<string, Map>>({})
   const popupData = ref<MapScorePopupData | undefined>(undefined)
   const popupDomElement = ref<HTMLElement | null>(null)
   const activePopup = ref<Popup | null>(null)
-
-  const selectedDataType = ref<DataType | null>(null)
+  const selectedDataType = ref<DataType>(DataType.PLANTABILITY)
+  const vulnerabilityMode = ref<VulnerabilityModeType>(VulnerabilityModeType.DAY)
+  const currentGeoLevel = ref<GeoLevel>(GeoLevel.TILE)
+
+  // reference https://docs.mapbox.com/style-spec/reference/expressions/#round
path: front/src/stores/map.ts
user: login: Marc-AntoineA
body: J'ai mis le lien de la référence pour la globalité des "expressions mapbox", et je devais avoir `#round` d'ouvert sur mon ordi…

Il faudrait simplement retirer `#round`.

Et non, la référence est bien Mapbox (maplibre a repris le même formalisme). On n'en trouve pas trace dans la doc de maplibre :point_right: C'est bien pour ça qu'il y a le lien, j'ai galéré à trouver ^^

created_at: 2025-04-30T15:11:30Z
author_association: CONTRIBUTOR

PR comments:
user: login: QuentinMadura
created_at: 2025-04-29T14:08:03Z
body: closes #173 
author_association: CONTRIBUTOR
user: login: QuentinMadura
created_at: 2025-04-29T14:20:34Z
body: Besoin de https://github.com/TelesCoop/iarbre/pull/208 pour tester 
author_association: CONTRIBUTOR
user: login: ludovicdmt
created_at: 2025-04-29T15:04:42Z
body: https://feature-feat-173-day-night-v-carte.iarbre.fr
author_association: MEMBER
user: login: ludovicdmt
created_at: 2025-04-30T06:54:33Z
body: Un petit ajout au changelog pourrait être sympa aussi :) 
author_association: MEMBER