- 
                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