In this post I walk through the steps I took to get a working Leaflet.js map in a Jekyll blog post.
I’ve recently started to develop lightweight and responsive apps using Leaflet as opposed to the more heavyweight and fully featured OpenLayers library. That isn’t to say that OpenLayers isn’t a great library; in fact, it’s been around quite some time and is incredibly feature rich. Leaflet however, is more than capable of fulfilling the requirements of most web-mapping projects (and it helps that I find Leaflet a lot quicker to develop with).
Including Leaflet in Jekyll
Before displaying a Leaflet map in our post, we first have to include the leaflet.js and leaflet.css files in the site, and there are two main ways to achieve this. The first is to include the following code in the
<head> section of the HTML code:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
The second is to download the Leaflet source code from the Leaflet GitHub repository. This then needs to be built using Node.js. Run the following commands (assuming you have already installed Node.js on your machine):
npm install -g jake npm install
You may need to run these using sudo. Once installed,
cd into the
/Leaflet directory that your downloaded files are saved in and run the command
This will create a
dist folder where you will find a
leaflet-source.js file, a minified
leaflet.js file for deployment as well as a
leaflet.css file. These now need to be accessible to your jekyll build, so
cd into your
username.github.io folder that contains your jekyll site and run the following commands:
To include these in a jekyll blog post, I have used the method outlined by Matt Gemmell, where the post YAML front matter should include:
--- custom_css: leaflet custom_js: leaflet ---
and then include the following in the post’s
``` Then I add a div to the post which will contain the map:
followed by this
which initialises the map object, sets the coordinates of the initial view, sets the zoom layer and finally uses
L.tileLayer to call a tile layer from MapBox and add it to the map.
This is an easy way to get a Leaflet.js map up and running on a GitHub hosted Jekyll blog. I’m hoping to get more walkthroughs up showing further functionality of Leaflet and other open source GIS software, soon.