Adding Geocode component generates bunch of errors about react-map-gl-geocoder HOT 23 CLOSED

I switched to React.useRef instead and it works, no need to convert to a class component. Thanks a lot!

from react-map-gl-geocoder.

it's not working with next.js

any help since?

from react-map-gl-geocoder.

I found the solution:

<MapGL
    ref={mapRef}
    {...viewport}
    width="100%"
    height="100%"
    onViewportChange={handleViewportChange}
    mapboxApiAccessToken={MAPBOX_TOKEN}
  >
      {mapRef.current ? (
        <Geocoder
          mapRef={mapRef}
          onViewportChange={handleGeocoderViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          position="top-left"
        />
      ) : null}
</MapGL>

I tried with @mapbox/mapbox-gl-geocoder and I realized that I was getting the same error until I added the condition.
It requires some ms to update the mapRef.

from react-map-gl-geocoder.

I've never tried using this component using a functional component and hooks, so maybe there's an issue with that. The geocoder is not initialized until after the Geocoder component is mounted. The mapbox map instance should exist by that point, but in your case it's not.

Please provide version numbers of react, react-map-gl, and react-map-gl-geocoder. Also, it helps a lot if you provide a Code Sandbox that demonstrates the issue.

If you want a quick fix, I'm pretty sure you could convert this to a good ol class component and it would work.

from react-map-gl-geocoder.

One other thing to try is React.useRef instead of React.createRef https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref. createRef creates a new ref on every render.

from react-map-gl-geocoder.

I am using the useRef() but still facing issue with.

from react-map-gl-geocoder.

Hi @I1mran, is it possible for you to share you component code? It will be hard to debug without seeing that.

Contents should look something like this...

  const mapRef = React.useRef()

  return (
   <ReactMapGL
     ref={mapRef}
     {...viewport}
     width="100%"
     height="100%"
     onViewportChange={handleViewportChange}
     mapboxApiAccessToken={MAPBOX_TOKEN}
   >
     <Geocoder
       mapRef={mapRef}
       onViewportChange={handleViewportChange}
       mapboxApiAccessToken={MAPBOX_TOKEN}
     >
     </Geocoder>
</ReactMapGL>
  )

Also, make sure that the prop you are using on Geocoder is mapRef and not ref. It's passing ReactMapGL's ref down to Geocoder cause Geocoder needs that to get a handle to the underlying Mapbox GL Map object.

from react-map-gl-geocoder.

after some changes with the code, now seeing the issue of blank screen without mapbox gl instance.

<MapGL
                mapRef={_mapRef}
                {...viewport}
                width="100%"
                height="100%"
                mapStyle="mapbox://styles/mapbox/satellite-v9"
                mapboxApiAccessToken={TOKEN}
                onViewportChange={_updateViewport}
            >
                <Geocoder
                    mapRef={_mapRef}
                    onViewportChange={_handleGeocoderViewportChange}
                    mapboxApiAccessToken={TOKEN}
                >
                </Geocoder>
</MapGL>

from react-map-gl-geocoder.

On your MapGL component, you should be using the ref prop because you want the actual ref to that component instance. MapGL component doesn't have a prop called mapRef.

from react-map-gl-geocoder.

changed to

ref={mapRef}

Same restuls.

from react-map-gl-geocoder.

Same issue here, Can this be used with DeckGL and StaticMap components?

from react-map-gl-geocoder.

What version number of react-map-gl are you using? I haven't tried using this component with v5 of react-map-gl yet. It's possible that they made breaking changes to their API which would cause issues for this component.

The ref that needs to be passed to the mapRef prop of this component is required to be a ref to an instance of the default export of react-map-gl. It won't work if the ref is for an instance of the default export of deck.gl. I think an instance of StaticMap would work, but I haven't tried it.

If you include a Code Sandbox demonstrating the issue it would be much easier for me to help debug.

from react-map-gl-geocoder.

In functional component use useRef instead of createRef it will work

from react-map-gl-geocoder.

Finally got around to making a Code Sandbox example of using react-map-gl-geocoder in a functional component using hooks. https://codesandbox.io/s/react-map-gl-geocoder-v2-example-096iq

from react-map-gl-geocoder.

it's not working with next.js

from react-map-gl-geocoder.

Hi @chiho13, this is a known issue that I haven't got around to fixing. A workaround is described here #36 (comment).

from react-map-gl-geocoder.

@SamSamskies i used dynamic import in next.js but can't replicated the results in the codesandbox

from react-map-gl-geocoder.

@SamSamskies i got it working, but i had to force override .mapboxgl-ctrl css class to display block important! to show the input box

from react-map-gl-geocoder.

Hi @SamSamskies. Been having the same problem as @I1mran. When I checked out your CodeSanbox I am getting a SyntaxError
Invalid left-hand side expression in prefix operation

from react-map-gl-geocoder.

Hi @Marius-Adam, currently all Code Sandboxes with deck.gl seem to be having that issue. I fixed the example by removing deck.gl. I had fixed it earlier this week, but I guess my changes didn't save. Try it now https://codesandbox.io/s/l7p179qr6m.

from react-map-gl-geocoder.

Hi @SamSamskies, I am using react-map-gl and react-map-gl-geocoder in Electron App(https://github.com/electron-react-boilerplate/electron-react-boilerplate), it works well in dev mode, but on production mode, it is showing errors like

if you can let me know any thought on this, it would be great! Thanks
I just followed this one:https://codesandbox.io/s/l7p179qr6m, working well on dev mode.

from react-map-gl-geocoder.

react-map-gl-geocoder doesn't use react-map-gl version 7. According to https://visgl.github.io/react-map-gl/docs/upgrade-guide the LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo(). You have to use older versions of react-map-gl.

from react-map-gl-geocoder.

react-map-gl-geocoder doesn't use react-map-gl version 7. According to https://visgl.github.io/react-map-gl/docs/upgrade-guide the LinearInterpolator and FlyToInterpolator are removed. Use map.easeTo() and map.flyTo(). You have to use older versions of react-map-gl.

Yep just got to the same point with errors of these missing, too bad =(

However, this example works; https://visgl.github.io/react-map-gl/examples/geocoder . Just don't forget to add the css file they have in the index.html.

from react-map-gl-geocoder.