[Doc] Updated example for using react-map-gl Components with DeckGL

[callumfrance]

Link

https://deck.gl/docs/whats-new#use-react-map-gl-components-with-deckgl

Description

Hey guys,

I am trying to use the react-map-gl controls (e.g. FullScreenControl) with a DeckGL component in React-TypeScript land.

The documentation makes reference to MapContext in react-map-gl, however this has since been changed out for useMap() and useControl() hooks as documented here, and as pointed out in this previous issue #6285 (comment) .

---

Here is what it looks like without using a DeckGL solution and just using react-map-gl components inside of DeckGL -

As you can see, there is a component in the DOM that covers the controls on the top-right.
This means these controls are not interactive.

Here is that code which clearly does not have working controls -

import { HexagonLayer } from '@deck.gl/aggregation-layers/typed';
import { DeckGL } from '@deck.gl/react/typed';
import {
  Map,
  ScaleControl,
  FullscreenControl,
  NavigationControl,
  AttributionControl,
} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const initialViewState = {
  longitude: 8.525,
  latitude: 47.394,
  zoom: 12,
  pitch: 40.5,
};

export interface Props {
  shownLayers: Array<HexagonLayer>;
}

export const MappyBoy = ({ shownLayers }: Props) => {
  return (
    <DeckGL layers={shownLayers} initialViewState={initialViewState} controller>
      <Map
        attributionControl={false}
        mapStyle="mapbox://styles/mapbox/light-v10"
        mapboxAccessToken=<TOKEN_HERE>
      >
        <NavigationControl position="top-right" />
        <FullscreenControl position="top-right" />
        <AttributionControl position="bottom-right" />
        <ScaleControl position="bottom-right" />
      </Map>
    </DeckGL>
  );
};

Can we get an updated example of how to make these controls work?

[Pessimistress]

https://deck.gl/docs/developer-guide/base-maps/using-with-mapbox#react-map-gl

[callumfrance]

Cool,

Using the example in https://deck.gl/docs/api-reference/mapbox/mapbox-overlay#using-with-react-map-gl

I was able to update my code to get it working as follows

import { HexagonLayer } from '@deck.gl/aggregation-layers/typed';
import { MapboxOverlay, MapboxOverlayProps } from '@deck.gl/mapbox/typed';
import { Box } from 'grommet';
import {
  Map,
  ScaleControl,
  FullscreenControl,
  NavigationControl,
  AttributionControl,
  useControl,
} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function DeckGLOverlay(props: MapboxOverlayProps) {
  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
  overlay.setProps(props);
  return null;
}

// ...

export const MappyBoy = ({ shownLayers }: Props) => {

  // ...

  return(
    <Box style={{ position: 'relative' }} fill>
      <Map
        attributionControl={false}
        initialViewState={initialViewState}
        mapStyle="mapbox://styles/mapbox/light-v10"
        mapboxAccessToken=""
      >
        <DeckGLOverlay layers={shownLayers} />
        <NavigationControl position="top-right" />
        <FullscreenControl position="top-right" />
        <AttributionControl position="bottom-right" />
        <ScaleControl position="bottom-right" />
      </Map>
    </Box>
   );
};

[jonenst]

Hi @Pessimistress , your docs improvements in #7124 in are clearly welcome, especially the very clear sentence
"To use deck.gl with react-map-gl v7's controls, you must use MapboxOverlay."

However, they contrast with the first paragraph of the page:
"[Using the Deck canvas as a overlay on top of the Mapbox map, and Deck as the root element.] is the most tested and robust use case, as you can find in all the examples on this website. It supports all the features of Deck."
"[Using the Deck canvas as a overlay on top of the Mapbox map] is favorable if you need to use other mapbox-gl controls and plugins in addition to deck.gl."

As a result I was confused as to why the recommended (root deck mode) mode just didn't work for basic features like NavigationControl with recent versions of react-map-gl.

Maybe you could also rework that section ? I see several possibilities

• Adding "with old react-map-gl versions" to "It supports all the features of Deck."
• Adding "and if you want to use the latest version of react-map-gl to "MapboxOverlay is favorable if .."
• recommending MapBoxOverlay instead of Root Deck first because it works with the latest react-map-gl version and has been used for a while now ? (note: what about react-map-gl with maplibre or mapbox 1? does it work transparently ?)
• explaining a bit more how long and why there's this apparent paradox between the most robust form of using deck not supporting recent react-map-gl versions ? Is this temporary ? Should everyone rewrite their code (and accept the new runtime behaviors) to use MapboxOverlay? Or will it be obsolete with react-map-gl 8 or deckgl 9 or something else and we just have to wait ? It's hard to know from a user point of view.

Additionally, maybe update the only example with controls (examples/get-started/react/mapbox/app.jsx )to use a more recent version than "react-map-gl": "^5.3.0"

These are just ideas and suggestions, feel free to only pick up the ones you like. Of course, thanks a lot for your time and involvment in this awesome project and sharing it with the open source world
Cheers,
Jon

PS: also commenting here since google results for this page come out first before the official docs and hopefully this clarifies some things for people

[Pessimistress]

@jonenst Using DeckGL as the root element supports all the features of deck.gl, not the features of react-map-gl or mapbox-gl. The limitations of MapboxOverlay are listed on its own documentation page.

I am open to suggestions for improving the docs. Please open a new issue as we do not actively monitor closed issues and PRs.

[jonenst]

@Pessimistress Sure, thanks
I split it in #8145 #8146 #8147