How to add multiple coordinates to the map using the react-simple map

78 Views Asked by At

I'm attempting to add cordinates to my map of USa using react-simple-map, I want to have single origin point and but multiple destinations.

but this is how it renders.

https://codesandbox.io/s/equator-forked-62oi7x.

Do we need a to and from properties as well? Checked in the doc and I dont see anything passed apart from cordinates prop. My code:

const MapChart = () => {
  return (
    <ComposableMap projection="geoAlbersUsa">
      <Graticule stroke="#DDD" strokeWidth={0.5} />
      <Sphere stroke="#DDD" strokeWidth={0.5} />
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography
              key={geo.rsmKey}
              geography={geo}
              fill="#DDD"
              stroke="#FFF"
            />
          ))
        }
      </Geographies>
      <Line
        coordinates={[
          [-114.09056, 46.91631],
          [-93.21692, 44.88055],
          [-90.25803, 29.99339],
          [-107.89383, 38.50887],
          [-70.61433, 41.39303]
        ]}
        stroke="#F53"
        strokeWidth={2}
      />
    </ComposableMap>
  );
};

any idea what 'm missing?

0

There are 0 best solutions below