For the sake of simplicity, we are gonna use the create-react-app utility.
Simply start by the following commands:
We use the
--template redux flag to set up a Redux store in our app, since KeplerGL depends on Redux to work properly.
You should now have a React application running at http://localhost:3000.
In order to get Mapbox to work, you will first need to get a Mapbox token. To get one, you will need to create an account here. We can now add react-map-gl to our application:
In our main
App.js file, we can then import at the top
We can now use the
MapGL component. Let start with cleaning up the previous default code.
We now have a Mapbox map instance visible in our app homepage.
We can now call Spire Aviation Tracking History endpoint and get data from an aircraft.
Let's start by creating a function that does that. We will need to import the redux hook
useDispatch, which we will use to dispatch our success action to our
We can now use a
useEffect hook, calling the API once on component mount:
If you feel like going the extra mile, you should directly create a form to select the ICAO address and dates you are interested in with a submission button that triggers the call to the API.
Here, we will call the API, filtering data for the ICAO address
398568, for a one day period.
The response of our query to the Tracking History needs to be parsed. It is a set of JSON objects, each separated by a new line.
To parse that, we will use the
split function and then loop through each line, parsing the JSON inside it:
We can now create our Redux store where we will store the parsed results. Let's start by creating a new folder named
src/reducers, with a
aircraftReducer.js file in it.
We can also update our
store.js file to take this new reducer into account:
In order to plot the data, we first need to select it from the redux store.
Let's add a
useSelector hook in order to select our data.
Now, let's create a new state variable, called
plot, that we will use for storing the aircraft plotted data.
We will also need to create a
useEffect hook, that will listen to changes on our
data state value, and generate/set the associated plot.
Finally, we need to add the Mapbox
<Layer> that will display the GeoJSON plot:
We also need to add the
We now have a plot visible on our map!
One final thing we can add is the centering of the map where the aircraft plot is upon loading. We will simply update the
viewport of our map after receiving the new data.
Now, let's see how we can do to have our points clickable, so we can get details upon a specific point when clicking it.
We will add 3 props to our
Let's break down those newly added props:
- We added
interactiveLayerIds, which describes which layers will have interactivity, and thus click events. If you remember, we added a
pointLayerearlier in our code, containing the property
idis what is used to identify the
- We also added the
clickRadiusto set how close the mouse needs to be from a point for the click event to be dispatched.
- We also added our
onClickhandler, which receives a function as a parameter. The function has one parameter, which is a click event. In that even we can look for
features, from which we will pick the first one. Thanks to our
setPloteffect, we have the
propertiesset in that
By adding a new state variable
clickedPoint, we can have the clicked point updated and displayed in our interface.
Let's now look at how we could animate our aircraft over its course. For that, we will need to add:
- A toggle button to have the static path or the animation mode
- The new
<Marker>component used for our animation, containing the svg of our aircraft.
- Two new state variables,
modewill be used to toggle between modes, and
animationIndexwill contain the current index in the data array from which we create our animation.
Now, we need to create the actual animation, so we will loop through our data by increasing a data index in an interval callback. For that, we will create a new custom hook named
We can now use our
useInterval hook to animate our aircraft!
If we switch over to the Animation mode, the aircraft position will change every 10ms on our map.
We could improve that example by plotting the aircraft route in the same layer as our animation. We could also improve the design of the page, adding loading etc ...