Maplibre popup rendering below the map

[bencalnan]

Hi,

I'm trying to render a react-map-gl/maplibre popup in my Deck/MapLibre/Typescript/React app, but it seems to be rendering way below the map. Is it something to do with the z-index? Many thanks in advance. :)

<DeckGL
        ref={deckRef}
        layers={[
          .. Layers are here, one of which if I click on a feature sets featureOptionsPopUp with lat lng of feature
        ]}
        pickingRadius={5}
        onLoad={onLoad}
        initialViewState={mainMapViewState}
        onViewStateChange={({ viewState }: any) => {
          setMainMapViewState(viewState);
        }}
      >
        <Map
          id="mainMap"
          reuseMaps
          mapStyle={mapStyle}
        >
        {featureOptionsPopUp && (
            <Popup
              latitude={featureOptionsPopUp.lat}
              longitude={featureOptionsPopUp.lng}
              anchor="top-lef
            >
            <div>Hello I'm a popup </div>
            </Popup>
            )}
           </Map>
         </DeckGL>
        ```

[bencalnan]

I've also tried rendering the popup outside the map component below using the GLContext as mentioned in this post

const [glContext, setGLContext] = useState<WebGLRenderingContext>();
  const [toolTip, setToolTip] = useState(false);
  return (
      <DeckGL
        ref={deckRef}
        controller={{
          doubleClickZoom: false,
        }}
        layers={[
          ... Layers go here
        ]}
        pickingRadius={5}
        onLoad={onLoad}
        ContextProvider={MapContext.Provider as any}
        onWebGLInitialized={setGLContext}
        initialViewState={mainMapViewState}
        onViewStateChange={({ viewState }: any) => {
          setMainMapViewState(viewState);
        }}
      >
        <button className="bg-white p-4 w-100 h-100 absolute top-10 right-5 z-50 ring-2 rounded-xl ring-indigo-500" onClick={() => setToolTip(!toolTip)}>
          Set TOOLTIP
        </button>
        {toolTip && (
          <Popup
            anchor="top"
            latitude={50.6938}
            longitude={1.3047}
            closeOnClick
          >
            <div>hello</div>
          </Popup>
        )}
        {glContext && (
          <Map
            key="map"
            id="mainMap"
            reuseMaps
            mapStyle={mapStyle}
          />
        )}
        
        </Deck>

    But in this case i get:

        Unhandled Runtime Error
          TypeError: Cannot read properties of undefined (reading 'Popup')
          
          Call Stack
          eval
          node_modules/react-map-gl/dist/esm/components/popup.js (20:1)
          React

[Pessimistress]

The solution in that old issue uses a previous version (v6) of react-map-gl.

[Pessimistress]

When you render Map as a child of DeckGL, it is placed under the deck canvas, along with its children. This has to do with hierarchy, not z index.

I encourage you to read https://deck.gl/docs/developer-guide/base-maps/using-with-mapbox#integration-modes to understand your options. Both interleaved and overlaid with MapboxOverlay will allow you to use the Popup control.

[bencalnan]

Many thanks I've managed to get it working using the interleaved mode you suggested. I also forgot to import the correct css i.e.

import "maplibre-gl/dist/maplibre-gl.css"; which compounded the issue.