CODEWITHSUNDEEP
reactjsmapboxmapbox-glreact-map-gldeck.gl
Tugce Aksoz
Tugce Aksoz

Reputation: 81

NavigationControl with Deck.gl

I'm trying to build nft marketplace over mapbox, like ovr.ai to improve my react.js. I'm working on a fork, but I'm trying to add new features like navigation control, search place etc.

I have a problem with NavigationControl.

import DeckGL from "@deck.gl/react"
import ReactMapGL, { NavigationControl } from "react-map-gl"

return (
    <DeckGL
      style={{ position: "relative" }}
      height={HEIGHT}
      width={WIDTH}
      initialViewState={viewState}
      onViewStateChange={({ viewState }) => setViewState(viewState)}
      controller={true}
      layers={layers}
    >
      <ReactMapGL mapboxApiAccessToken={token}>
        <NavigationControl />
      </ReactMapGL>
    </DeckGL>
  )

Code generates navigation control but firstly; I can't click them because deckgl generates canvas over them. Even I remove canvas from inspect, zoom control seems not working.

https://codesandbox.io/s/cocky-forest-iv6bi2?file=/src/Map/index.js

Upvotes: 1

Views: 1562

Answers (2)

Nazrul Muhaimin
Nazrul Muhaimin

Reputation: 373

Question are a bit old, but I just want to provide my findings or relevant answer for newer version of react-map-gl (v7) which already remove _MapContext.

Based on doc here on MapProvider you need to add this wrap outside your Map component so that it will tells Deckgl for current map context and making navigation functional when using react-map-gl with deck.gl, like:

<DeckGL ... >
  <MapProvider>
    <Map ... >

Hope this will help someone stumble upon this like me for quite an hours.

Upvotes: 1

AdriSolid
AdriSolid

Reputation: 2825

As docs suggest here, try adding the react-map-gl context provider to your DeckGL component

Upvotes: 0

Related Questions