DataMap.js

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"
import { useRecoilValue } from "recoil"
import { statusByDateQuery, countriesQuery, API_DATE_FORMAT } from "../../state/api"
import { format } from "date-fns"

const DataMap = () => {
    const date = new Date()
    const formattedDate = format(date, API_DATE_FORMAT)
    const todayStatus = useRecoilValue(statusByDateQuery(formattedDate))
    const countries = useRecoilValue(countriesQuery)

    const data = todayStatus.map((status) => {
        const country = countries[status.country]
        return {
            name: country.name,
            coordinates: [country.longitude, country.latitude],
            ...status,
        }
    })

    const covidDataLayer = new ScatterplotLayer({
        id: "covid-data-layer",
        data,
        stroked: false,
        filled: true,
        getPosition: (d) => d.coordinates,
        getRadius: (d) => (d.cases > 0 ? (Math.log10(d.cases) + d.cases / 100000) * 20000 : 0),
        getFillColor: (d) => [255, 0, 0],
    })

    const layers = [covidDataLayer]

    return <DeckGLMap layers={layers} />
}

export default DataMap