Created
July 19, 2020 22:19
This file contains 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
| <html> | |
| <head> | |
| <!-- deck.gl standalone bundle --> | |
| <script src="https://unpkg.com/deck.gl@^8.2.2/dist.min.js"></script> | |
| <!-- Google Maps dependencies --> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxXV2PyJHev2jX5w6X3UAqNQ97t1fg0vU&libraries=visualization"></script> | |
| <style type="text/css"> | |
| body {margin: 0; padding: 0;} | |
| #container {width: 100vw; height: 100vh;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| const map = new google.maps.Map(document.getElementById('container'), { | |
| center: {lat: 40.74528892698134, lng: -73.96491817377682}, | |
| zoom: 12, | |
| styles: [ | |
| { | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#f5f5f5" | |
| } | |
| ] | |
| }, | |
| { | |
| "elementType": "labels.icon", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#616161" | |
| } | |
| ] | |
| }, | |
| { | |
| "elementType": "labels.text.stroke", | |
| "stylers": [ | |
| { | |
| "color": "#f5f5f5" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.land_parcel", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.land_parcel", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#bdbdbd" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.neighborhood", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#eeeeee" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "labels.text", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#757575" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi.business", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi.park", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#e5e5e5" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi.park", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#9e9e9e" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#ffffff" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "labels", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "labels.icon", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.arterial", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#757575" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.highway", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#dadada" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.highway", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#616161" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.local", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#9e9e9e" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "transit", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "transit.line", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#e5e5e5" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "transit.station", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#eeeeee" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#c9c9c9" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "labels.text", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "color": "#9e9e9e" | |
| } | |
| ] | |
| } | |
| ] | |
| }); | |
| const layer = new window.deck.MVTLayer({ | |
| data: [ | |
| "https://bqtiler.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p=0_14_900_5145_4249_7314_4000_1&t=cartobq.maps.msft_buildings", | |
| "https://bqtiler2.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p=0_14_900_5145_4249_7314_4000_1&t=cartobq.maps.msft_buildings", | |
| "https://bqtiler3.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p=0_14_900_5145_4249_7314_4000_1&t=cartobq.maps.msft_buildings", | |
| "https://bqtiler4.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p=0_14_900_5145_4249_7314_4000_1&t=cartobq.maps.msft_buildings" | |
| ], | |
| getFillColor: [244, 0, 245], | |
| pointRadiusMinPixels:2.5, | |
| stroked: true, | |
| minZoom: 0, | |
| maxZoom: 14 | |
| }); | |
| const deckOverlay = new deck.GoogleMapsOverlay({ | |
| layers: [layer] | |
| }); | |
| function colorToRGBArray(value) { | |
| if(value==1) {return [0, 147, 146];} | |
| else if(value<10) {return [57, 177, 133]} | |
| else if(value<100) {return [156, 203, 134]} | |
| else if(value<1000) {return [233, 226, 156]} | |
| else if(value<10000) {return [238, 180, 121]} | |
| else if(value<100000) {return [232, 132, 113]} | |
| else {return [207, 89, 126]} | |
| } | |
| deckOverlay.setMap(map); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment