Próbuję utworzyć prezentację na wierzchu Reveal.js, która zawiera mapę Leaflet.js na jednym ze slajdów. Umieściłem wszystkie niezbędne pliki Javascript i CSS w mojej prezentacji Reveal.js i mogę zrobić mapę na slajdzie.

Problem polega jednak na tym, że kafelki mapy nie są wyświetlane poprawnie. Zamiast rzeczywistych kafelków mapy widzę tylko szare tło i niektóre poziome czarne linie. Mogę powiększyć / pomniejszyć i przesunąć mapę, a czarne linie odpowiednio się poruszają.

W konsoli JavaScript nie ma komunikatu o błędzie, a przeglądarka wydaje się pobierać kafelki map z serwera dokładnie tak, jak powinny. Uważam, że problem ma coś wspólnego z kodem CSS kafelków map ulotek -.leaflet-tile w obrębie leaflet.css - w jakiś sposób niezgodny z Reveal.js.

Pytanie brzmi: czy ktoś wie, jak obejść ten problem? Czy może jest to termin bez możliwości rozwiązania?

Mam następujący CSS dla<div id="map">:

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

EDYTOWAĆ: Jednym z oczywistych obejść tego jest użycie<iframe> znacznik do osadzenia mapy w prezentacji. Wydaje się, że działa dobrze, a może lepiej jest, aby ramy były rozdzielone. Minusem jest jednak to, że jeśli w prezentacji jest kilka map, każda z nich jest własna<iframe>, kopia Leaflet.js jest ładowana do pamięci dla każdego iframe.

EDYCJA # 2: Wydaje się, że lepszym rozwiązaniem jest użyciePolymapy zamiastLeaflet.js. Wydaje się, że kilkaPolymapy mapy mogą być osadzone wreveal.js prezentaion. Nie ma problemów.