8

Ho una serie di punti geoJSON e hanno etichette corrispondenti ad essi allegate.Leaflet.label non mostra sui marcatori

var points = L.geoJson (null, { 
    onEachFeature: function (feature, layer) { 
     layer.options.riseOnHover=true; //tried adding this 
     layer.options.riseOffset=9999; //as well as this 
     layer.bindLabel(feature.properties["name"], {className: 'map-label'}); 
     L.setOptions(layer, {riseOnHover: true}); //this as well 
    } 
}); 

Questo è il codice che passa attraverso ciascuna funzione nel file JSON e crea un insieme di punti. Ora, la funzione reale che aggiunge marcatori per la mappa va in questo modo:

var addJsonMarkers = function() { 
    map.removeLayer(markers); 
    points.clearLayers(); 

    markers = new L.layerGroup(); 
    points.addData(dataJson); 
    markers.addLayer(points); 

    map.addLayer(markers); 

    return false; 
}; 

Il problema che sto avendo è che non importa quello che cerco di aggiungere (puoi vedere le mie osservazioni), le etichette sono sempre dietro la marcatori, che non è il comportamento previsto.

Screenshot of label behind the

desidero l'etichetta di essere su di esso. Ho provato a cambiare manualmente ilnella classe map-label, così come numerose soluzioni con riseOnHover che sembra essere la soluzione per questo, ma le etichette sono ancora dietro. Qualcuno vede quello che sto facendo male?

Il codice completo è visibile here

+0

Hai bisogno di guardare per vedere che cosa riquadro della mappa l'etichetta viene attaccata da e per spostarla ad uno sopra i marcatori. Potresti anche vedere {ottimizzato: falso} per i marcatori (se disponibile). – geocodezip

+0

Viene collegato al 'leaflet-marker-pane', come ultimo elemento nell'elenco di tutti i marcatori nel div. –

risposta

6

Specificare popupPane come pane in bindLable opzioni:

layer.bindLabel(
    feature.properties["name"], 
    { 
     className: 'map-label', 
     pane:'popupPane' 
    } 
); 

In Volantino popupPane è superiore markerPane così apparirà le etichette sulla parte superiore dei marcatori.

C'è un piccolo doc per Leaflet.label con descrizione opzioni https://github.com/Leaflet/Leaflet.label

controllare anche questo jsfiddle: http://jsfiddle.net/L6kqu54a/

+0

Questo ha funzionato. Ho trascurato questa opzione nella documentazione e ho cercato la soluzione in posti sbagliati. Grazie! –

+0

Confermando semplicemente * options.pane = 'popupPane'; * soluzione. Non ho avuto questo problema in LeafletJS 0.7.3 e 0.7.5 ma mi è venuto in mente quando sono passato a LeafletJS 1.0.0-beta. Giocare con zIndex tramite JS e/o CSS semplicemente non funziona. Ma usando options.pane fa. – fris

1

Date un'occhiata ai metodi BringToFront() e bringToBack(), creare una funzione di gruppo per i marcatori e portarlo a sostenere, nel frattempo fare il contrario con le etichette. Oppure potresti aggiungere un L.info per mostrare le informazioni se non trovi una soluzione. Date un'occhiata qui forse questo potrebbe aiutare: http://leafletjs.com/reference.html#featuregroup-bringtofront Posta il tuo codice da qualche parte anche così posso dare un'occhiata a questo.

+0

Grazie per la risposta. Puoi dare un'occhiata al mio codice qui: http://pastebin.com/2iH3U0a7 Non ho molta familiarità su come fare cose più avanzate, come creare funzioni di gruppo per marcatori e per etichette, poiché mi sto affidando a questo Leaflet. plug-in dell'etichetta e la sua funzione 'bindLabel()', quindi non sono sicuro di ciò che viene effettivamente fatto in background. –

+0

Prova a commentare questo: layer.on ({click: highlightFeature}); – Mensch

+0

Ancora lo stesso. Tuttavia, ho bisogno di quell'ascoltatore, perché quando si fa clic sull'indicatore, ottengo un bel popup di informazioni nell'angolo destro con alcuni dei contenuti. '' è solo un segnaposto. –

Problemi correlati