I made this quick and easy shortcode to get started using leaflet.js in the Ryder Theme for Hugo Websites, as I add more features supported by leaflet to the shortcode I might update this page.
Steps taken
- I found this blog post over at osgav.run which reminded me of leafletjs. I had worked on a mapping project years ago and used leaflet for it, but hadn’t checked it out since around 2018.
- I downloaded leaflet.js from their downloads page
- I copied the extracted zip to the
/staticdirectory of the ryder theme. - I added the needed files to the head.
- TODO: only include them in when leaflet is being used.
<link rel="stylesheet" href="{{ site.BaseURL}}leaflet/leaflet.css" />
<script src="{{ site.BaseURL}}leaflet/leaflet.js"></script>- I created the shortcode
leaflet.js
{{- $id := .Get "id" | default "map1" }}
{{- $lat := .Get "lat" | default "51.505" }}
{{- $lon := .Get "lon" | default "-0.09" }}
{{- $zoom := .Get "zoom" | default "13" }}
{{- $markerLat := .Get "markerLat" | default "51.5" }}
{{- $markerLon := .Get "markerLon" | default "-0.09" }}
{{- $markerPopup := .Get "markerPopup" | default "hi" }}
<div id="{{ $id }}" style="height: 400px;"></div>
<script>
var map = L.map('{{ $id }}').setView([{{ $lat }}, {{ $lon }}], {{ $zoom }});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
{{ with $markerLat }}
L.marker([{{ $markerLat }}, {{ $markerLon }}]).addTo(map)
.bindPopup('{{ $markerPopup }}');
{{ end }}
</script>
<div>Debug Info: ID={{ .Get "id" }}, Lat={{ .Get "lat" }}, Lon={{ .Get "lon" }}, Zoom={{ .Get "zoom" }}</div>
- I added the shortcode to my post about westchester hiking
{{< leaflet id="map1" lat="33.966613" lon="-118.426178" zoom="13.5" markerLat="33.9716" markerLon="-118.4363" markerPopup="Green Space right by LAX!" >}}