When it comes to planning a vacation, I like to comprehend the points of interest and the possible route I need to take on a map. I like to get inspiration from Blogs and YouTube for places I want to travel to, but more than often those posts lack a map, so I have to open a separate tab with Google Maps to see if two places are next to each other or far apart.

In this post I want to document my workflow for integrating maps in a Jekyll blog with GeoJSON, Leaflet and OpenStreetMap. To get an impression how the final result looks like, refer to my last post. Here are the four steps to a map in a blog post:

  1. Use a planning tool to create your map. I like to draw not just points of interest but also routes on my map. I use Google My Maps for this purpose. It allows me to add different markers for POIs and use route planning to draw the route between them.

  2. Export the KML/KMZ map and convert it to GeoJSON. Google My Maps lets you export the created map to KML or KMZ (compressed KML). The KML/KMZ needs to be converted to GeoJSON. Any online converter can be used for that purpose. I haven’t found a tool that lets you export a custom map directly to GeoJSON. Openrouteservice can export routes directly to GeoJSON but without additional POIs.

  3. Minimize the GeoJSON file. The converted GeoJSON file can become quite large, especially if you want to include routes. The original GeoJSON file I created for my last post was about 1 MB which is too big. I found Mapshaper (via) that allows you to upload the GeoJSON and applies different simplification algorithms to reduce its size. In my case I could reduce the 1 MB file to just 86 KB without significant information loss.

  4. Install Jekyll Leaflet plugin and integrate the GeoJSON file. I don’t want to display a Google Map on my blog as it is not open. The obvious alternative is embedding an interactive map with Leaflet and OpenStreetMap as map provider. Luckily, there is a Leaflet plugin for Jekyll that lets you place a Liquid tag block on any page or post. Within the tag you can specify the map center, zoom level, map provider and integrate the GeoJSON.