Side-by-side with Mapbox as base map

[vojtatom]

Hi,

I have a question - how can I get a side-by-side view with two deck.gl MapViews, each with a Mapbox base map, both in reverse controlled mode and with synced viewState? Is this even possible? I have been searching the documentation for a working example, but I have yet to find one. I would imagine something like this:

import { Map } from "react-map-gl"

...

  const deckglRef = useRef<DeckGLRef>(null)

  const { initialViewState } = useMapViewState()

  return (
    <DeckGL
      initialViewState={initialViewState}
      ref={deckglRef}
      style={{ width: "100%", height: "100%" }}
    >
      <MapView id="left" controller={true} x={0} width="50%">
        <Map
          id="left"
          reuseMaps
          mapStyle={mapBaseStyle}
          mapboxAccessToken={PUBLIC_MAPBOX_ACCESS_TOKEN}
        />
      </MapView>
      <MapView id="right" controller={true} x="50%" width="50%">
        <Map
          id="right"
          reuseMaps
          mapStyle={mapBaseStyle}
          mapboxAccessToken={PUBLIC_MAPBOX_ACCESS_TOKEN}
        />
      </MapView>
    </DeckGL>

But I'm getting the following TS error:

'MapView' cannot be used as a JSX component.
  Its instance type 'MapView' is not a valid JSX element.
    Type 'MapView' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 2 more

Thank you!

[Pessimistress]

Unfortunately the JSX pattern does not work with TypeScript. You need to add a @ts-ignore to work around the error.

[vojtatom]

Oh hey, thanks. And is there a non-jsx solution? Something that would include passing the pair of MapViews to the Deck's view prop? I haven't been able to make the base mapbox map show up in both of the views.