Создание карты lealetjs в невидимом div

Question

Я добавляю leafletjs карта в remarkjs слайд-шоу. Карта работает нормально, если слайд, содержащий div карты, виден при начальной загрузке веб-страницы. Однако, если слайд с div карты не является видимым слайдом, тогда div карты невидим, поэтому листовка не работает должным образом, так как все плитки не загружены в div. То, что я хотел бы сделать, это загрузить все элементы карты в слайд-шоу, независимо от того, на каком слайде они могут быть, и затем правильно отобразить их, когда появится слайд, содержащий карты.

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

Так как я мог добавить много карт в слайд-шоу, я использую имя класса для div карты.

// css
.map { width: 100vh; height: 100vh; }

// html
<div class="map" data-lat="47" data-lon="106"></div>
<div class="map" data-lat="0" data-lon="0"></div>
<!-- possibly on a different slide -->
<div class="map" data-lat="30" data-lon="28"></div>

// js
var maps = []; // for storing map elements
var mapDivs = document.getElementsByClassName('map');

for (var i=0, j=mapDivs.length; i<j; i++) {
    var map = L.map(mapDivs[i]).setView(
        [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
        13
    );

    // store map for later
    maps.push(map);
    L.tileLayer(…).addTo(map);
}

slideshow.on('showSlide', function (slide) {
    for (var i=0, j=maps.length; i<j; i++) {
        maps[i].invalidateSize();
    }
});

Моя логика говорит, что вышесказанное должно работать, но это не так. Что я делаю неправильно?

Обновление 2: map.invalidateSize() Ответ действительно был частью решения. Моя вина была в том, что я звонил slideshow.on('showSlide', fn) но я действительно должен был звонить slideshow.on('afterShowSlide', fn), Последний дает remarkjs возможность на самом деле создать текущий слайд, который может иметь div карты, который в свою очередь позволяет map.invalidateSize() правильно стрелять и перекрашивать карту.

Answer 1

leafletjs требуется наличие ширины и высоты div> 0px, то есть быть видимым, а не скрытым, чтобы загрузить требуемые фрагменты карты и показать карту. Добавление карты DIVS к remarkjs Слайд-шоу означает, что один или несколько из этих элементов будут скрыты при запуске слайд-шоу. Как следствие, leafletjs не сможет отображать карту в этих элементах (случайные плитки будут отсутствовать), пока браузер не изменит размер, заставляя leafletjs пересчитать размер карты и скачать правильные плитки. Решение состоит в том, чтобы уволить map.invalidateSize() метод, когда отображается слайд с картой Div. Вот как я это сделал наконец

/* css ******************************/
.map { width: 100vh; height: 100vh; }


<!---------------------------------------------
html
map divs possibly on different slides, with a
`map: true` property on each slide with a map
----------------------------------------------->

---
map: true
<div class="map" data-lat="47" data-lon="106"></div>
---
map: true
<div class="map" data-lat="0" data-lon="0"></div>
---
map: true
<div class="map" data-lat="30" data-lon="28"></div>

// js /////////////////////////////////////////
var maps = []; // for storing leaflet map elements
var mapDivs = document.getElementsByClassName('map');

for (var i=0, j=mapDivs.length; i<j; i++) {

    // store map for later
    maps.push(L.map(mapDivs[i]).setView(
        [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
        zoomLevel
    ));

    // add map to the tileLayer
    L.tileLayer(…).addTo(maps[i]);
}

// use the 'afterShowSlide' event to ensure the 
// map div has been created
slideshow.on('afterShowSlide', function (slide) {

    // only if the slide has a 'map' property
    if (slide.properties.map) {
        for (var i=0, j=maps.length; i<j; i++) {
            maps[i].invalidateSize();
        }
    }
});