react-simple-maps icon indicating copy to clipboard operation
react-simple-maps copied to clipboard

Map throws TypeError if `Marker` coordinate are not in map

Open mattforni opened this issue 3 years ago • 2 comments

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

mattforni avatar Jun 07 '22 03:06 mattforni

This.

iantbarker avatar Aug 03 '22 21:08 iantbarker

Any solution to this? I am running into the same issue

scho3034 avatar Mar 28 '23 19:03 scho3034