Steve Bennett blogs

…about maps, open data, Git, and other tech.

Tag Archives: geojson

Super lightweight map websites with Github

Leave a comment Posted by on February 13, 2014

Github, the online version control repository host for Git, recently added support for GeoJSON files. Sounds boring, right? It actually lets you do something very cool: build your own “dots on a map” website with virtually zero code.

An example of GeoJSON on Github I whipped up.

An example of GeoJSON on Github I whipped up. Click it.

Here’s what you need to do.

  1. Get a Github repository if you don’t have one already. They’re free.
  2. Create a GeoJSON file. You can export to this format from various tools. One easy way to get started would be to upload a CSV file with locations to dotspotting.org then download the GeoJSON from there. Or even easier, use geojson.io to place dots, lines and polygons with a graphical tool. It can save directly to your GitHub.
  3. Here’s what my test file looks like: 
    {
 "type": "FeatureCollection",
 "features": [{ "type": "Feature",
 "geometry": {
 "type": "Point",
 "coordinates": [144.9,-37.8]
 },
 "properties": {
 "title": "Scooter",
 "description": "Here's a dot",
 "marker-size": "medium",
 "marker-symbol": "scooter",
 "marker-color": "#a59",
 "stroke": "#555555",
 "stroke-opacity": 1.0,
 "stroke-width": 2,
 "fill": "#555555",
 "fill-opacity": 0.5
 }
 },
 { "type": "Feature",
 "geometry": {
 "type": "Point",
 "coordinates": [144.4,-37.5]
 },
 "properties": {
 "title": "Cafe",
 "description": "Coffee and stuff",
 "marker-size": "medium",
 "marker-symbol": "cafe",
 "marker-color": "#f99",
 "stroke": "#555555",
 "stroke-opacity": 1.0,
 "stroke-width": 2,
 "fill": "#555555",
 "fill-opacity": 0.5
 }
 }]
}

    It’s worth validating with GeoJSONLint.

  4. Commit this file, say test.geojson, to your Github repository. You can get a preview of it in Github:

    The test GeoJSON file, as seen on GitHub.

    The test GeoJSON file, as seen on GitHub.

  5. Now the really cool part. Embed the map into your own website. This is stupidly easy: 
    <!DOCTYPE html>
<html>
<body>
<script src="https://embed.github.com/view/geojson/stevage/georly/master/test1.geojson?height=500&width=1000"></script>
</body>
</html>

    If you don’t have a website, site44 is an extremely easy way to get started. You place HTML files into your DropBox, and they get automagicked onto the web, with a subdomain: something.site44.com.

Now what?

That’s it! What’s especially interesting about the hosting on GitHub is it’s a very easy way to have a lightweight shared geospatial database of points, lines or polygons. Here’s how you could add dots to my map:

  1. Fork my repository
  2. Add a few points, by modifying the GeoJSON file
  3. Commit your changes to your repository.
  4. Send me a pull request
  5. I accept the changes, and voila – now your points are shown with mine.

Using this method, we have a “review before publish” workflow, and a full version history of every change.

Caveats

This is a nifty tool for prototyping social mapping applications, but it obviously won’t cut it for production purposes:

  • No support for different layers: all the dots are always shown
  • No support for different basemaps: always the same OpenStreetMap style
  • No authoring tools: you must use something else to generate the GeoJSON
  • Obligatory “rendered with (heart) by GitHub” footer.

Soon you’ll want to build a proper application, using tools like MapBox, CloudMade, CartoDB, Leaflet etc.

Advertisement
mapmaking , , , , , ,