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:
@@ -1,23 +1,31 @@
|
|||||||
window.dash_clientside = Object.assign({}, window.dash_clientside, {
|
window.dash_clientside = Object.assign({}, window.dash_clientside, {
|
||||||
leaflet: {
|
leaflet: {
|
||||||
pointToLayer: function (feature, latlng, context) {
|
pointToLayer: function (feature, latlng, context) {
|
||||||
const isHome = Boolean(feature.properties.is_home);
|
// Le point de l'organisme consulté (is_home) est rendu comme une
|
||||||
const marker = L.circleMarker(latlng, {
|
// icône (comme les clusters), pas comme un circleMarker SVG : les
|
||||||
radius: isHome ? 8 : 5,
|
// 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,
|
fillColor: feature.properties.marker_color,
|
||||||
color: "white",
|
color: "white",
|
||||||
weight: 1,
|
weight: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
fillOpacity: 0.8,
|
fillOpacity: 0.8,
|
||||||
}).bindTooltip(feature.properties.tooltip);
|
}).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) {
|
clusterToLayer: function (feature, latlng, index, context) {
|
||||||
console.log(feature);
|
console.log(feature);
|
||||||
|
|||||||
Reference in New Issue
Block a user