Adding Geocode component generates bunch of errors #56
Comments
|
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. |
|
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. |
|
I switched to React.useRef instead and it works, no need to convert to a class component. Thanks a lot! |
|
I am using the useRef() but still facing issue with. |
|
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 |
|
after some changes with the code, now seeing the issue of blank screen without mapbox gl instance. |
|
On your |
|
changed to Same restuls. |
|
Same issue here, Can this be used with DeckGL and StaticMap components? |
|
What version number of The ref that needs to be passed to the If you include a Code Sandbox demonstrating the issue it would be much easier for me to help debug. |
|
In functional component use useRef instead of createRef it will work |
|
Finally got around to making a Code Sandbox example of using |
|
it's not working with next.js |
|
Hi @chiho13, this is a known issue that I haven't got around to fixing. A workaround is described here #36 (comment). |
|
@SamSamskies i used dynamic import in next.js but can't replicated the results in the codesandbox |
|
@SamSamskies i got it working, but i had to force override .mapboxgl-ctrl css class to display block important! to show the input box |
|
Hi @SamSamskies. Been having the same problem as @I1mran. When I checked out your CodeSanbox I am getting a SyntaxError |
|
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. |
|
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 |
any help since? |
|
I found the solution: I tried with |
|
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. |
The errors occur only when adding the Geocoder component.
The log with the errors:
The text was updated successfully, but these errors were encountered: