fix(figures): rendre le point de l'organisme en icône plutôt qu'en circleMarker

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.
This commit is contained in:
Colin Maudry
2026-07-03 22:17:54 +02:00
parent f1c28acc96
commit 86977bd37e
+19 -11
View File
@@ -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);