[GIS] 3D perspective on maps in Leaflet, CartoDB

3dcartojavascriptleaflet

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?

Best Answer

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));
Related Question