19

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?

Improve this question
4

6 Answers 6

Reset to default
10

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));
Improve this answer
1
  • 1
    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);
    – Julian Bogdani
    May 21, 2019 at 11:00
6

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

Improve this answer
4
  • 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, 2014 at 23:27
  • Thanks, but I'm looking for a non-WebGL solution.
    – knutole
    Mar 19, 2014 at 1:17
  • 1
    No worries, just wanted to give you a heads-up.
    – Robin Hawkes
    Mar 20, 2014 at 22:06
  • Does this version have the plots or any improved version?
    – joker
    Nov 1, 2017 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

Improve this answer
3
  • Thanks a lot. But this requires WebGL, right?
    – knutole
    Mar 20, 2014 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, 2014 at 21:40
  • 1
    and yes, threejs only works in browsers supported by WebGL.
    – sigon
    Mar 20, 2014 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.

Improve this answer
2
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/

Improve this answer
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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