This example app shows how you can use the Maps Javascript API with the Deck.gl OSS framework to render high-quality 3D data visualizations on top of Google Maps.
To see the demo running live, go to https://goo.gle/deckgl-demos. Please be patient while the data loads for each layers. In some cases, hundreds of thousands of data points are being fetched over http.
To run it on localhost, do the following:
-
Download the repo.
-
Set your API key in a
GoogleMapsAPIKeyenvironment variable or at the top ofapp.jsin theGOOGLE_MAPS_API_KEYconstant. -
Run
npm installto download dependencies. -
Run
npm start.
Your browser will open to http://localhost:8080.
Make sure that your API key is valid and doesn't have any restrictions that would prevent it making calls to the Maps JS API, Directions API, or Places API on localhost.
Also, the URIs for some of the city open data sources sometimes change. We try to keep them updated but if you find them out of date a quick search of one of the datasources below can get you an updated URI to plug into the demo.
There are three main pieces to this project, all located in /src:
-
The
/example-layersdirectory is where all the different layer types and their accompanying logic are defined. Each layer is handled in the correspondingly named directory. -
GoogleMapsWithDeckGL.jsis where the logic for instantiating the Google base map and applying the deck.gl overlay to it happens. -
app.jssupplies the logic for the UI of the example app.
Primarily what you'll want to look at is /example-layers and GoogleMapsWithDeckGL, which are the pieces that show how deck.gl support works with the Maps JS API.
- This example app running live
- Google Maps JS API docs
GoogleMapsOverlaydeck.gl submodule docs- deck.gl docs
This demo uses a mix of open data from different cities, and Google Maps Platform APIs