How to embed a Leaflet map into a Reveal.js presentation?

Question

I am trying to create a presentation running on top of Reveal.js, which would include a Leaflet.js map within one of the slides. I have included all necessary Javascript &am

Answer 1

It might be happening because the #map element is hidden (due to the hidden slide) when it is initialized, so it cannot read the dimensions..

Try using map.invalidateSize(false); once your slide becomes visible..

Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
    if (event.indexh == 5){ // assuming your 5th slide is the one with the map
        map.invalidateSize(false); // assuming that map holds the the reference to your leaflet instance
    }
} );