From 86977bd37eb366412a1b10da97d638fbebf7c737 Mon Sep 17 00:00:00 2001
From: Colin Maudry <colin@maudry.com>
Date: Fri, 3 Jul 2026 22:17:54 +0200
Subject: [PATCH] =?UTF-8?q?fix(figures):=20rendre=20le=20point=20de=20l'or?=
 =?UTF-8?q?ganisme=20en=20ic=C3=B4ne=20plut=C3=B4t=20qu'en=20circleMarker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

bringToFront() sur un circleMarker SVG (overlayPane) ne pouvait pas passer
devant les bulles de cluster (markerPane, toujours au-dessus dans l'ordre
des panes Leaflet), et le rendu SVG se redimensionnait visuellement pendant
l'animation de zoom. Le point is_home est maintenant un L.marker + divIcon
(comme les clusters), avec zIndexOffset élevé : toujours au premier plan et
taille constante quel que soit le zoom.
---
 src/assets/dash_clientside.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/assets/dash_clientside.js b/src/assets/dash_clientside.js
index d1cb008..ac90e35 100644
--- a/src/assets/dash_clientside.js
+++ b/src/assets/dash_clientside.js
@@ -1,23 +1,31 @@
 window.dash_clientside = Object.assign({}, window.dash_clientside, {
   leaflet: {
     pointToLayer: function (feature, latlng, context) {
-      const isHome = Boolean(feature.properties.is_home);
-      const marker = L.circleMarker(latlng, {
-        radius: isHome ? 8 : 5,
+      // Le point de l'organisme consulté (is_home) est rendu comme une
+      // icône (comme les clusters), pas comme un circleMarker SVG : les
+      // icônes vivent dans le markerPane, toujours au-dessus du overlayPane
+      // (SVG) où se trouvent les circleMarkers, et gardent une taille CSS
+      // fixe (contrairement aux tracés SVG, redimensionnés visuellement
+      // pendant l'animation de zoom).
+      if (feature.properties.is_home) {
+        const size = 16;
+        const icon = L.divIcon({
+          html: `<div style="background-color: ${feature.properties.marker_color}; width: ${size}px; height: ${size}px; border-radius: 50%; border: 2px solid white; box-sizing: border-box;"></div>`,
+          className: "org-home-marker",
+          iconSize: L.point(size, size),
+        });
+        return L.marker(latlng, { icon: icon, zIndexOffset: 1000 }).bindTooltip(
+          feature.properties.tooltip
+        );
+      }
+      return L.circleMarker(latlng, {
+        radius: 5,
         fillColor: feature.properties.marker_color,
         color: "white",
         weight: 1,
         opacity: 1,
         fillOpacity: 0.8,
       }).bindTooltip(feature.properties.tooltip);
-      // Le point de l'organisme consulté (is_home) doit toujours passer
-      // au-dessus de ses contreparties, quel que soit l'ordre des couches.
-      if (isHome) {
-        marker.on("add", function () {
-          marker.bringToFront();
-        });
-      }
-      return marker;
     },
     clusterToLayer: function (feature, latlng, index, context) {
       console.log(feature);