I've spent the last couple of days adding features to my site about cycling in Brisbane and my favourite would have to be allowing GeoJSON annotation of maps.

What's GeoJSON?

GeoJSON is a Javascript-based file format designed to hold geographical information, similar to KML or GPX. It's supported by default in the Leaflet mapping library which I use on Briscycle, and is supported out of the box by the JOSM map editor, which means I have a full suite of authoring tools at my disposal.

How does this help?

Previously each page about a particular cycleway or feature would have an embedded map at the bottom showing the Briscycle map layer, including various features shown on the full version of the map. This was okay, but not particularly clear, especially when explaining something like the Moreton Bay Cycleway which is some hundred kilometres long, winding around the coastline from Redlands to Moreton Bay.

GeoJSON annotation is great because it lets me add an extra layer to the map, including lines, icons, pinned features and more.

In the case of the MBC, this includes an educated guesstimate of the entire route which people can follow from their desktop or mobile phone.

In other places I've used it to point out map features relevant to that particular route, but not necessary to display on the main map. It's even possible to use GeoJSON as the primary map source without a tile layer in the background, for instance if you wanted to map out your office or property.

Making a GeoJSON file

GeoJSON is a JSON-based file format, so you could technically write it by hand. This, however, sounds like no fun at all.

I used JOSM, an OpenStreetMap editor which offers a bunch of satellite and map overlays and lets you draw features straight onto the map. Being an OpenStreetMap editor, it's heavily tag based, which makes it translate very easily to GeoJSON, so when I was done drawing and adding my tags, I could save it straight out to a GeoJSON file.

It's a good idea to save your GeoJSON file in the OpenStreetMap XML format as well, since JOSM doesn't appear to be able to re-open GeoJSON files. If you need to convert a GeoJSON file back to OSM format for editing, you could use something like the trusty GPSBabel.

Mapping a GeoJSON file with Leaflet

GeoJSON is pretty well supported by the Leaflet JS mapping library, and you can get up and running straight away using the default GeoJSON layer type.

Leaflet provides a comprehensive examples page for the GeoJSON layer which includes the basics, as well as:

• Adjusting default styles.
• Styling individual items (both paths and points).
• Making GeoJSON elements interactive.

I've passed a custom style function which checks the attributes on each path to decide how it should be styled. The onEachFeature lets me create popups when a user clicks certain elements, and I've added a custom pointToLayer function to override the default marker and display standard OpenStreetMap icons for points.

If you're looking at using other formats with Leaflet such as GPX or KML, check out the plugin work done by Pavel Shramov.

Best Library Ever

If you're looking for a mapping library, you really can't go past Leaflet. It might not be as mature as others on the market, but it's by far the nicest to develop with, and it's gorgeous on the client-side.

To get a feel for what I've done you can check out some of the pages I've published thus far, including the Brisbane Valley Rail Trail, the V1 Cycleway from Brisbane to the Gold Coast, and the Moreton Bay Cycleway.