This is crazy. There are so many mustaches ({ }) in Liquid and JavaScript.

But it turns out, a bunch of smart people figured out which mustaches (fine, curly brackets or braces or whatever) belong to which bits of code. Consequently, you can use Liquid variables in your JavaScript.

I’ve alluded to this before, as smarter people than I (namely Katy DeCorah) have already demonstrated the flexibility of Jekyll + JS.

DRY mapping

My last post demonstrated the need for a map to show walking trails. I prefer Leaflet for this sort of thing, but I didn’t want to replicate the full script for each map instance. In other words, I wanted to remain faithful to the sacred Don’t Repeat Yourself principle, and only add new code for new attributes.

So I abstracted the common code into a Jekyll include, and I created front matter variables that allow me to control the latitude, longitude, zoom level, and pop-up text for each map instance.

Here’s what it looks like:

Include (map.html)

<div class="map" id="{{ page.map-id }}"></div>

<script>
    var {{ page.map-var }}= L.map('{{ page.map-id }}').setView([{{ page.lat }}, {{ page.long }}], {{ page.zoom }});
    var marker = L.marker([{{ page.lat }}, {{ page.long }}]).addTo({{ page.map-var }});

    L.tileLayer('https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo({{ page.map-var }});

    marker.bindPopup("<strong>{{ page.popup-title }}</strong><br>{{ page.popup-text }}");

</script>

Front matter

---
layout: post
title: "Walking in the woods: Annie’s Cabin"
date: 2019-03-02
description: "I don’t often blog about walking in the woods. In the past, I posted such self-indulgent, albeit personally necessary, excursions to social media. But I no longer subscribe to most social media, so I’ll share my walks here, starting with a walk to Annie’s Cabin near Molalla, Oregon."
categories: walking
tags: [walk, hike, molalla corridor, blm]

map-id: annies-cabin-map
map-var: anniesCabinMap
lat: 45.01916
long: -122.48906
zoom: 14
popup-title: "Annie's Cabin"
popup-text: "Visited on March 2, 2019"
---

Finally, with the script and front matter in place, we simply drop the include where we want it to appear, in this form:

{% include map.html %}

That’s it! Well, not really. You need to include the Leaflet scripts and styles and so on…just consult the quick-start guide for that.

Once you have Leaflet configured, just change your front matter variables based on each map instance. You’ll need to get creative if you have multiple maps per page, but you know what to do. 💪

If you don’t know what to do, it’s fine. We’ll get to it at some point. Take a walk in the woods in the meantime.