Skip to content

maptime-ams/geojson-3d

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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