Maptime Amsterdam #6: GeoJSON 3D!

http://maptime-ams.github.io/geojson-3d/

Display GeoJSON in 3D in the browser, using Three.js. Made for Maptime Amsterdam #6.

Use git clone https://github.com/maptime-ams/geojson-3d.git to clone this tutorial, run a webserver in the project's directory (python -m SimpleHTTPServer, for example), and open http://localhost:8000. Edit index.html to tweak the lights, materials and camera used in this tutorial. Some basic Three.js materials are included in the source code. You can set a Feature's material in the addFeature function.

Usage

With http://maptime-ams.github.io/geojson-3d/, you can load a GeoJSON or TopoJSON file from a URL, and style the features using Javascript functions (just like D3).

Simple function, always return the same color:

function(d) {
  return '#0ef1f4';
}

Simple function, always return the same color:

function(d) {
  if (d.jaar <= 1200) {
    return '#67001f';
  } else if (d.jaar <= 1350) {
    return '#b2182b';
  } else if (d.jaar <= 1500) {
    return '#d6604d';
  } else if (d.jaar <= 1650) {
    return '#f4a582';
  } else if (d.jaar <= 1750) {
    return '#fddbc7';
  } else if (d.jaar <= 1850) {
    return '#d1e5f0';
  } else if (d.jaar <= 1900) {
    return '#92c5de';
  } else if (d.jaar <= 1950) {
    return '#4393c3';
  } else if (d.jaar <= 1980) {
    return '#2166ac';
  } else if (d.jaar <= 2010) {
    return '#053061';
  }
}

function(d) {
  var color = d3.scale.ordinal()
    .range([
      "#ffffe5",
      "#f7fcb9",
      "#d9f0a3",
      "#addd8e",
      "#78c679",
      "#41ab5d",
      "#238443",
      "#006837",
      "#004529"
    ])
    .domain(d3.range(0, 8000));
  return color(d.BEV_DICHTH);
}

If you don't remember your Feature's properties, you can use console.log(d) to output them to the developer console:

function(d) {
  console.log(d);
  return 'red';
}

Examples

• Dutch municipalities (uses municipalities.json)
• Buildings in Amsterdam with complex geometries (many points) (uses buildings.json, also used on maptime-ams.github.io)
• Growth of the city of Breda (uses breda.json, from [Histograph](http://histograph.io/viewer/#search=breda type=hg:Place))

Disable Three.js warnings

You can disable warnings in your browsers' developer console:

Useful links

• http://tulpinteractive.com/amsterdam-campus/
• http://www.smartjava.org/content/render-geographic-information-3d-threejs-and-d3js
• http://threejs.org/examples/webgl_geometry_shapes.html
• http://threejs.org/examples/webgl_geometry_extrude_shapes2.html

Data

• Centraal Bureau voor de Statistiek
• Natural Earth
• OpenStreetMap, using Overpass Turbo (and choosing Save as GeoJSON...)

Example Overpass query:

[out:json];
way[natural=water](around:5000,52.36740138260664,4.8985666036605835);
(._;>;);
out;

Colors!

Use http://colorbrewer2.org/!

TopoJSON

You can convert large GeoJSON files to TopoJSON, this will make them much smaller and easier to handle for web browsers. (And you can convert Shapefiles to GeoJSON with shp2json.)

Usage:

topojson -p -s 1e-8 -o municipalities.topojson municipalities.geojson