Deck.gl: Google Maps API sample

Created on 7 Nov 2017  路  10Comments  路  Source: visgl/deck.gl

Can you add a sample how to add deck.gl layers to Google Maps API? I would not be probably the only one interested on this.

help wanted

Most helpful comment

We are adding official support for Google Maps in v7.0 (currently in beta). See example.

All 10 comments

Hey did you figure out a way to integrate deck and google maps by any chance?

I would also be VERY interested since we plan to use https://github.com/apache/incubator-superset which is integrating deck.gl in their dashboards!

For Google Maps users: if you check this file:
https://github.com/uber/deck.gl/blob/master/examples/get-started/pure-js/app.js
The interface with Mapbox is fairly minimal. I imagine it wouldn't be that difficult to modify this example to replace mapbox-gl with Google Maps API. We'd be happy to add it to the get-started templates if you open a PR.

@Pessimistress , thanks for the pointer, I did a quick experiment and of course there are issues...
Mainly:

  • zoom levels are not strictly equivalent, and the one you use is the one of Mapbox
  • it is currently impossible to rotate a Map with Google Maps
  • tilt value range are also a bit different, and the one you use is the one of Mapbox
    The result is sadly pretty unusable with G maps...

@MeTaNoV
You can disable rotation in deck.gl by setting:

controller: {dragRotate: false}

See documentation.

Mapbox uses OpenStreetMap's tile index system. Google Maps is not open-sourced, and I have not researched its documentation. I do believe Google Maps also uses Web Mercator projection, so if there is a offset between the two zoom levels, it should be constant.

is a offset between the two zoom levels, it should be constant.

Yes.

FWIW, I did a test integration a long time ago (don't have the code). I seem to remember that there is a 2x difference in zoom so adding or removing one to the zoom level fixed the (non-tilted) alignment.

I did not try changing pitch.

I recall there was an issue with one of Google Map's overlay types, there was tearing when panning the map, that I didn't have time to dig in to.

@Pessimistress and @ibgreen , thanks for the additional information, I will tinker a bit more with it and eventually raise a PR with the result.

I'd also be VERY interested in this. I'm using Mapbox geocoding service but their data is really lacking. Per Google API ToS if I use their Geocoding API I have to switch to their maps as well.

We are adding official support for Google Maps in v7.0 (currently in beta). See example.

any example on how to update layer visibility on google maps?
for example I want to update this layer id: 'airports'
How should it be with overlay.setProps({layers: []}) ?
Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jacklam718 picture jacklam718  路  4Comments

TareqAlqutami picture TareqAlqutami  路  3Comments

SymbolixAU picture SymbolixAU  路  4Comments

ToddJacobus picture ToddJacobus  路  4Comments

jfuehner picture jfuehner  路  3Comments