DataMap.js

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"

const DataMap = ({ mapboxToken = "", data = [] }) => {
    const scatterplotLayer = new ScatterplotLayer({
        id: "scatterplot-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 = [scatterplotLayer]

    return <DeckGLMap mapboxToken={mapboxToken} layers={layers} />
}

export default DataMap