Created
January 11, 2018 07:45
-
-
Save alasarr/858d387814d450bb3d68f49fab2cf81e to your computer and use it in GitHub Desktop.
Manhattan 3D building filling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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', | |
| 'source': 'cartoSource', | |
| 'source-layer': 'cartoLayer', | |
| 'paint': { | |
| 'fill-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