-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
Description
<Map
id='general-map'
ref={mapRef}
reuseMaps
attributionControl={false}
trackResize={true}
mapboxAccessToken={myaccesstoken|| ''}
mapStyle={mapThemeStyle}
initialViewState={{
latitude: centerLatitude || undefined,
longitude: centerLongitude || undefined,
zoom: 1
}}
dragPan={true}
interactive={true}
onClick={onMapClick}
style={mapCssStyle}
onLoad={handleMapLoad}
>
If I do not have centerLatitude & centerLongitude as valid Numbers, and undefined becomes the value, then during re-rendering the map will not load. Meaning, the onLoad function I have defined as handleMapLoad will not trigger. Since I have code relying on that function which sets a state variable to true (mapLoaded = true), causes the rest of my code to break.
The types for initialViewState.latitude accepts Number | undefined, but functionally speaking, this doesn't always work.
I would expect that if I gave an initialViewState lat and long as undefined, it should just work off the default [0,0] coordinates and the onLoad function triggers, which would allow my other code to say 'yes the map is loaded' and everything would work.
My workaround in initialViewState:
latitude: doesLatLngExistForInitialViewState ? centerLatitude : DEFAULT_CENTER_LATITUDE, // Default to center of US
longitude: doesLatLngExistForInitialViewState ? centerLongitude : DEFAULT_CENTER_LONGITUDE, // Default to center of US
This way the map will always have a valid Number set of coordinates. Which is fine, but if the type for latitude and longitude here accepts undefined, I wouldn't expect the map to break because of it.
Expected Behavior
Giving initialViewState.latitude and initialViewState.longitude values of undefined, the map would still hit the onLoad function.
Steps to Reproduce
- Set up a single page nextjs app with the same libraries
- have two map widgets that consume the same map mother component, one can be for dog locations and the second can be for cat locations
- Render either widget based on which animal locations you want to see
- Have initialViewState lat and long fallback to undefined
- Do not have valid Number coordinates for the initialViewState lat/long values.
- Examine how the map doesn't want to load when flipping between widgets with undefined values.
Environment
- Framework version: react-map-gl@^7.1.7
- Map library: mapbox-gl@^3.3.0
- Browser: Chrome Version 140.0.7339.133 (Official Build) (arm64)
- OS: macOS Sequoia Version 15.4
Logs
No response