Skip to main content

GoogleMapsOverlay

This class implements the OverlayView/WebGLOverlayView (depending on map rendering type) interface and can be used as any other Google Maps overlay.

Vector/Raster maps

As detailed in the overview, the overlay supports both Vector and Raster Google map rendering. Depending on the Google Map configuration, the correct deck.gl overlay rendering method will be chosen at runtime.

Usage

  import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps';
import {GeoJsonLayer} from '@deck.gl/layers';

// Create map
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40, lng: -100 },
zoom: 5,
mapId: GOOGLE_MAP_ID // Only required for Vector maps
});

// Create overlay instance
const overlay = new DeckOverlay({
layers: [
new GeoJsonLayer({
...
})
]
});
// Add overlay to map
overlay.setMap(map);

Constructor

const overlay = new GoogleMapsOverlay(props)

props are forwarded to a Deck instance. The following Deck props are supported:

  • style
  • layers
  • effects
  • parameters
  • pickingRadius
  • useDevicePixels
  • onWebGLInitialized
  • onBeforeRender
  • onAfterRender
  • onLoad

The constructor additionally accepts the following option:

  • interleaved (Boolean) - When set to false, a dedicated deck.gl canvas is layered on top of the base map. If set to true and the Google Map is configured for Vector rendering, deck.gl layers are inserted into the Google Maps layer stack, sharing the same WebGL2RenderingContext. Default is true.

Methods

setMap
overlay.setMap(map);

Add/remove the overlay from a map. An overlay can be temporarily hidden from a map by calling setMap(null). Removing an overlay does not destroy the WebGL2 context; use finalize() if the overlay should be permanently removed.

setProps
overlay.setProps(props);

Update (partial) props.

pickObject

Equivalent of deck.pickObject.

pickObjects

Equivalent of deck.pickObjects.

pickMultipleObjects

Equivalent of deck.pickMultipleObjects.

finalize
overlay.finalize();

Remove the overlay and release all underlying resources.

getCanvas

See Deck.getCanvas. When using interleaved: true, returns the base map's canvas.