Zoom to a specific point in react-simple-maps

Question

Problem

I don't understand how to properly zoom to a position of a click, .center(center) on projection doesn't do anything.

Code

import React, { Fragment, useState } from 'react'
import { ComposableMap, ZoomableGroup, Geographies, Geography } from 'react-simple-maps'
import { geoConicEqualArea } from 'd3-geo'
import map from '../public/Russia.json'

const VectorMap = ({ onClick, width = 990, height = 505, onBlur }) => {
  const [zoom, setZoom] = useState(1)
  const [center, setCenter] = useState([100, 100])

  // Zoom event handlers
  const onWheel = e => (e.deltaY > 0 ? setZoom(prev => prev - 0.3) : setZoom(prev => prev + 0.3))

  return (
    <Fragment>
      <ComposableMap
        projection={() =>
          geoConicEqualArea()
            .scale(690)
           // projection doesn't change anyway
            .center(center)
            .parallels([40, 80])
            .rotate([265])
            .translate([130, 5])
        }
        {...{ width, height }}
        style={{
          width: '85vw',
          height: '100vh'
        }}
      >
        <ZoomableGroup {...{ zoom }}>
          <Geographies geography={map}>
            {(geographies, projection) =>
              geographies.map((geography, i) => (
                <Geography
                  key={i}
                  {...{ geography, onWheel, projection, onBlur }}
                  onClick={(obj, e) => {
                    onClick(obj)
                    setCenter(e.clientX, e.clientY)
                    // setZoom(1.5)
                  }}
                  style={{
                    default: {
                      fill: '#ECEFF1',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    },
                    hover: {
                      fill: '#607D8B',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    },
                    pressed: {
                      fill: '#FF5722',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
      <button className="ZoomBtn" onClick={() => setZoom(prev => prev + 0.1)}>
        +
      </button>
      <button className="ZoomBtn" onClick={() => setZoom(prev => prev - 0.1)}>
        -
      </button>
    </Fragment>
  )
}

export default VectorMap

I also noticed there's a center property for ZoomableGroup but it also doesn't seem to be working properly. It zooms to one place and map becomes no draggable anymore.

Here are the warnings in console:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps.
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Geographies, ZoomableGroup dll_d6a88dbe3071bd165157.js:12608:15
Source map error: Error: Invalid URL: webpack://[name]_[chunkhash]/webpack/bootstrap
Resource URL: http://localhost/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1577625154482
Source Map URL: dll_d6a88dbe3071bd165157.js.map

Unexpected value 
           translate(
             NaN
             NaN
           )
           scale(1)
           translate(-495 -250)
          parsing transform attribute.

Additional info

• React version: 16.12
• react-simple-maps version: 0.12.1

Help would be appreciated.

Answer 1

You can modify the value of center in ComposableMap.

Suppose if you want center to be at (20, 20), you must write: center:[20, 20]