Comments (4)
icebox
commented on July 22, 2024
1
I was having the same issue but I am not using TypeScript.
It appears react-map-gl-geocoder v2.1.6 is not compatible with the latest versions of react-map-gl v6.1.x
react-map-gl v6.1.0-alpha introduces a breaking change somewhere.
Switching to react-map-gl v6.0.3 works for me. I am also using the latest version of react.
from react-map-gl-geocoder.
uebriges
commented on July 22, 2024
Hi,
I am using Typescript and tried the solution from @icebox, but still get this error message: TypeError: Cannot read property 'addControl' of null.
I have the same versions as mentioned by @icebox
My code looks like this:
/** @jsxImportSource @emotion/react */
import 'next';
import Head from 'next/head';
import { useCallback, useRef, useState } from 'react';
import ReactMapGL from 'react-map-gl';
import Geocoder from 'react-map-gl-geocoder';
// Create the parameters for the routing request:
// const DynamicComponentWithNoSSR = dynamic(() => import('../components/Map'), {
// ssr: false,
// });
// const dynamicComponent = () => <DynamicComponentWithNoSSR />;
// export default dynamicComponent;
type ViewportType = {
width: string;
height: string;
latitude: number;
longitude: number;
zoom: number;
};
type HomeType = {
mapboxToken: string;
};
export default function Home(props: HomeType) {
const [viewport, setViewport] = useState({
width: '100vw',
height: '100vh',
latitude: 48.8685,
longitude: 2.328549,
zoom: 15,
});
const mapRef = useRef();
const handleViewportChange = useCallback(
(newViewport) => setViewport(newViewport),
[],
);
const handleGeocoderViewportChange = useCallback((newViewport) => {
const geocoderDefaultOverrides = { transitionDuration: 1000 };
return handleViewportChange({
...newViewport,
...geocoderDefaultOverrides,
});
}, []);
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
rel="stylesheet"
/>
</Head>
<main>
<ReactMapGL
{...viewport}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxApiAccessToken={props.mapboxToken}
onViewportChange={handleViewportChange}
>
<Geocoder
mapRef={mapRef}
onViewportChange={handleGeocoderViewportChange}
mapboxApiAccessToken={props.mapboxToken}
position="top-left"
/>
</ReactMapGL>
{/* <Map viewport={viewport} setViewport={setViewport} /> */}
</main>
</div>
);
}
export function getServerSideProps() {
return { props: { mapboxToken: process.env.MAPBOX_API_TOKEN || null } };
}
Anyone having a solution for that?
Thanks a lot.
from react-map-gl-geocoder.
SamSamskies
commented on July 22, 2024
Hey @uebriges, you need to pass mapRef as a ref to ReactMapGL. The geocoder uses that handle to access the Mapbox map instance from the React Map GL instance.
from react-map-gl-geocoder.
uebriges
commented on July 22, 2024
Hi @SamSamskies,
Thanks a lot. It worked now also with the latest version of react-map-gl (6.1.10).
from react-map-gl-geocoder.
Related Issues (20)
- GeoCoder Marker's Styling Not Working HOT 2
- Search Results Not closing, and marker not dropping HOT 9
- Geocoder doesn't appear in Next.js app HOT 1
- Console error passing object to marker prop
- Suggestions are displayed after setting a default input HOT 3
- External geocoder HOT 1
- React 17? HOT 1
- how to active draggable after search HOT 1
- mapbox-gl neccessary dependency? HOT 1
- How to get the current value? HOT 3
- Typescript import issue HOT 1
- Supporting stand-alone Geocoder without map ? HOT 1
- react-map-gl 7 support HOT 7
- Multiple input options in react app HOT 1
- export 'FlyToInterpolator' (imported as 'r') was not found in 'react-map-gl' HOT 2
- Request to upgrade transitive dependency `http-cache-semantics` in `react-map-gl-geocoder` HOT 1
- Menu stays open HOT 2
- Upon passing Marker="true" into geocoder, no point appears HOT 4
- TypeError: Cannot read property 'remove' of undefined __ Cannot read property 'addControl' of null - HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-map-gl-geocoder.