Skip to content

Instantly share code, notes, and snippets.

@jatorre
Last active July 19, 2020 22:19
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jatorre/d48e23d36179f7c8acab37166b11be85 to your computer and use it in GitHub Desktop.
<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