Blog archive in space

I’ve been writing articles on this blog for about 13 years, and for a while now I’ve marked all of the 400ish articles with geo tags.

This blog is Jekyll-based. To add Geo tags, all I had to do was add the information to the ‘front-matter’. Here’s the header of a sample post:

title: "Browser tabs are probably the wrong metaphor"
date: "2019-06-11 21:14:00 UTC"
  - browsers
  - ux
geo: [43.660773, -79.429926]
location: "Bloor St W, Toronto, Canada"

I thought it would be neat to grab all these posts and plot them on a map, so next to my ‘time-based’ archive, I can look at a ‘space-based’ one.

This is how that looks like:

The archive of this blog in space!

Want to check it out? Browse this interactive map

To generate this map, I did two things. First I generated a .kml file. The process for this is basically the same as generating an atom feed for your Jekyll blog. This is how mine looks like:

layout: null
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="" xmlns:atom="">
    <name>{{ site.title }}</name>
      This map contains a list of locations where I wrote an article on this blog.
      {% for post in site.posts %}{% if post.geo  %}
        <name>{{ post.title | xml_escape }}</name>
          {{ post.geo[1] }},{{ post.geo[0] }},0
        <atom:link type="text/html" rel="alternate" href="{{ post.url }}"/>
      {% endif %}{% endfor %}

Lastly, I needed to generate a map page and use the Google maps API to pull in the .kml:

layout: default
bodyClass: map
title: "Blog archive in space"
<div id="map"></div>
  var map;
  var src = '';

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-19.257753, 146.823688),
      zoom: 2,
      mapTypeId: 'terrain'

    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: false,
      preserveViewport: false,
      map: map
<script async defer

Web mentions