Jekyll and GeoJSON

code × November 3, 2014

Add this post to my love-affair-with-Jekyll-and-Mapbox series.

A cool thing happens

To summon Jekyll to a page, you use those six hyphens:


Put variables inside or don’t. Either way Jekyll will gobble it up and make something awesome. Jekyll doesn’t discriminate.

.html? Sure.

.md? Yup.

.geojson? Let’s try it.

Making GeoJSON

A GeoJSON file has a lot of repetition – swap out different coordinates here and maybe a style change there. The pattern lends itself to building a template and adding variables.

All my adventure posts have coordinates that I use to build a static map header. I decided that I wanted to grab all those coordinates, weave them into a GeoJSON file, and then load it on a single adventure map.

To start, I worked on my loop and found that this was the best route:

{% assign places = (site.posts | where: "category", "adventures") %}
{% for place in places %}

  <!-- gooey, caramel center -->

{% endfor %}

I created the file: `adventures.geojson` and added those six magical hyphens. Next, I wove and massaged until GeoJSON happened:

"type": "FeatureCollection",
"features": [{% assign places = (site.posts | where: "category", "adventures") %}{% for place in places %}
"type": "Feature",
"properties": {
"title": "{{ place.title }}",
"image": "{{ place.image }}",
"url": "{{site.url}}{{place.url}}",
"geometry": {
"type": "Point",
"coordinates": [{{ place.coordinates }}]
}{% if forloop.rindex > 1 %},{% endif%}{% endfor %}

Then, I added a few conditional statements to make sure my data looked tight:

Check out the raw Jekyll GeoJSON with all my tweaks and the fresh out-the-oven GeoJSON.

Adventure map

I built the map with Mapbox.js. I sourced the functionality of my map from Mapbox.js examples. I used:

My map looks tight and now any adventure post will automatically be added to my map.

On tap

A few things I would like to work on:

Can you tell that I work for Mapbox now? <3