12

Are there any JS library out there that would render normal, flat maps (like Leaflet) into a perspective map like this one, on the web:

enter image description here

Also, anyone seen anything that could turn CartoDB data into 3D representation, like this?

6

Maybe you could use Osmbuildings. Its a JavaScript library for visualizing OpenStreetMaps (or custom GeoJSON) building geometry into a 3D perspective.

OSMbuildingJS

It use OpenStreetMaps data directly. Just add the loadData() method:

var map = new L.Map('map').setView([52.50440, 13.33522], 17);
var osmb = new OSMBuildings(map).loadData();
L.control.layers({}, { Buildings:osmb }).addTo(map); // add to layer switcher (optional)

Or, you could load your own GeoJSON. Just change the loadData() method to the setData(geojson):

var osmb = new OSMBuildings(map).setData(geoJSON);

Your data need to have a height property, and you can change the wall and roof color dynamically:

osmb.setStyle({ 
     wallColor:'rgba(100, 100, 250, 0.701961)', 
     roofColor:'rgb(220, 220, 50)', 
     shadows:true 
});

And even change the shadow perspective by setting daytime:

osmb.setDate(new Date(2014, 3, 24, 13, 0));
  • The current version of OSM Buildings (0.2.2b) does not support setData method, but set works! It tjus becomes: var osmb = new OSMBuildings(map).setData(geoJSON); – bradypus May 21 at 11:00
4

This is one of the primary use-cases for ViziCities (3D cities in the browser powered by OpenStreetMap), although the data layers aren't currently working yet. Perhaps something to consider for the future: https://github.com/robhawkes/vizicities

Disclaimer: I'm the developer of ViziCities

  • 1
    Cool project! Also, while it is fairly obvious that this is a project you are affiliated with, you might want to just make that a little more clear (even if it's open source). – blah238 Mar 18 '14 at 23:27
  • Thanks, but I'm looking for a non-WebGL solution. – knutole Mar 19 '14 at 1:17
  • 1
    No worries, just wanted to give you a heads-up. – Robin Hawkes Mar 20 '14 at 22:06
  • Does this version have the plots or any improved version? – joker21 Nov 1 '17 at 3:06
2

You can use OSM2world to pass 2D data from OpenStreetMap (map.osm) to 3D objects (map.obj), then use another converter (convert_obj_three.py) to convert it into a threejs JSON model (map.js), and then use it in a threejs scene.

You can see how here:

https://www.youtube.com/watch?v=S6LbKH6NnZU

  • Thanks a lot. But this requires WebGL, right? – knutole Mar 20 '14 at 19:09
  • 1
    Threejs it's a javascript library/api that take advantage of WebGL. But in the code you only have to include two libs: three.js and OrbitControls.js (this it's to manage the camera orbit). – sigon Mar 20 '14 at 21:40
  • 1
    and yes, threejs only works in browsers supported by WebGL. – sigon Mar 20 '14 at 21:48
1

The closest I've seen is the work of Mike Bostock.

He has a really cool map which has a kind of oblique projection.

But there's nothing that makes it easy. D3 does my head in with respect to setting up projections. You can make amazing things if you work at it though.

1

http://osm2world.org/ works without WebGL, but uses Java instead of js.

Designed for output of Openstreetmap buildings data, it should be adoptable for other 3D data as well.

The output is a slippy map similar to leaflet: http://maps.osm2world.org/

1

Well, with CartoDB you can do something like this http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

You have to use this CartoCSS parameter: { building-height: 512; }

More info here: https://github.com/CartoDB/cartodb-pluto

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.