Skip to main content

DeckGL Integration

Using the Map as a child of DeckGL

To use with the Map component wrap the Map component with the DeckGL React component.

The following props need to be defined and passed to the DeckGL component:

  • intialViewState
  • layers
  • controller
  • onViewStateChange

Make sure that the controller is always set to true and an initial view state is defined. To ensure that works well with the Google map, set the limitTiltRange function, which can be imported from library, to onViewStateChange.

import {limitTiltRange} from '';

const App = () => (
<APIProvider apiKey={'Your API key here'}>

Using GoogleMapsOverlay

Alternatively, you can also use the GoogleMapsOverlay provided by the package to render content via Maps API WebGlOverlayView. An example for this can be found in ./examples/deckgl-overlay.

For this you have to implement your own component and add it to the Map component. A simplified version of this would be:

import {useEffect, useMemo} from 'react';
import {useMap} from '';
import {GoogleMapsOverlay} from '';

export const DeckGlOverlay = ({layers}) => {
const deck = useMemo(() => new GoogleMapsOverlay({interleaved: true}), []);

const map = useMap();
useEffect(() => {

return () => deck.setMap(null);
}, [map]);
useEffect(() => deck.setProps({layers}), [layers]);

// no dom rendered by this component
return null;

const App = () => (
<APIProvider apiKey={API_KEY}>
<Map {...mapProps}>
<DeckGlOverlay layers={deckGlLayers} />