Skip to content

Instantly share code, notes, and snippets.

@Pessimistress
Last active June 18, 2019 21:42
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Pessimistress/b5e9b86cd0f69ea69f20150734d4e2b6 to your computer and use it in GitHub Desktop.
deck.gl GoogleMapOverlay example
<html>
<head>
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM&libraries=visualization&v=3.34"></script>
<style type="text/css">
body {margin: 0; padding: 0; overflow: hidden;}
#container {width: 100vw; height: 100vh;}
#tooltip {position: absolute; z-index: 1; background: #000; color: #fff; font-family: sans-serif; font-size: 11px; padding: 4px; padding: 8px; pointer-events: none;}
</style>
</head>
<body>
<div id="container"></div>
<div id="tooltip"></div>
</body>
<script type="text/javascript">
// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const AIR_PORTS =
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
function setTooltip({x, y, object}) {
const tooltip = document.getElementById('tooltip');
if (object) {
tooltip.style.display = 'block';
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
tooltip.innerHTML = object.properties.name;
} else {
tooltip.style.display = 'none';
}
}
const map = new google.maps.Map(document.getElementById('container'), {
center: {lat: 51.47, lng: 0.45},
zoom: 5
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.GeoJsonLayer({
id: 'airports',
data: AIR_PORTS,
filled: true,
pointRadiusMinPixels: 2,
opacity: 1,
pointRadiusScale: 2000,
getRadius: f => (11 - f.properties.scalerank),
getFillColor: [200, 0, 80, 180],
pickable: true,
autoHighlight: true,
onHover: setTooltip
}),
new deck.ArcLayer({
id: 'arcs',
data: AIR_PORTS,
dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
getSourcePosition: f => [-0.4531566,51.4709959], // London
getTargetPosition: f => f.geometry.coordinates,
getSourceColor: [0, 128, 200],
getTargetColor: [200, 0, 80],
getWidth: 1
})
]
});
deckOverlay.setMap(map);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment