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?

Ryan Vanbelkum
May 13, 2019 · 3 min read

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?

Image for post
Image for post

Mapbox

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

Image for post
Image for post

Component Setup

const [currentLocation, setCurrentLocation] = useState(null);

Next, we want to set up our effect, which will essentially walk through our location coordinates array. We’re going to use a web API function called requestAnimationFrame:

Breaking down this effect a little more. To start with, we want to make sure our locations prop isn’t empty (length == 0). If so, we want to return and do nothing else. Once we know we have coordinates, we’ll use Turf to build out our more detailed array of coordinates. This can take an array of X number of items, and create an array of cords however many steps long. Very helpful! Then, we want to define our animate function. This is where we will actually set our state with the current location from our array. Make sure we have a fallback, in case we come up with undefined.

Assuming our timeStep isn’t greater than our number of steps, we’ll continue to call requestAnimationFrame passing it our animate function. Once we run out of steps, the animation will cease from being called. In the example above, we assume we will be getting new locations about every 30 seconds. Below the animate function is our call to cancel the animation frame, and kick off a new frame. This will happen when our array of locations changes. useEffect has a nice way of preventing from running during every component render. That is the second parameter of useState: an array of props to watch and compare.

Render

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store