react-simple-maps
react-simple-maps copied to clipboard
onMove event fails in version 3.0.0
I am trying to implement an example that uses the onMove event of ZoomableGroup.
In version 3.0.0 setScaleFactor returns undefined, while in version 2.3.0 it works.
const MapChart = () => {
const [scaleFactor, setScaleFactor] = useState(1);
return (
<ComposableMap width={width} height={height}>
<ZoomableGroup onMove={({ k }) => setScaleFactor(k)}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography key={geo.rsmKey} geography={geo} />
))
}
</Geographies>
<Marker coordinates={[-74, 40.7]}>
<circle r={12 / scaleFactor} fill="#F53" />
</Marker>
<Marker coordinates={[103.8, 1.35]}>
<circle r={12 / scaleFactor} fill="#F53" />
</Marker>
</ZoomableGroup>
</ComposableMap>
);
};
You can try this example here: try changing "2.3.0" -> "3.0.0"
https://codesandbox.io/s/react-simple-maps-do-not-change-markers-size-on-zoom-cwstb?file=/package.json
@ivanlen the property "k" was renamed to "zoom". I've just had a very similar issue and was looking if it was brought up before. It's okay that this is a breaking change, but i couldn't find any mention of it.
@zimrick Could you please update doc and mention this on changelog? https://www.react-simple-maps.io/docs/zoomable-group/