DataMap.js

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

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

    const layers = [scatterplotLayer]

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

export default DataMap