abandoning google maps

I have been using a custom google maps to track the cities I have visited. As a part now of my goal to be less dependent on US tech I decided to move it to this site instead. I already have map support embedded in posts using leaflet. I haven’t written about that but this work sort of extends on that.

Exporting data from Google

This is easy enough. It is possible to export a KML file with all the data you have added. Now I knew that leaflet could work with geojson so I found a converter on the webz and converted the KML to geojson.

Deciding on format at rest

So I already had this set up with coordinates in the frontmatter triggering an embedded leaflet map for the posts having it. So it wouldn’t hurt to reuse that somehow. Another option would be to reference a geojson file directly. But mostly I will probably create maps from scratch. In the end I decided to add a new way to create posts based on a geojson file and then in the version controlled posts have the map information in the same way for these kind of posts.

A new kind

I already had two kinds of posts: article and släkt. I added a third one now called mapthat outputs a full screen map based on coordinates in the front matter.

Generate front matter from geojson

So I could have done a multi line edit from the geojson - after all my front matter format is not that different. But it is more fun to code something that can be used again potentially. So I created another nanoc script to create front matter from geojson. Below the data moprhing part. Otherwise it was much similar to the other creator scripts.

def points_from_geo geojsonfile
  geo = JSON.load_file geojsonfile
  geo['features'].map do |one_feature|
    {
      lat: one_feature['geometry']['coordinates'][1],
      lng: one_feature['geometry']['coordinates'][0],
      name: one_feature['properties']['Name']
    }
  end
end

Layouting

I put the maps in a new folder callse content/maps and added a rule to the nanoc Rules file like this:

compile '/**/maps/*.md' do
  filter :kramdown
  layout '/map.*'
  layout '/default.*'
  write item.identifier.without_ext + '/index.html'
end

This is quite similar to articles but there is the map layout instead of the single one. This allows for the full screen map I am after. With some tweaks. This map layout is also used by call from the single layout so now it needs to be produce different sizes depnding on the caller. The width was hard wired in this layout before but I decided to remove it and use CSS to have different sizes depending on the kind of article. The main container has a class with the kind on so it is easy to have different seelctors for the map kind and the article kind. In the end I made the map special and everything else default. I already have the släkt kind that looks similar and there may be more in the future.

The CSS turned out like this:

.kind-map
{
    height: 100%;
    max-width: none;
}

#map
{
    height: 320px;
}

#map img
{
    max-width: none;
}

.kind-map #map
{
    height: 100%;
    width: 100%;
}

(Yes the curly is on a new line cause I like it.)

Title overlay

Finally I added a title overlay to the top right corner. (Layouts are slim.)

- if @item[:kind] == 'map'
  div.map-title-overlay
    = @item[:title]

And some CSS to make it look nice:

.map-title-overlay
{
    position: absolute;
    z-index: 1000;
    top: 10px;
    right: 10px;
    font-size: larger;
    background-color: rgba(232, 232, 232, 0.85);
    padding: 10px;
    border-radius: 10px;
}

Final result

And see the final result here.

Potential extra features

• Add some kind of description and show it on click. Maybe an info icon or something.
• Add backlink to mazin front page.
• Add tags and cross link between posts and maps. Related postst in the info box perhaps.
• Also generate full screen maps base on each post with a map in. And add a full screen link to the posts.

written by fredrik at 2026-08-09

Related posts