Creating collaborative maps with Open-Source tools

When talking about maps, Google is a clear winner: its maps are everywhere, its navigation tools are great, and they also propose a Map builder named Google Maps Engine.

It’s not a perfect tool though, and I found its collaborative aspects to be limited.

Luckily, there are alternatives! I recently discovered that GitHub automatically created maps if you uploaded geoJSON files to a repository or to a Gist file. You can even embed these maps on external sites.

To get started, build your own geoJSON file, and add spots with as much information as you’d like. Here is an example:

{
  "type": "Feature",
  "geometry": {
    "coordinates": [19.04965, 47.51591],
    "type": "Point"
  },
  "properties": {
    "URL": "http://brioskavezo.hu",
    "marker-symbol": "bakery",
    "marker-color": "#ffba00",
    "name": "Briós Kávézó",
    "phone": "00 36 1 789 6110",
    "address": "Pozsonyi út 16",
    "note": "Breakfast Spot."
  }
}

I used this tool to calculate coordinates for each spot. You can add as many fields as you’d like as properties . marker-symbol refer to the different icons you can use for each marker, and you can use marker-color to change the color of the marker.

Here is the end result:

The maps are built using 3 Open-Source tools:

• OpenStreetMap, a collaborative project to create a free editable map of the world. Think of it as the Wikipedia of maps
• Mapbox, to build the Street view baselayer based on OpenStreetMap. It’s used by Foursquare and Evernote, so you might be familiar with such maps.
• Leaflet.js, a JavaScript Library used to render the geoJSON data and create the markers.

Since all 3 tools are Open-Source, and since I wanted to add more features than GitHub proposes by default, I decided to dig a bit deeper and built my own map using these 3 tools.

Luckily, Mapbox includes a great documentation so it wasn’t very hard. Creating a map is as simple as adding the following 2 Javascript files into an HTML page:

<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />

You can then add the map anywhere on your page by adding <div id='map'></div>.

Once you’ve done so, you can use a geoJSON file to add markers to the map. I used the file from the GitHub repo I created. This way, my map will be automatically updated when people contribute to my GitHub repo.

Since I started on GitHub, I decided to host my map there as well, by using GitHub Pages. You can consequently check my work here.

Here is the end result:

What to see, what to do in Budapest?

I still have a lot of work to do, but I think it’s a good start. Let me know what you think, and send me pull requests if you want to add more spots to that map! 😉