Suite

Leaflet / JQuery - impossible d'ajouter ou de supprimer une classe au marqueur divIcon


(c'est lié à une question précédente)

J'ajoute un divIcon (un svg) comme icône pour les fonctionnalités d'un geoJSON, à l'aide de Leaflet. Je peux ajouter une classe à la propriété html de l'icône, mais je n'arrive pas à ajouter ou supprimer dynamiquement la classe à l'aide de jQuery. J'aimerais faire cela pour modifier la taille de l'icône à différents niveaux de zoom (à moins que quelqu'un d'autre ait une meilleure idée de la façon de procéder ?)

extraits de code ci-dessous :

cette partie fonctionne comme prévu ; l'icône est la taille donnée dans la classe css (bien que la propriété 'size' semble être ignorée)

var icon = L.divIcon({"iconSize":new L.Point (50, 50), "iconAnchor": AnchorIcon, "popupAnchor": PopIcon, html: ''});

mais si j'essaye de trouver dynamiquement si cette classe existe sur un événement zoom avec JQuery, la valeur de retour est false :

map.on('zoomend', function(e) { console.log( $('#thisIcon').hasClass("thisIcon15") ); // false

J'ai également essayé de référencer directement « svg » dans l'appel JQuery… pas de chance.

EDIT : j'ai trouvé que 'addClass' et 'removeClass' ne peuvent pas être utilisés directement avec des svgs (LINK).

J'ai essayé la solution de contournement suggérée dans ce lien, mais bien que j'obtienne le nouveau SVG à la bonne taille, l'ancien ne disparaît pas ; à la place, le SVG redimensionné apparaît au-dessus de l'ancien. D'après ce que je peux voir, la propriété size donnée dans la déclaration d'icône n'est pas respectée. Si je pouvais trouver un moyen d'ajouter toutes les icônes de tailles différentes à chaque point, puis basculer l'opacité de chacune, cela pourrait fonctionner.


Voici un exemple de codepen qui montre comment ajouter une classe à un SVG. Aucun jQuery requis.

document.getElementsByTagName('svg')[0].classList.add("anotherclass"); console.log(document.getElementsByTagName('svg')[0].classList)

https://codepen.io/anon/pen/KQLgKL?editors=1111


Voir la vidéo: Javascript - Dynamic Maps with Leaflet (Octobre 2021).