How to display multiple PathLayer with Deck.gl

Question

I'm not too familiar with React Js and DeckGL. I am trying to display several objects of the PathLayer class on an interactive map. A single object is displayed without problems, but when there are several, it does not work:

    const token = global.REACT_APP_TOKEN;

    const initialViewState = {
        longitude: 37.6205569,
        latitude: 55.746277,
        zoom: 11
    };

    class ParkingOnMap extends Component {
        state = {
            features: []
        };

        async componentDidMount() {
            const body = await (await fetch(global.path + `/featuresOnlyIDAndCoordinates`)).json();
            this.setState({features: body});
        }

        render() {
            const {features} = this.state;
            const data = [{
                name: "random-name",
                color: [245, 49, 49],//[101, 147, 245],

                path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]],
              //path: features.map(c => {return (c.coordinates)})

        }];

        console.log(data.map(c => {return c.path}));
        console.log(features);

        // below, add whatever layers you need to overlay on your map
        const layer = [
            new PathLayer({
                id: 'path-layer',
                data,
                //data: coordinates,
                getPath: data => data.path,
                getWidth: data => 4,
                getColor: data => data.color,
                widthMinPixels: 4
            })
        ];

        return (
            <div className="App">
                <AppNavbar/>
                <Button onClick={this.setUserLocation}>My Location</Button>
                <div className="map">
                    {<React.Fragment>
                        <DeckGL
                            initialViewState={initialViewState}
                            controller={true}
                            layers={layer}
                        >
                            <StaticMap
                                mapStyle="mapbox://styles/mapbox/streets-v11"
                                mapboxApiAccessToken={token}
                            />
                        </DeckGL>
                    </React.Fragment>}
                </div>
            </div>
        )
    }
}

export default withRouter (ParkingOnMap);

This is a working example with one array of coordinates:

path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]]

This part that doesn't work:

path: features.map(c => {return (c.coordinates)})

In the second case, the data represents an array of json objects like:

[{"id":"3020148","coordinates":[[37.5948822,55.7154477],[37.595188,55.7157046]]},{"id":"3020149","coordinates":[[37.5954187,55.7158979],[37.5963521,55.7166594]]}, ....etc.

I can’t figure out how to make iterate through all the objects in the DeckGL render. The documentation says it's pretty easy.

Answer 1

I considered the simplest and most native solution like Leaflet.