in examples/website/scenegraph/app.js [72:148]
export default function App({sizeScale = 25, onDataLoad, mapStyle = MAPBOX_STYLE}) {
const [data, setData] = useState(null);
const [timer, setTimer] = useState({});
useEffect(
() => {
fetch(DATA_URL)
.then(resp => resp.json())
.then(resp => {
if (resp && resp.states && timer.id !== null) {
// In order to keep the animation smooth we need to always return the same
// objects in the exact same order. This function will discard new objects
// and only update existing ones.
let sortedData = resp.states;
if (data) {
const dataAsObj = {};
sortedData.forEach(entry => (dataAsObj[entry[DATA_INDEX.UNIQUE_ID]] = entry));
sortedData = data.map(entry => dataAsObj[entry[DATA_INDEX.UNIQUE_ID]] || entry);
}
setData(sortedData);
if (onDataLoad) {
onDataLoad(sortedData.length);
}
}
})
.finally(() => {
timer.nextTimeoutId = setTimeout(() => setTimer({id: timer.nextTimeoutId}), REFRESH_TIME);
});
return () => {
clearTimeout(timer.nextTimeoutId);
timer.id = null;
};
},
[timer]
);
const layer =
data &&
new ScenegraphLayer({
id: 'scenegraph-layer',
data,
pickable: true,
sizeScale,
scenegraph: MODEL_URL,
_animations: ANIMATIONS,
sizeMinPixels: 0.1,
sizeMaxPixels: 1.5,
getPosition: d => [
d[DATA_INDEX.LONGITUDE] || 0,
d[DATA_INDEX.LATITUDE] || 0,
d[DATA_INDEX.GEO_ALTITUDE] || 0
],
getOrientation: d => [verticalRateToAngle(d), -d[DATA_INDEX.TRUE_TRACK] || 0, 90],
transitions: {
getPosition: REFRESH_TIME * 0.9
}
});
return (
<DeckGL
layers={[layer]}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
getTooltip={getTooltip}
>
<StaticMap
reuseMaps
mapStyle={mapStyle}
preventStyleDiffing={true}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
);
}