Leaflet RevealJS Demo

Roy Francis

2026-04-04

Basic map

{{< leaflet map-basic >}}

Markers

{{< leaflet map-markers >}}

Inline map

{{< leaflet center="[48.86, 2.35]" zoom=14 height="350px" >}}

Inline map with markers

{{< leaflet center="[59.33, 18.07]" zoom=12 height="350px" markers='[{"lat":59.33,"lon":18.07,"popup":"<b>Stockholm</b>","tooltip":"Stockholm"},{"lat":59.35,"lon":18.10,"popup":"Djurgården"},{"lat":59.31,"lon":18.05,"popup":"Södermalm"}]' >}}

TSV file approach

Uses Font Awesome classes loaded automatically by the extension.

leaflet:
  map-markers-tab:
    center: [59.33, 18.07]
    zoom: 12
    height: "400px"
    markers-file: "data/stockholm-markers.tsv"
    markers-sep: "\t"
format: 

lat lon popup   tooltip icon    icon-color  icon-size
59.33   18.07   <b>Stockholm</b><br>Capital of Sweden   Stockholm   fa-solid fa-house   tomato  18
59.35   18.10   Djurgården  Djurgården  fa-solid fa-tree    #2f7d32 18
59.31   18.05   Södermalm   Södermalm   fa-solid fa-briefcase   #4a90d9 18

{{< leaflet map-markers-tab >}}

Map icons

Uses Font Awesome classes loaded automatically by the extension.

---
leaflet:
  map-icons:
    center: [48.86, 2.35]
    zoom: 13
    height: "400px"
    markers:
      - lat: 48.8584
        lon: 2.2945
        popup: "<b>Eiffel Tower</b>"
        icon: "fa-solid fa-house"
        icon-color: "tomato"
        icon-size: 20
      - lat: 48.8606
        lon: 2.3376
        popup: "<b>Louvre Museum</b>"
        icon: "fa-solid fa-building-columns"
        icon-color: "#4a90d9"
        icon-size: 16
      - lat: 48.853
        lon: 2.3499
        popup: "<b>Notre-Dame</b>"
        icon: "fa-solid fa-church"
        icon-color: "green"
        icon-size: 18
---

{{< leaflet map-icons >}}

Font Awesome icons

Uses Font Awesome classes loaded automatically by the extension.

---
leaflet:
  map-fontawesome:
    center: [41.9028, 12.4964]
    zoom: 13
    height: "400px"
    markers:
      - lat: 41.9028
        lon: 12.4964
        popup: "<b>Roman Forum</b>"
        icon: "fa-solid fa-landmark"
        icon-color: "#b04a2b"
        icon-size: 18
      - lat: 41.89
        lon: 12.4922
        popup: "<b>Colosseum</b>"
        icon: "fa-solid fa-torii-gate"
        icon-color: "#5c6f7b"
        icon-size: 16
---

{{< leaflet map-fontawesome >}}

End of demo

This is the end of the demo.