I'm building an App with Mapbox-gl and mapbox-gl-directions with React.js. The code is quite simple and it works perfectly. However I need to retrieve the data corresponding to the Km in order to calculate costs per km.
I see the data in the dev tools under the Network tab - Preview. So my question is, how can I retrieve that data? I cannot find any information online...
This is my code:
import React from 'react';
import './App.css';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_KEY
class App extends React.Component {
componentDidMount() {
this.handleDirections()
}
handleDirections() {
const map = new mapboxgl.Map({
container: this.mapWrapper,
style: 'mapbox://styles/mapbox/streets-v10',
center: [-73.985664, 40.748514],
zoom: 12
})
const directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/driving',
annotations: 'distance'
})
map.addControl(directions, 'top-left');
}
render() {
return (
<div
ref={el => (this.mapWrapper = el)}
className='mapWrapper'
/>
)
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I'm quite new and I'm not sure if what I want to do is possible or not.
Thank you in advance for your help