Leaflet Map mit Popup über der Legende

Question

Ich habe eine Situation, wo ich eine Karte mit einer benutzerdefinierten Legende entweder als SVG oder PNG formatiert habe. Die Legende befindet sich immer in der unteren linken Ecke, kann aber ziemlich groß sein (Benutzer kann sie aus- und wieder einschalten).

Die Karte hat auch viele Markierungen. Jeder Marker hat einen Tooltip, der auch groß sein kann. Tooltips werden angezeigt, wenn die Maus über den Marker fährt. Das Problem tritt auf, wenn ein Benutzer über eine Markierung in der Nähe der Legende fährt - der Tooltip erscheint hinter den Legenden. Ich möchte es so machen, dass die Popups über der Legende erscheinen. Also von unten nach oben: Marker, Legende, Marker Popup.

Hier ist eine JSFiddle https://jsfiddle.net/e51mydwa/9/ zu beschreiben, was ich meine. Ich füge die Legenden auf die gleiche Weise hinzu, obwohl das < div id = "legend"> - Tag eine < img> oder < svg> in Wirklichkeit enthält.

<div id="map"> 
    <div id="legend"> 
    I am Legend 
    </div> 
</div> 

Ich habe einen Blick auf http://leafletjs.com/examples/choropleth/, hatte aber, wie Sie das DOM durch Inspektion sehen können, wird dies das gleiche Problem leiden, wie die Legende in die gleiche div wie Leaflet Kontrollen hinzugefügt wird, die immer über den Kartenebenen (wie es sein sollte, sollten Kontrollen immer oben sein).

Ich habe auch versucht, die Legende in eine div einfügen, die auf einer Geschwisterschicht zu der Popup-Ebene ist. Dies behebt das Problem mit dem Z-Index, jedoch enthält das übergeordnete div von beiden eine Transformation, die sich ändert, wenn der Benutzer die Karte umherzieht - was bedeutet, dass die Legenden die Plätze wechseln und nicht statisch sind.

Alle und alle Vorschläge geschätzt.

Answer 1

Dies erfordert aufgrund der Architektur der Leaflet-Layer und -Steuerelemente einen starken Hacking.

Ein möglicher Ansatz besteht darin, eine benutzerdefinierte Layer-Klasse zu erstellen, die in einer statischen Position bleibt, indem der Pixel-Offset bei jeder Änderung der Kartenansicht neu positioniert wird.

Ich empfehle wärmstens das Lesen der Leaflet tutorials, insbesondere der eine über Kartenbereiche und der eine über benutzerdefinierte Ebenen, um zu verstehen, wie dies funktioniert.

// Create a 'static' map pane 
L.Map.addInitHook(function(){ 
    this.createPane('static'); 
    this.getPane('static').style.zIndex = 675; 
}); 

// Define a custom layer class 
L.Layer.StaticOverlay = L.Layer.extend({ 
    onAdd: function(map) { 
    this._map = map; 

    var pane = map.getPane('static'); 
    this._container = L.DomUtil.create('div'); 

    pane.appendChild(this._container); 

    // styling, content, etc 
    this._container.style.background = 'white'; 
    this._container.style.width = '100px'; 
    this._container.style.height = '50px'; 
    this._container.innerHTML = 'Hi!' 


    map.on('move zoom viewreset zoomend moveend', this._update, this); 

    this._update(); 
    }, 

    onRemove: function(map) { 
    L.DomUtil.remove(this._container); 
    map.off('move zoom viewreset zoomend moveend', this._update, this); 
    }, 

    _update: function() { 
    // Calculate the offset of the top-left corner of the map, relative to 
    // the [0,0] coordinate of the DOM container for the map's main pane 

    var offset = map.containerPointToLayerPoint([0, 0]); 

    // Add some offset so our overlay appears more or less in the middle of the map 
    offset = offset.add([340, 220]); 

    L.DomUtil.setPosition(this._container, offset); 

    } 
}); 

Wenn das definiert ist, können Sie einfach

var static = new L.Layer.StaticOverlay().addTo(map); 

Offensichtlich gibt es einige Bits fehlen, wie wie das Overlay richtig zu positionieren (die Karte Pixelgröße mit getSize() bekommen, tun die richtige Arithmetik) und wie Sie den Inhalt des Overlays mit einigen benutzerdefinierten Optionen im Layer-Konstruktor festlegen.

Diese werden als Übung dem Leser überlassen :-)

ein working example here See.