Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Embed Leaflet.js maps in Reveal.js presentations
.map {
width: 960px;
height: 480px;
.reveal .leaflet-container .leaflet-fade-anim .leaflet-tile, .reveal .leaflet-container .leaflet-fade-anim .leaflet-popup {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
.reveal .leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
.reveal .leaflet-container img {
margin: 0;
background: none;
border: none;
box-shadow: none;
max-height: inherit;
.reveal .leaflet-container .leaflet-popup-tip-container {
margin: 0 auto;
.reveal .leaflet-container .leaflet-popup-content-wrapper {
padding: 1px;
margin: inherit;
.reveal .leaflet-container .leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
.reveal .leaflet-container .leaflet-popup-content h3 {
color: #333;
.reveal .leaflet-container .leaflet-popup-tip {
padding: 1px;
margin: -10px auto 0;
.reveal .leaflet-container .leaflet-popup-content, .reveal .leaflet-popup-content h2 {
color: #333;
.reveal .leaflet-container .leaflet-popup-content pre {
font-size: 14px;
width: 100%;
box-shadow: none;
Copy link

benoitrolland commented Nov 15, 2018

Hello, your leaflet related production is impressive. Would you have a working html example using this reveal - leaflet css ?
For an idea of what I am tring to achieve, see : ZoneFactor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment