Created
September 12, 2020 04:50
-
-
Save dianaow/7a462cbba29daeb489a03cc0f90fa80b to your computer and use it in GitHub Desktop.
Using deck.gl with Google Maps
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> | |
| <title>Using deck.gl with Google Maps</title> | |
| <script src="https://d3js.org/d3.v5.min.js" type="text/javascript"></script> | |
| <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script> | |
| <script defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap"></script> | |
| <style type="text/css"> | |
| body { | |
| width: 100vw; | |
| height: 100vh; | |
| margin: 0; | |
| position: relative; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; // do not forget to declare the height of the map div | |
| } | |
| #tooltip { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 2; | |
| background-color: white; | |
| visibility: visible; | |
| padding: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <div id='tooltip'><div> | |
| </body> | |
| <script type="text/javascript"> | |
| const {DeckGL, ScatterplotLayer, HeatmapLayer, GoogleMapsOverlay} = deck; | |
| function initMap() { | |
| d3.json("data.json").then(function(data){ | |
| function initHeatmapLayer(){ | |
| return new HeatmapLayer({ | |
| data, | |
| id: 'heatmap-layer', | |
| getPosition: d => [+d.lon, +d.lat], | |
| getWeight: 1, | |
| colorRange: [[1, 152, 189, 255], [73, 227, 206, 255], [216, 254, 181, 255], [254, 237, 177, 255],[254, 173, 84, 255],[209, 55, 78, 255]], | |
| radiusPixels: 20, | |
| intensity: 1.2, | |
| threshold: 0.03 | |
| }) | |
| } | |
| function initScatterLayer(){ | |
| return new ScatterplotLayer({ | |
| id: 'scatter-plot', | |
| data, | |
| getPosition: d => [+d.lon, +d.lat], | |
| getFillColor: [1, 152, 189, 255], | |
| //getRadius: 500, | |
| radiusScale: 1, | |
| radiusMaxPixels: 10, | |
| radiusMinPixels: 5, | |
| opacity: 0.5, | |
| pickable: true, | |
| //onHover: info => showTooltip(info), | |
| onClick: info => showTooltip(info) | |
| }) | |
| } | |
| const map = new google.maps.Map(document.getElementById('map'), { | |
| center: { lat: 1.35, lng: 103.84 }, | |
| zoom: 12 | |
| }) | |
| //https://medium.com/vis-gl/using-deck-gl-with-google-maps-9c868d18e3cd | |
| const deckgl = new GoogleMapsOverlay({ | |
| layers: [ | |
| initHeatmapLayer() | |
| ], | |
| controller: true | |
| }); | |
| deckgl.setMap(map) | |
| map.addListener("zoom_changed", event => { | |
| const zoom = map.getZoom() // in Google Maps, the zoom_changed event is fired only once when zoom happens, and the map.getZoom method only returns the target (integer) zoom level. This means there’s no way for deck.gl to stay synchronized with Google’s transition animation between zoom levels. | |
| d3.select('#tooltip').style('visibility', 'hidden') | |
| if(zoom > 14){ | |
| deckgl.setProps({layers: [initScatterLayer()]}); | |
| } else { | |
| deckgl.setProps({layers: [initHeatmapLayer()]}); | |
| } | |
| }); | |
| function showTooltip(info){ | |
| d3.select('#tooltip') | |
| .style('top', info.y) | |
| .style('left', info.x) | |
| .style('visibility', 'visible') | |
| .html(`<p>${info.object.town}</p><p>${info.object.address}</p>`) | |
| } | |
| }) | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment