Last active
May 6, 2019 20:11
-
-
Save Pessimistress/2b2dee8d3aa01d31bb97ca2671690af9 to your computer and use it in GitHub Desktop.
Google Maps example: Trees in Paris
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> | |
| <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> | |
| <script src="https://d3js.org/d3.v5.min.js"></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> | |
| <script id="map-style" type="application/json"> | |
| [ | |
| { | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#212121"}] | |
| }, | |
| { | |
| "elementType": "labels.icon", | |
| "stylers": [{"visibility": "off"}] | |
| }, | |
| { | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#757575"}] | |
| }, | |
| { | |
| "elementType": "labels.text.stroke", | |
| "stylers": [{"color": "#212121"}] | |
| }, | |
| { | |
| "featureType": "administrative", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#757575"}] | |
| }, | |
| { | |
| "featureType": "administrative.country", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#9e9e9e"}] | |
| }, | |
| { | |
| "featureType": "administrative.locality", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#bdbdbd"}] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#757575"}] | |
| }, | |
| { | |
| "featureType": "poi.park", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#181818"}] | |
| }, | |
| { | |
| "featureType": "poi.park", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#616161"}] | |
| }, | |
| { | |
| "featureType": "poi.park", | |
| "elementType": "labels.text.stroke", | |
| "stylers": [{"color": "#1b1b1b"}] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "geometry.fill", | |
| "stylers": [{"color": "#2c2c2c"}] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#8a8a8a"}] | |
| }, | |
| { | |
| "featureType": "road.arterial", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#373737"}] | |
| }, | |
| { | |
| "featureType": "road.highway", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#3c3c3c"}] | |
| }, | |
| { | |
| "featureType": "road.highway.controlled_access", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#4e4e4e"}] | |
| }, | |
| { | |
| "featureType": "road.local", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#616161"}] | |
| }, | |
| { | |
| "featureType": "transit", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#757575"}] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "geometry", | |
| "stylers": [{"color": "#000000"}] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "labels.text.fill", | |
| "stylers": [{"color": "#3d3d3d"}] | |
| } | |
| ] | |
| </script> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <div id="tooltip"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| // source: Paris Open Data https://opendata.paris.fr/ | |
| const DATA = d3.dsv(';', 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scatterplot/les-arbres.csv', row => { | |
| row.LONGITUDE *= 1; | |
| row.LATITUDE *= 1; | |
| row['CIRCONFERENCE(CM)'] *= 1; | |
| if (row['CIRCONFERENCE(CM)'] > 5000) { | |
| // discard abnormalies | |
| row['CIRCONFERENCE(CM)'] = 0; | |
| } | |
| return row; | |
| }); | |
| 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.LIBELLEFRANCAIS; | |
| } else { | |
| tooltip.style.display = 'none'; | |
| } | |
| } | |
| const map = new google.maps.Map(document.getElementById('container'), { | |
| center: {lat: 48.868, lng: 2.312}, | |
| zoom: 15, | |
| styles: JSON.parse(document.getElementById('map-style').innerText), | |
| mapTypeControlOptions: { | |
| mapTypeIds: ['roadmap'] | |
| } | |
| }); | |
| const colors = d3.scaleOrdinal([ | |
| [141,211,199], | |
| [255,255,179], | |
| [190,186,218], | |
| [251,128,114], | |
| [128,177,211], | |
| [253,180,98], | |
| [179,222,105], | |
| [252,205,229], | |
| [217,217,217], | |
| [188,128,189], | |
| [204,235,197], | |
| [255,237,111] | |
| ]); | |
| const deckOverlay = new deck.GoogleMapsOverlay({ | |
| layers: [ | |
| new deck.ScatterplotLayer({ | |
| data: DATA, | |
| getPosition: d => [d.LONGITUDE, d.LATITUDE], | |
| getRadius: d => d['CIRCONFERENCE(CM)'] / 100, | |
| pickable: true, | |
| onHover: setTooltip, | |
| radiusMinPixels: 1, | |
| getColor: d => colors(d.LIBELLEFRANCAIS) | |
| }) | |
| ] | |
| }); | |
| deckOverlay.setMap(map); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment