Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Open source, open standards, and 50 lines of code

A look behind GitHub’s GeoJSON rendering and diffing

  A story

  Data.dc.gov

Data.dc.gov screenshot

  When I first opened
a shapefile

Shapefile screenshot

  When I Opened
a KML fille

KML screenshot

  ..and down the rabbit hole

KMZ Screenshot

  When I finally opened
a GeoJSON file

GeoJSON Screenshot

  How it works

  1. Commit a .geojson file to GitHub
  2. ??? 

  So easy this
adorable kitten can do it

ipad

  What about our
license map?

  Why?

  Why GeoJSON

  • No API to learn
  • No SDK to install
  • No license to :moneybag:
  • Open & Interoperable
  • It’s the Internet

  Why maps

where.gov is a simple government as a platform solution built entirely on git. In this solution, all vector based polygons are stored in git repositories as GeoJSON files. Git serves as a collaborative version control system such that every data element has a universal resource locator. Anyone would have the opportunity to add and maintain data and edit data.

View → Edit → Collaborate

Treating data as code

  DC wifi social

  Open Flu shot spec

  GeoJSON.io

Edit GeoJSON

  How GeoJSON Rendering at GitHub came to be

Feb. 20, 2013 Concept of Where.gov
Mar. 10, 2013 Started at GitHub
Apr.  3, 2013 50 LoC, working prototype
May  22, 2013 Staff ship
Jun. 13, 2013 GenPop ship
Jun. 26, 2013 TopoJSON, extensions, clustering, embeds
Aug.  7, 2013 Gist support
Sept 19, 2013 Previews while editing
Feb.  5, 2014 Diffs, Simple Style Spec support
July 23, 2014 Source toggle

  Zoom, enhance

Jun. 26, 2013 TopoJSON, extensions, clustering, embeds
July 18, 2013 Gist PR opened
July 25, 2013 Gist staff shipped
Aug.  7, 2013 Gist support

  The prototype

prototype

  ~50 lines of glue

prototype

  Hello world

prototype output

  The “Secret Sauce”

  1. GitHub.com generates iframe markup
    (+ timed, scoped token, all params passed via URL)
  2. Render generates an ERB template
  3. User makes API request for data
  4. User makes API request to Mapbox for tiles
  5. User renders the map in browser

  Version control asks

Who made what change, when?

  A diff prototype

diff prototype

  GeoJSON Diff

GeoJSON Diff

(rgeo, rgeo-geojson, geos, ffi-geos, & diffy)

  GeoJSON diff usage 

diff = GeojsonDiff.new geojson_before, geojson_after

diff.added
# => {"type":"Feature"... (valid GeoJSON representing added geometries)

diff.removed
# => {"type":"Feature"... (valid GeoJSON representing removed geometries)

diff.unchanged
# => {"type":"Feature"... (valid GeoJSON representing unchanged geometries)

  Diff meta

  • _geojson_diff namespace
  • type - added, removed, unchanged
  • added, removed, changed — array of property keys
  • Changed properties represented as HTML diff

  Before

Before

  After

After

  The difference

Difference

  Added and Removed

Difference

  A familiar look

Added and removed on GitHub

  The Oregon Trail

Oregon Trail

  Diffing
congressional districts

IL 3rd district diffed

  Diffing forest fires

National Park Service Forrest Fire Diff

  Usage

  GeoJSON files on GitHub

  • Several thousand GeoJSON files in March 2013
  • ~200k GeoJSON/Topojson files today
  • 1M+ JSON files with GeoJSON in them

  ~3M views

views

Top use cases: Blog, Gist, Embeds — people who don’t normally make maps

  Daily activity

activity

  Map all the things!

githubbers

Democratizing mapping internally

who's in portland

  What’s next

  • GitHub Enterprise
  • ???

Open source, open standards, and 50 lines of code

A look behind GitHub’s GeoJSON rendering and diffing