Я пытаюсь создать презентацию поверх Reveal.js, которая будет включать карту Leaflet.js в одном из слайдов. Я включил все необходимые файлы Javascript и CSS в свою презентацию Reveal.js, и я могу отобразить карту на слайде.

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

В консоли Javascript нет сообщений об ошибках, и браузер, похоже, загружает листы карты с сервера точно так, как должен. Я считаю, что проблема как-то связана с кодом CSS листов листов Leaflet -.leaflet-tile в пределах leaflet.css - как-то несовместимо с Reveal.js.

Вопрос: кто-нибудь знает, как обойти эту проблему? Или это тупик без возможного решения?

У меня есть следующий CSS для<div id="map">:

#map {
    height:400px;
    width:100%;
}

РЕДАКТИРОВАТЬ: Одним из очевидных обходных путей для этого является использование<iframe> тег для вставки карты в презентацию. Кажется, работает просто отлично, и, возможно, лучше держать рамки разделенными. Однако недостатком является то, что если в презентации есть несколько карт, каждая в пределах своей<iframe>копия Leaflet.js загружается в память для каждого кадра iframe.

РЕДАКТИРОВАНИЕ № 2: Похоже, лучшим решением является использованиеPolymaps вместоLeaflet.js, Кажется, что несколькоPolymaps карты могут быть встроены вreveal.js presentaion. Без вопросов.