Карта лифтов с всплывающим окном над легендой

Question

У меня есть ситуация, когда у меня есть карта с пользовательской легендой, отформатированной как SVG или PNG. Легенда всегда располагается в левом нижнем углу, но может быть довольно большой (пользователь может выключить и включить).

На карте также много маркеров. Каждый маркер будет иметь всплывающую подсказку, которая также может быть большой. Всплывающие подсказки показывают, когда мышь нависает над маркером. Проблема возникает, когда пользователь нависает над маркером рядом с легендой - всплывающая подсказка появляется за легендами. Я хотел бы сделать так, чтобы всплывающие окна отображались над легендой. Итак, снизу вверх: маркер, легенда, всплывающее окно маркера.

Вот JSFiddle https://jsfiddle.net/e51mydwa/9/, чтобы описать, что я имею в виду. Я добавляю легенды одинаково, хотя тег div id = "legend"> < содержит в действительности < img> или < svg>.

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

Я имел взгляд на http://leafletjs.com/examples/choropleth/, но, как вы можете увидеть, осматривая DOM, это постигнет та же проблема, как и легенда добавляется в тот же DIV в качестве контрольной листовки, которая всегда над слоями карты (как и должно быть, элементы управления всегда должны быть наверху).

Я также попытался вставить легенду в div, который находится на слое родства к всплывающему слою, содержащему слой. Это исправляет проблему z-index, однако родительский div обоих из них содержит преобразование, которое изменяется, когда пользователь перетаскивает карту вокруг - это означает, что легенды меняют места и не статичны.

Любые предложения приветствуются.

Answer 1

Это требует особого взлома, благодаря архитектуре слоев и элементов управления листовками.

Одним из возможных подходов является создание пользовательского класса слоев, который остается в статическом положении, путем смещения смещения пикселя при каждом изменении вида карты.

Я сердечно рекомендую прочитать Leaflet tutorials, в частности, о панелях карты и о пользовательских слоях, чтобы понять, как это работает.

// 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); 

    } 
}); 

Когда это определено, вы можете просто

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

Очевидно, есть некоторые биты отсутствуют, например, как поместить накладку правильно (получить размер карты в пикселях с getSize(), сделайте соответствующую арифметику) , и как установить содержимое наложения с некоторыми настраиваемыми параметрами в конструкторе слоя.

Они в качестве упражнения для читателя :-)

См working example here.