React Simple Maps enlargen selected part of map on click

Question

I have implemented US states by using react-simple-maps. I'm changing the geo url on the click of a state and I want the state to look bigger but it remains intact to it's location. I don't necessarily need to use this library but I need to put location pins on the map by their adresses. This is the map I have so far. Open Codesandbox

How Can I resize the selected state to cover the map?

I tried using spring like the example here but it didn't worked
I tried using a state variable to change the location dynamically but there may be another way to achieve this.

This is my map component:

import React, { useState } from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker
} from "react-simple-maps";

import { stateCodes } from "./data/allstates";

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

const MapChart = () => {
  const [geoUrl, setGeoUrl] = useState(baseUrl);
  const events = [
    {
      type: "Security",
      occurance: 30,
      coordinates: [-74.006, 40.7128]
    }
  ];
  const handleClick = (geo) => {
    console.log(stateCodes[geo]);
    setGeoUrl(
      geoUrl === baseUrl
        ? `https://raw.githubusercontent.com/johan/world.geo.json/master/countries/USA/${stateCodes[geo]}.geo.json`
        : baseUrl
    );
  };

  return (
    <div className="card flex flex-row map-container">
      <div className="map">
        <ComposableMap projection="geoAlbersUsa">
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map((geo, proj) => (
                <Geography
                  onClick={() => handleClick(geo.properties.name)}
                  key={geo.rsmKey}
                  geography={geo}
                  projection={proj}
                  stroke="#FFF"
                  fill="#DDD"
                />
              ))
            }
          </Geographies>
          {events.map((event, index) => (
            <Marker key={index} coordinates={event.coordinates}>
              <circle
                r={2 + event.occurance * 0.3}
                fill="#2F85EB80"
                stroke="#fff"
                strokeWidth={2}
              />
            </Marker>
          ))}
        </ComposableMap>
      </div>
    </div>
  );
};

export default MapChart;

React Simple Maps enlargen selected part of map on click

0 Answers0