Here is my solution for embedding a simple Leaflet map in a Jekyll post without all the boilerplate. Normally you would copy-paste a <div>, a <script>, and remember to load Leaflet somewhere on the page. It gets messy when you have more than one map.

So I wrote a {% map %} Liquid tag that handles everything.

How it works

Drop this anywhere in your markdown:

That one line gives you a map, a marker, and a caption. The tag loads Leaflet CSS and JS once per page, so you can stack as many maps as you want without worrying about duplicate script tags.

A few examples

Taller map for showing area context:

Sometimes you just want the view without a marker:

The marker="false" part removes the pin. Useful when you want to show the region rather than a specific point.

Custom basemap? No problem:

Inset-sized for side-by-side with text:

All options

All five maps above are on this one page. The tag tracks how many have been rendered and gives each one a unique ID — no conflicts.

If you write a GIS blog with Jekyll, this single tag covers most of the “show me where” moments. For story-driven narratives, I have another tag for that — but that is a different post.