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.

On tap

A few things I would like to work on:

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

Keep reading code