1

I'm attempting to style markers to my map, but nothing works.

const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const MapChart = () => {
return (
<ComposableMap projection="geoAlbersUsa">
      <Geographies geography={geoUrl}>
        {({ geographies }) => (
          <>
            {geographies.map(geo => (
              <Geography
                key={geo.rsmKey}
                stroke="#FFF"
                geography={geo}
                fill="#DDD"
              />
            ))}
          </>
        )}
      </Geographies>
      {airports.map((item, index) => {
           return <Marker key={index} coordinates={[marker.LONGITUDE, marker.LATITUDE]} onClick={handleClick.bind(this, marker)}

           style={{
                cursor: "pointer"
                default: { fill: "#06F" },
                hover: { fill: "#000" },
                pressed: { fill: "#02A" },
              }}
            >
              <circle r={5} fill="#F53" />
              </Marker>

      })}
     
    </ComposableMap>
)}

The style part is not effective on the markers at all. What I'm I missing?

user1234
  • 3,000
  • 4
  • 50
  • 102

0 Answers0