Skip to content
GeoJSON & TopoJSON in 3D, with Three.js
Branch: gh-pages
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Almost! Apr 15, 2015
data Almost! Apr 15, 2015
fonts Almost! Apr 15, 2015
images added MORE readme Apr 15, 2015
js Almost! Apr 15, 2015
README.md added console.log readme Apr 15, 2015
index.html yes Apr 15, 2015

README.md

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

Disable Three.js warnings

You can disable warnings in your browsers' developer console:

Useful links

Data

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
You can’t perform that action at this time.