Embedding OpenStreetmap

This is a band site, which means it has gig pages, and a good gig page has an embedded map. We could use Google Maps, sure, but OpenStreetMap has a much more appealing license. So our choices are:

UPDATE: I have worked Leaflet out now, which possibly makes this all a bit redundant

But I’ll leave it here just in case

Embed the whole thing

My first move was just to locate the place in the browser, click ‘share’ on the right-hand-side, and paste the full HTML for the iframe into the gig data. This works, but it’s a really, really terrible solution. So then I looked at


People tell me this is great, but what I know about JavaScript would fit on the back of a matchbox. I hacked around with it for a while and was unable to produce anything useful. If you can show me how to Leaflet, I am of course accepting pull-requests, but pragmatism led me on towards

My OpenLayers _include thing

I strapped on the bamboo headphones and Cargo-Culted my way to this. I kind of understand what it’s doing, but some of it is still utterly impenetrable to me. The important thing, however, is that all of the ugliness is trapped in this one file, and we can generate an embeddable map, complete with a pin, with just a latitude and a longitude, which are easily extracted from an OpenStreetMap URL

How to use it

As you can see from this, you can embed a map with simple call like this:

{% include map.html latitude = '51.49055' longitude = '-0.22406' %}

##Help yourself

All of the code driving this site is MIT Licensed, so please feel free to use this _include file in your own Jekyll sites (or help me make it obsolete by replacing it with Leaflet!)