How to Animate Map Markers Using Mapbox and React Hooks

Beautiful mapping experiences are game-changers in apps. How do we make this happen in a web app?

Everyone takes notice of an app that has a good map experience. We’ve all seen mobile apps that makes this happen: you’re waiting on your ride share and can actually see your driver getting closer! So how do we make this happen on a web app?

Mapbox

I prefer Mapbox over Google Maps for a few reasons, mainly that I find it more performant. The following examples will be using React and a third party NPM module, react-mapbox-gl. You can do all the same using vanilla JS and your view library of choice.

Map Setup (React-mapbox-gl Example)

Once we have our map set up and rending, we can create our animated marker. This can be using a marker, or a symbol like in the example above. We’re also going to use another package called Turf. Turf is basically lodash for map functions. It’s very handy.

React Hooks

React Hooks are all the hype recently. Hooks allow us to leverage a lot of the features we’re used to with class-based components, without the overhead of classes. In this example we are going to use two different hooks, useState and useEffect.

Component Setup

Our component is going to accept a prop that is an array of locations for a given period of time. I’m assuming your application is updating the location data every so many seconds. If you have a more event-based pattern such as web sockets, more power to you 👏. The first thing we want to do is initialize the current location we will be giving to our map provider.

const [currentLocation, setCurrentLocation] =…