3D perspective on maps in Leaflet, CartoDB?

Question

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?

I'm not sure about integration with cartodb, but I recently saw this post about making 3D maps from QGIS using the three.js library. You may want to take a look at that. — RyanKDalton, Mar 18 '14 at 14:55
And a couple of articles to look into: Render Geographic Information in 3D With Three.js and D3.js, and Showing GPS tracks in 3D with three.js and d3.js — RyanKDalton, Mar 18 '14 at 15:05
Maybe you find this visualization useful: http://pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/embed_map — javisantana, Mar 19 '14 at 10:54

score 10 · Answer 1 · answered Apr 24 '14 at 11:28

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); — Julian Bogdani, May 21 '19 at 11:00

Robin Hawkes · Answer 2 · 2014-03-20T22:05:47.967

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

edited Mar 20 '14 at 22:05

answered Mar 18 '14 at 23:17

Robin Hawkes

1,035
2
9
18

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 01: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? – joker Nov 01 '17 at 03:06

score 2 · Answer 3 · answered Mar 20 '14 at 18:00

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

answered Mar 20 '14 at 18:00

sigon

303
1
8

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

score 1 · Answer 4 · answered Jun 11 '14 at 08:53

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

answered Jun 11 '14 at 08:53

Óscar Martínez

21
3

score 1 · Answer 5 · answered Mar 18 '14 at 23:33

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.

answered Mar 18 '14 at 23:33

Alex Leith

13,453
30
69

OK, how does Mike do that?? Thanks for tip – knutole Mar 19 '14 at 01:16
Like this: https://bl.ocks.org/mbostock/3790444 – John Haugeland May 04 '16 at 16:53

score 1 · Answer 6 · answered Mar 19 '14 at 05:18

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/

answered Mar 19 '14 at 05:18

AndreJ

76,698
5
86
162

3D perspective on maps in Leaflet, CartoDB?

6 Answers6