Skip to content

Map throws TypeError if Marker coordinate are not in map #282

Open
@mattforni

Description

@mattforni

Problem
When trying to render markers on a map a TypeError can be encountered if the coordinate is not on the map.

Expectation
The render would fail gracefully, possibly emitting a warning to the console, instead of a cryptic TypeError about restructuring.

...

      <div className='NationalParkMap'>
        <ComposableMap projection="geoAlbersUsa">
          <Geographies geography={GeographyJson}>
            {({ geographies }) => geographies.map(geography =>
              <>
                {geographies.map(geography => (
                  <Geography key={geography.rsmKey}
                    stroke="#BBB"
                    geography={geography}
                    fill="#333"/>
                  ))}
              </>
            )}
          </Geographies>
          {Parks.map(({ name, coordinates}) => (
              <Marker coordinates={coordinates}>
                <circle r={8} fill="#F53" stroke="#FFF" strokeWidth={2} />
                <text textAnchor="middle" style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}>
                  {name}
                </text>
              </Marker>
          ))}
        </ComposableMap>
      </div>
    </div>

Yields

Uncaught TypeError: Invalid attempt to destructure non-iterable instance
    at l (index.umd.js:1:1)
    at S (index.umd.js:1:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at flushSync (react-dom.development.js:22467:1)
    at Object.scheduleRoot (react-dom.development.js:24444:1)
    at react-refresh-runtime.development.js:284:1
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263:1)
    at RefreshUtils.js:62:1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions