Skip to content

Instantly share code, notes, and snippets.

@padawannn

padawannn/index.html

Created September 11, 2020 07:42
Show Gist options
  • Save padawannn/e375e5308e72fc4c2869a35ee0882dc5 to your computer and use it in GitHub Desktop.
Save padawannn/e375e5308e72fc4c2869a35ee0882dc5 to your computer and use it in GitHub Desktop.
Download ZIP
deckgl-example-with-basemap
Raw
index.html
<html>
<head>
<!-- deck.gl standalone bundle -->
<script src="https://unpkg.com/deck.gl@^8.2.8/dist.min.js"></script>
<!-- Mapbox dependencies -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />
<style type="text/css">
body {margin: 0; padding: 0;}
#map {width: 100vw; height: 100vh;}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
const COLORS = {
ONE_MILLION: [207, 89, 126],
HUNDRED_THOUSAND: [232, 133, 113],
TEN_THOUSAND: [238, 180, 121],
THOUSAND: [233, 226, 156],
HUNDRED: [156, 203, 134],
TEN: [57, 177, 133],
OTHER: [0, 147, 146]
};
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
initialViewState: {
latitude: 40.7368521,
longitude: -73.9936065,
zoom: 8
},
controller: true,
layers: [
new deck.MVTLayer({
data: [
'https://bq1.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_19257_19396_24574_24697_4000_1&t=cartobq.maps.nyc_taxi_points_demo_id',
'https://bq2.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_19257_19396_24574_24697_4000_1&t=cartobq.maps.nyc_taxi_points_demo_id',
'https://bq3.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_19257_19396_24574_24697_4000_1&t=cartobq.maps.nyc_taxi_points_demo_id',
'https://bq4.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_19257_19396_24574_24697_4000_1&t=cartobq.maps.nyc_taxi_points_demo_id'
],
getFillColor: object => {
if (object.properties.aggregated_total > 1000000) {
return COLORS.ONE_MILLION;
} else if (object.properties.aggregated_total > 100000) {
return COLORS.HUNDRED_THOUSAND;
} else if (object.properties.aggregated_total > 10000) {
return COLORS.TEN_THOUSAND;
} else if (object.properties.aggregated_total > 1000) {
return COLORS.THOUSAND;
} else if (object.properties.aggregated_total > 100) {
return COLORS.HUNDRED;
} else if (object.properties.aggregated_total > 10) {
return COLORS.TEN;
} else {
return COLORS.OTHER;
}
},
pointRadiusMinPixels: 2,
stroked: false
})
]
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment