Skip to content

Instantly share code, notes, and snippets.

@alasarr
Last active January 11, 2018 07:45
Show Gist options
  • Save alasarr/496605f141e5be3af1f335255734d9c5 to your computer and use it in GitHub Desktop.
Save alasarr/496605f141e5be3af1f335255734d9c5 to your computer and use it in GitHub Desktop.
Manhattan 3D building extrusion
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL CARTO Building</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/nanoajax/0.4.3/nanoajax.min.js'></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'http://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
center: [-74.000271, 40.7191704],
zoom: 14,
pitch: 60
});
map.on('load', function () {
var sql = 'SELECT the_geom_webmercator,cartodb_id,numfloors * 4 as height,yearbuilt, assesstot FROM cayetano.mnmappluto_red2';
var username = 'cayetano';
//Direct call to the CARTO Maps API, now with Mapbox Vector Tiles support
//https://carto.com/docs/carto-engine/maps-api/
var mapConfig = {
layers:[ {
id: 'cartoLayer',
options:{
sql:sql
}
}
]};
mapConfig = encodeURIComponent(JSON.stringify(mapConfig));
nanoajax.ajax({
url:'https://'+username+'.carto.com/api/v1/map?config='+mapConfig},
function (code, resp){
cartoLayer = JSON.parse(resp);
cartoSource = {
type: 'vector',
tiles: cartoLayer.metadata.tilejson.vector.tiles,
};
map.addSource('cartoSource', cartoSource);
map.addLayer({
'id': 'cartoPointLayer',
'type': 'fill-extrusion',
'source': 'cartoSource',
'source-layer': 'cartoLayer',
'paint': {
'fill-extrusion-height': {
'property': 'height',
'type': 'identity'
},
'fill-extrusion-opacity': 0.85,
'fill-extrusion-color': {
'property': 'yearbuilt',
'type': 'exponential',
'stops': [[1940, '#E5E4C7'] , [1960, '#C9DAC1'] , [1980, '#AED0BA'] , [2000, '#92C6B3'] , [2020, '#76BCAD']]
}
}
},'place_town');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment