Ich versuche, eine Präsentation über Reveal.js zu erstellen, die eine Leaflet.js-Map in einer der Folien enthält. Ich habe alle erforderlichen Javascript- und CSS-Dateien in meine Präsentation "Reveal.js" aufgenommen und kann die Karte auf der Folie anzeigen.

Das Problem ist jedoch, dass Kartenkacheln nicht korrekt angezeigt werden. Anstelle der eigentlichen Kartenkacheln sehe ich nur einen grauen Hintergrund und einige horizontale schwarze Linien. Ich kann die Karte vergrößern / verkleinern und verschieben, und die schwarzen Linien bewegen sich entsprechend.

Es gibt keine Fehlermeldung in der Javascript-Konsole, und der Browser scheint Kartenkacheln genau so vom Server herunterzuladen, wie er sollte. Ich glaube, das Problem hat etwas mit dem CSS-Code von Leaflet-Kartenkacheln zu tun..leaflet-tile in leaflet.css - irgendwie inkompatibel mit Reveal.js.

Die Frage ist: Weiß jemand, wie man dieses Problem umgeht? Oder ist es eine Sackgasse ohne mögliche Lösung?

Ich habe das folgende CSS für die<div id="map">:

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

BEARBEITEN: Eine naheliegende Problemumgehung hierfür ist die Verwendung<iframe> Tag, um die Karte in die Präsentation einzubetten. Scheint gut zu funktionieren, und vielleicht ist es besser, die Frameworks getrennt zu halten. Der Nachteil ist jedoch, dass mehrere Karten in der Präsentation vorhanden sind, jede für sich<iframe>Für jeden iframe wird eine Kopie von Leaflet.js in den Speicher geladen.

EDIT # 2: Eine bessere Lösung scheint die Verwendung zu seinPolymaps anstattLeaflet.js. Es scheint, dass mehrerePolymaps Karten können in eine eingebettet werdenenthüllen.js Präsentation. Keine Probleme.