How to get a pair of coordinates [x, y] by click on map

[alexkirillovtech]

Hi, I want to set a Marker on the map where user clicked, may someone help?

My MapChart -

const MapChart = () => {
    const handleClick = geo => (event) => {
        console.log(geo);
        console.log(event.target);
    }

    return (
        <ComposableMap
            projection="geoAzimuthalEqualArea"
            projectionConfig={{
                rotate: [-20.0, -52.0, 0],
                scale: 700
            }}
        >
            <Graticule stroke="#EAEAEC" />
            <Geographies geography={geoUrl}>
                {({ geographies }) =>
                    geographies.map(geo => (
                        <Geography
                            key={geo.rsmKey}
                            geography={geo}
                            fill="#9998A3"
                            stroke="#EAEAEC"
                            onClick={handleClick(geo.properties)}
                        />
                    ))
                }
            </Geographies>
            {markers.map(({ name, coordinates, markerOffset }) => (
                <Marker key={name} coordinates={coordinates}>
                    <g
                        fill="none"
                        stroke="#FF5533"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        transform="translate(-12, -24)"
                    >
                        <circle cx="12" cy="10" r="3" />
                        <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
                    </g>
                    <text
                        textAnchor="middle"
                        y={markerOffset}
                        style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}
                    >
                        {name}
                    </text>
                </Marker>
            ))}
        </ComposableMap>
    );
};

And in console I got a geo.proretries object like :

ABBREV: "Rus."
CONTINENT: "Europe"
FORMAL_EN: "Russian Federation"
GDP_MD_EST: 3745000
GDP_YEAR: 2016
ISO_A2: "RU"
ISO_A3: "RUS"
NAME: "Russia"
NAME_LONG: "Russian Federation"
POP_EST: 142257519
POP_RANK: 17
POP_YEAR: 2017
REGION_UN: "Europe"
SUBREGION: "Eastern Europe"

But I don't know how to get coordinates from this info. Thanks!

[zimrick]

Hi @EnderKir,

Out of the box react-simple-maps does not return the cursor geographic coordinates, but here is an example of how to get the geographic coordinates of the cursor on click.

https://codesandbox.io/s/get-cursor-coordinates-on-click-1-6zqp3?file=/src/MapChart.js

Note that this is a starting point for a solution and currently only works if you are not using ZoomableGroup. From what I see in your code, you don't seem to be using ZoomableGroup, so this should be ok :)

Hope this solves your problem...

[alexkirillovtech]

@zimrick Thanks a lot !!!!