/src
hello-world.html
$ python -m SimpleHTTPServer 8000
script
YOUR_API_KEY
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"> </script>
http://localhost:8000/hello-world.html
<head>
<head> <title>Google Maps and deck.gl - Hello, World!</title> <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script> ... </head>
<title>Google Maps and deck.gl - Hello, World!</title>
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
...
</head>
index.html
<script type="text/javascript"> const nyc = { lat: 40.75097, lng: -73.98765 }; const map = new google.maps.Map(document.getElementById('map'), { center: nyc, zoom: 14, disableDefaultUI: true, // de-clutters the UI zoomControl: true, // brings back zoom controls styles: mapStyle // use map styles from /styles/map_styles.js }); </script>
<script type="text/javascript">
const nyc = { lat: 40.75097, lng: -73.98765 };
const map = new google.maps.Map(document.getElementById('map'), {
center: nyc,
zoom: 14,
disableDefaultUI: true, // de-clutters the UI
zoomControl: true, // brings back zoom controls
styles: mapStyle // use map styles from /styles/map_styles.js
});
</script>
GoogleMapsOverlay
ScatterplotLayer
<script type="text/javascript"> const { GoogleMapsOverlay, ScatterplotLayer } = deck; ... </script>
const { GoogleMapsOverlay, ScatterplotLayer } = deck;
... const deckOverlay = new GoogleMapsOverlay({ layers: [ new ScatterplotLayer({ id: 'scatterplot', data: [{ position: [nyc.lng, nyc.lat, 0], }], getRadius: 20, getFillColor: [255, 133, 27] }) ] }); deckOverlay.setMap(map);
const deckOverlay = new GoogleMapsOverlay({
layers: [
new ScatterplotLayer({
id: 'scatterplot',
data: [{ position: [nyc.lng, nyc.lat, 0], }],
getRadius: 20,
getFillColor: [255, 133, 27]
})
]
deckOverlay.setMap(map);
SELECT longitude, latitude, name, capacity FROM `bigquery-public-data.new_york_citibike.citibike_stations`
SELECT
longitude,
latitude,
name,
capacity
FROM
`bigquery-public-data.new_york_citibike.citibike_stations`
SAVE RESULTS
JSON (local file)
stations.json
getPosition
getFillColor
getRadius
const deckOverlay = new GoogleMapsOverlay({ layers: [ new ScatterplotLayer({ id: 'scatterplot', data: './stations.json', getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)], getFillColor: d => [255, 133, 27], getRadius: d => parseInt(d.capacity), }) ] });
data: './stations.json',
getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
getFillColor: d => [255, 133, 27],
getRadius: d => parseInt(d.capacity),
scatterplot.html
