Suite

Comment afficher l'étiquette sur les marqueurs sur le dépliant ?

Comment afficher l'étiquette sur les marqueurs sur le dépliant ?


Je dois montrer l'étiquette sur les marqueurs sur le dépliant pour le rendre lisible. Comment puis-je le mettre en œuvre ? Voir l'image ci-dessous l'étiquette est superposée par le marqueur


ÉDITER:

Une solution de contournement encore plus simple serait d'utiliser l'option marqueurleverOnHover (si vous acceptez ce comportement sur les marqueurs).

Leaflet ajuste le marqueur z-index lorsque vous le survolez (afin qu'il apparaisse au-dessus des autres), et l'étiquette sera également ajustée automatiquement, de sorte qu'elle apparaîtra également au-dessus de tous les autres marqueurs !

Lors de l'instanciation de vos marqueurs, assurez-vous simplement de définir cette option survrai:

L.marker(latlng, { riseOnHover: true });

Démo : http://jsfiddle.net/ve2huzxw/64/


Réponse initiale :

Malheureusement, L.Label ajuste automatiquement le z-index de l'étiquette à la même valeur que son marqueur source/parent. Et parce que Leaflet ajuste automatiquement l'index z des marqueurs afin que les marqueurs inférieurs (sud) apparaissent au-dessus, ils apparaîtraient également au-dessus des étiquettes des marqueurs supérieurs (nord).

Une solution de contournement "simple" serait de forcer L.Label à ajouter les étiquettes au popupVoletà la place dumarqueurPane, comme c'est déjà le cas pour les vecteurs. Mais cela signifierait modifier le code de la bibliothèque.

Si vous êtes prêt à suivre cette voie, ajoutez simplement le code suivant dans votre script, avant de commencer à instancier les couches et leurs étiquettes :

// Modifie la méthode prototype L.Label.onAdd. L.Label.include({ onAdd: function (map) { this._map = map; //this._pane = this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane; this._pane = map._panes.popupPane; // ajouter à popupPane dans tous les cas. if (!this._container) { this._initLayout(); } this._pane.appendChild(this._container); this._initInteraction(); this._update (); this.setOpacity(this.options.opacity); map .on('moveend', this._onMoveEnd, this) .on('viewreset', this._onViewReset, this); if (this._animated) { map .on('zoomanim', this._zoomAnimation, this); } if (L.Browser.touch && !this.options.noHide) { L.DomEvent.on(this._container, 'click', this.close, this ); } } });

Démo : http://jsfiddle.net/ve2huzxw/63/

Une autre solution de contournement pourrait consister à faire en sorte que L.Label utilise un décalage d'index z lors de l'ajustement de l'index z de l'étiquette par rapport à celui du marqueur. Mais cela nécessiterait également de modifier le code de la bibliothèque.

Cela pourrait être une demande de fonctionnalité intéressante pour la bibliothèque de plugins L.Label. Cependant, il semble ne plus être entretenu?