visgl / visgl/react-map-gl

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

Open
#2,557 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

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
  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no repository files or tests. Reproduce the case in a Next.js app using react-map-gl@^7.1.7 with undefined initialViewState coordinates, then trace the Map component's initialViewState handling. Done means the map loads and onLoad fires when latitude and longitude are undefined, with the documented fallback behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.