zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.11k stars 426 forks source link

onMove event fails in version 3.0.0 #297

Open ivanlen opened 2 years ago

ivanlen commented 2 years ago

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

FunctionDJ commented 2 years ago

@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.

Semigradsky commented 2 years ago

@zimrick Could you please update doc and mention this on changelog? https://www.react-simple-maps.io/docs/zoomable-group/