Reputation: 1
I am new to deck.gl and having some issues.Whenever i try to use API as data like I am trying to use the following api
data: 'https://envirocar.org/api/stable/measurements'
but it doesn't work or if i put api's data in a json file and put that in my current working directory it doesn't work for example:
data:'../data_file.json'
even .csv files doesn't work but when I use data in a array form like following it works.I don't why if anybody knows please help me.
data: [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
6.4847174678758375,
51.22546715521443
]
}
]
I am talking about the data in _renderLayers()
import React, {Component} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
const MAPBOX_TOKEN = process.env.MapboxAccessToken;
const INITIAL_VIEW_STATE = {
longitude: 6.4847174678758375,
latitude: 51.22546715521443,
zoom: 11,
maxZoom: 16,
pitch: 0,
bearing: 0
};
export default class App extends Component {
_renderLayers() {
return [
new ScatterplotLayer({
id: 'scatter-plot',
data: 'https://envirocar.org/api/stable/measurements',
radiusScale: 10,
radiusMinPixels: 0.25,
getPosition: d => (d.features.geometry.coordinates),
getFillColor: [255,0,255],
})
];
}
render() {
const mapStyle = 'mapbox://styles/mapbox/light-v9';
return (
<DeckGL layers={this._renderLayers()} initialViewState={INITIAL_VIEW_STATE} controller={true}>
<StaticMap
reuseMaps
mapStyle={mapStyle}
preventStyleDiffing={true}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
);
}
}
export function renderToDOM(container) {
render(<App />, container);
}
Upvotes: 0
Views: 1538
Reputation: 11
You need to add dataTransform like so:
export default class App extends Component {
_renderLayers() {
return [
new ScatterplotLayer({
id: 'scatter-plot',
data: 'https://envirocar.org/api/stable/measurements',
dataTransform: d => d.features,
radiusScale: 10,
radiusMinPixels: 0.25,
getPosition: d => d.geometry.coordinates,
getFillColor: [255,0,255],
})
];
}
Also, note the change to getPosition.
Upvotes: 1