Leaflet : modification dynamique de la taille de la police dans le texte de l'étiquette lors du changement de zoom

Bonjour,

J’aimerais savoir s’il est possible de faire varier la taille de la police dans l’étiquette en fonction du seuil de zoom. Mon étiquette : layer.bindTooltip(feature.properties.nom_+'<br>Population : '+feature.properties.population+'<br>Surface : '+feature.properties.surface+' ha’,{permanent:true,className: "etiquette", direction : 'center’, offset: [0, 0] });

Et les propriétés dans mon css .leaflet-tooltip.etiquette { background-color: white;
border: transparent;
box-shadow: none; font-weight: bold; font-size: 7px; height: 30px; padding: 0px; opacity: 0.8px; text-align: center; }

J’imaginais une possibilité avec une fonction : map.on(’zoomstart’, function () { var zoomLevel = map.getZoom();} mais je ne sais pas comment faire varier mon font-size.

Merci par avance pour vos réponses.

Hello,

Tu peux utiliser une variable CSS que tu mets à jour en JS.

Tu peux définir une valeur par défaut dans ton CSS comme ceci :

.leaflet {
  font-size: var(--font-size, 1rem);
}

Et en JS dans ton listener tu viens mettre à jour ton conteneur :

document.getElementById('ma-carte').style.setProperty('--font-size', '2rem');

Bonjour,

Merci beaucoup. C’est exactement ce que je cherchais.

Bonne fin de journée.