hpos-web/src/components/WorldMap.js

import React, { useState, useEffect } from "react"
import { geoEqualEarth, geoPath } from "d3-geo"
import { feature } from "topojson-client";

import "./WorldMap.css";

const cities = [
  // { name: "Jakarta",        coordinates: [106.8650,-6.1751],  population: 30539000 },
  // { name: "Delhi",          coordinates: [77.1025,28.7041],   population: 24998000 },
  // { name: "Manila",         coordinates: [120.9842,14.5995],  population: 24123000 },
  // { name: "Karachi",        coordinates: [67.0099,24.8615],   population: 22123000 },
  // { name: "Mumbai",         coordinates: [72.8777,19.0760],   population: 17712000 },
  // { name: "Dhaka",          coordinates: [90.4125,23.8103],   population: 15669000 },
  // { name: "Kolkata",        coordinates: [88.3639,22.5726],   population: 14667000 },
  { name: "Nagpur",           coordinates: [79.088860, 21.146633], population: 24667000 },
]

const projection = geoEqualEarth()
  .scale(160)
  .translate([ 800 / 2, 450 / 2 ])

const WorldMap = () => {
  const [geographies, setGeographies] = useState([])

  useEffect(() => {
    fetch("/world-110m.json")
      .then(response => {
        if (response.status !== 200) {
          console.log(`There was a problem: ${response.status}`)
          return
        }
        response.json().then(worlddata => {
          setGeographies(feature(worlddata, worlddata.objects.countries).features)
        })
      })
  }, [])

  const handleCountryClick = countryIndex => {
    console.log("Clicked on country: ", geographies[countryIndex])
  }

  const handleMarkerClick = i => {
    console.log("Marker: ", cities[i])
  }

  return (
    <svg width={ '40vw' } height={ '50vh' } viewBox="0 0 800 450">
      <g className="countries">
        {
          geographies.map((d,i) => (
            <path
              key={ `path-${ i }` }
              d={ geoPath().projection(projection)(d) }
              className="country"
              fill={ `rgba(38,50,56,${ 1 / geographies.length * i})` }
              stroke="#FFFFFF"
              strokeWidth={ 0.5 }
              onClick={ () => handleCountryClick(i) }
            />
          ))
        }
      </g>
      <g className="markers">
        {
          cities.map((city, i) => (
            <circle
              key={ `marker-${i}` }
              cx={ projection(city.coordinates)[0] }
              cy={ projection(city.coordinates)[1] }
              r={ city.population / 3000000 }
              fill="#E91E63"
              stroke="#FFFFFF"
              className="marker"
              onClick={ () => handleMarkerClick(i) }
            />
          ))
        }
      </g>
    </svg>
  )
}

export default WorldMap