Deck.GL ScatterplotLayer does not render circle radius

Question

I'm trying to draw a circle on a map (where in the center there will be a marker). However, nothing is appearing on my map. I've tried various ScatterplotLayer options and tried switching the location, also tried getPosition: (d) => [d.coordinates[0], d.coordinates[1]], etc. But nothing is appearing on my map.

import React, { useState, useEffect, createRef } from 'react';
import MapGL, { Marker, NavigationControl, FlyToInterpolator } from "react-map-gl";
import firebase from '@services/firebase';
import DeckGL, { GeoJsonLayer, MapController, ScatterplotLayer } from "deck.gl";

// import DeckGL from '@deck.gl/react';
// import { ScatterplotLayer } from '@deck.gl/layers';

import { Avatar } from "antd";

function Map({ charities }) {

    const initViewport = {
        width: "100vw",
        height: "100vh",
        latitude: 41.5868,
        longitude: -93.625,
        zoom: 2,
    };

    const [viewport, setViewport] = useState(initViewport);

    function resize() {
        setViewport({
            ...viewport,
            width: window.innerWidth,
            height: window.innerHeight
        });
    }

    function flyTo(latitude, longitude) {
        setViewport({
            ...viewport,
            zoom: 13,
            latitude,
            longitude,
            transitionInterpolator: new FlyToInterpolator(),
            transitionDuration: 3000,
        });
    }

    useEffect(() => {
        window.addEventListener("resize", resize);
        return () => window.removeEventListener("resize", resize);
    }, []);

    const layer = new ScatterplotLayer({
        id: "scatterplot-layer",
        data: [
            {
                name: "Colma (COLM)",
                code: "CM",
                address: "365 D Street, Colma CA 94014",
                exits: 100000000,
                coordinates: [60.8938364, 9.7150779],
            },
        ],
        pickable: true,
        opacity: 0.8,
        stroked: true,
        filled: true,
        radiusScale: 6,
        radiusMinPixels: 1,
        radiusMaxPixels: 100,
        lineWidthMinPixels: 1,
        getPosition: (d) => d.coordinates,
        getRadius: (d) => Math.sqrt(d.exits),
        getFillColor: (d) => [255, 140, 0],
        getLineColor: (d) => [0, 0, 0],
        onHover: ({ object, x, y }) => {
            const tooltip = `${object.name}\n${object.address}`;
        },
    });

    return (
        <MapGL
            preventStyleDiffing={true}
            reuseMaps
            mapStyle='mapbox://styles/mapbox/streets-v9'
            mapboxApiAccessToken='MAPBOX_TOKEN'
            onViewportChange={(viewport) => setViewport(viewport)}
            {...viewport}
        >
            <DeckGL
                width='100%'
                height='100%'
                {...viewport}
                debug
                layers={[layer]}
            />
        </MapGL>
    );
}

export default Map;

Answer 1

The problem is you are not setting the viewState in the DeckGL component. Your code throws the following error:

view-manager.js:232 deck: missing viewState or initialViewState

Try changing

...
<DeckGL
  width='100%'
  height='100%'
  {..viewport}
  debug
  layers={[layer]}
/>
...

To the following:

...
<DeckGL
  width='100%'
  height='100%'
  viewState={viewport}
  debug
  layers={[layer]}
/>
...

Hope this helps!