Skip to content
gh-pages
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
js
 
 
 
 
 
 

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

About

GeoJSON & TopoJSON in 3D, with Three.js

Resources

Releases

No releases published

Packages

No packages published