Skip to content

[Bug] For initialViewState prop using <Map />, having the latitude and longitude fallback to undefined can cause the map to not load #2557

@y04nqt

Description

@y04nqt

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

  1. Set up a single page nextjs app with the same libraries
  2. 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
  3. Render either widget based on which animal locations you want to see
  4. Have initialViewState lat and long fallback to undefined
  5. Do not have valid Number coordinates for the initialViewState lat/long values.
  6. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions