web-dev-qa-db-fra.com

comment ajouter un titre html (info-bulle) à un polygone leaflet.js?

J'ai une carte dépliant et je voudrais ajouter un titre html (info-bulle) à mon polygone. Si j'utilise simplement JQuery:

$('<title>my tooltip</title>').appendTo()

Le titre est ajouté au DOM mais n'est pas visible. Voir ici pour plus de détails mais si je suis cette solution, je ne pourrai plus utiliser les fonctionnalités du dépliant.

J'ai également essayé le plugin leaflet.label mais l'étiquette se déplace avec le pointeur de la souris. Je veux juste l'info-bulle du titre du navigateur standard qui apparaît dans une position peu de temps après le survol)

merci de votre aide

javascriptjqueryhtmlleaflet
11
JW-Munich

Leaflet 1.0.0 a un nouveau intégré L.tooltip classe qui déconseille le plugin Leaflet.label. L'infobulle pointe au centre de la forme et ne bouge pas avec la souris.

L.polygon(coords).bindTooltip("my tooltip").addTo(map);

Démo: https://jsfiddle.net/3v7hd2vx/91/

Pour répondre au commentaire d'OP sur l'info-bulle affichée au centre du polygone, qui peut être hors de vue lorsque le polygone est très grand et que le zoom actuel est élevé, vous pouvez utiliser l'option sticky :

L.polygon(coords).bindTooltip("my tooltip", {
  sticky: true // If true, the tooltip will follow the mouse instead of being fixed at the feature center.
}).addTo(map);

Démo mise à jour: https://jsfiddle.net/3v7hd2vx/402/

21
ghybs