83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
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 |