albersUsa errors with Markers

On react-simple-maps v0.11.2, adding Markers to an AlbersUsa projection map produces the following client error:

Uncaught TypeError: Cannot read property '0' of null
    at Marker.render (Marker.js:194)
    ...bunch of react errors

Here’s my code:

// @flow

import React, {Component} from 'react'
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography,
  Markers,
  Marker
} from 'react-simple-maps'

const schools = [{name: "Tennessee State University", coordinates: [36.165874, 86.830337]}]

export default class Map extends Component<{}> {
  render() {
    return (
      <div>
        <div className="oom-map__map">
          <ComposableMap
            projectionConfig={{
              scale: 1000
            }}
            width={980}
            height={551}
            projection="albersUsa"
            style={{
              width: '100%',
              height: 'auto'
            }}
          >
            <ZoomableGroup disablePanning>
              <Geographies
                geography={geographies}
                disableOptimization
              >
                {(geographies, projection) =>
                  geographies.map((geography, key) => {
                    return (
                      <Geography
                        key={key}
                        geography="https://raw.githubusercontent.com/jgoodall/us-maps/master/topojson/state.topo.json"
                        projection={projection}
                        style={{
                          default: {
                            fill: 'pink',
                            outline: 'none',
                            transition: 'all 200ms ease-in-out'
                          },
                          hover: {
                            fillOpacity: 0.7,
                            outline: 'none'
                          },
                          pressed: {
                            outline: 'none'
                          }
                        }}
                      />
                    )
                  })}
              </Geographies>
              <Markers>
                {schools.map((marker, i) => (
                  <Marker
                    key={i}
                    marker={marker}
                  >
                    <circle
                      cx={0}
                      cy={0}
                      r={10}
                      style={{
                        stroke: '#FF5722',
                        strokeWidth: 3,
                        opacity: 0.9
                      }}
                    />
                    <text
                      textAnchor="middle"
                      y={0}
                      style={{
                        fontFamily: 'Roboto, sans-serif',
                        fill: '#607D8B'
                      }}
                    >
                      {marker.name}
                    </text>
                  </Marker>
                ))}
              </Markers>
            </ZoomableGroup>
          </ComposableMap>
        </div>
      </div>
    )
  }
}

I haven’t tried every projection yet, but went through a handful and it seems that this is the only one that produces an error.

[kevinahuber]

Oop! That did, thanks.

I would change this then to a feature request- better error handling for coordinates that are not in the map view. I would expect the marker singular to not appear, not the whole map to error. Would you agree? Happy to add that in.

[b-bly]

I ran into this when trying to zoom in with the geoAlbersUsa projection, and realized the default center [0,0] from the react-simple-maps demo was off the map. Using [-97,37] fixed it. Also, for the handle zoom in function, I make sure it’s in bounds.