ben strawbridge

DOT COM CONSULTING

Adding Leaflet to Ryder Theme

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 /static directory 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: '&copy; <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>

{{< leaflet id="map1" lat="33.966613" lon="-118.426178" zoom="13.5" markerLat="33.9716" markerLon="-118.4363" markerPopup="Green Space right by LAX!" >}}

Resources