# Animate Point Along an Arc in MapBox
Have you ever wanted to animate a point along an arc in MapBox? In this blog post, I'll show you how to do just that! I'll also provide code examples to get you started. So, whether you're a developer or a student, read on!
This project is inspired by a case study made by [Fantasy.co](https://fantasy.co/). You can still find the project description at the [Fantasy.co website](https://fantasy.co/legacy/fi-airlines/).
![flight-interesting-ux.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668482497024/uwkjZxOul.png align="left")
## The Packages Used For This Project
* [Mapbox GL JS](https://www.mapbox.com/mapbox-gljs). Mapbox GL JS is a JavaScript library for vector maps on the Web.
* [turf](https://turfjs.org/). Turf is an advanced geospatial javascript tool that is simple to use and runs very fast.
## File setup
For this simple project, we only need to have three files. An `index.html`, a `style.css` and a `map.js`. The content of `index.html` and `style.css` are detailed here. I will talk about the content of `map.js` in more detail later.
### index.html
```html
Animated
```
### style.css
```css
#map {
width: 600px;
height: 600px;
}
```
Now that we have the `index.html` and `style.css` let's move on to the juicy stuff.
## Making Semi-Circle Path
First, let's make the semi-circle path. There are many ways to make a path between two points. But, in this article, I created a number of new coordinates between the start and end points. Creating more points is also helpful since we will animate a marker using these new coordinates later. More points will generate a smoother animation.
The idea of the process is as follows:
1. Get the midpoint between origin and destination. Also, get the bearing and radius of the semi-circle.
2. Translate that midpoint based on the bearing (modified by some angle) and the radius.
3. Repeat this process multiple times. In this article, I make 1000 additional coordinates between the origin and destination. More coordinates mean smoother lines and smoother animation.
By the end of this process, we will get a list of new coordinates.
![How to make the arc](https://cdn.hashnode.com/res/hashnode/image/upload/v1668482601400/ml7h17q0F.png align="left")
And the function to generate this is as follows.
```javascript
// Generate arc from start point to the end point.
// The segments parameter tell us how many
// new point should we generate.
function generateArc(start, end, segments) {
// Get the mid point between start and end
let midPoint = turf.midpoint(start, end);
// Get the bearing
let bearing = turf.bearing(end, start);
// Get half of the distance, because we
// start from the midpoint.
let distance = turf.distance(start, end) / 2;
// Add the start coordinate
let arc = [start.geometry.coordinates];
// We devide 180 angle by segments, and for each angle
// we transform the mid point by distance and an angle.
for (let angle = 0; angle < 180; angle += (180/ (segments))) {
let rotatedPoint = turf.transformTranslate(midPoint,
distance,
bearing - angle);
arc.push(rotatedPoint.geometry.coordinates);
}
// Add the last coordinate
arc.push(end.geometry.coordinates);
return arc
}
```
![Semi Circle](https://cdn.hashnode.com/res/hashnode/image/upload/v1668482651372/3Sin6LSVQ.png align="left")
## Animate a Marker
Once we created a bunch of new coordinates. We can start moving a point or a marker between these coordinates.
So for every coordinates pair we created from the previous step, we will:
1. rotate our marker using `turf.bearing` .
2. move the marker using `mapbox.getSource().setData()`
In the reference, the animation slows down halfway. So I tried using some ease-out functions from https://easings.net/, but the result was not quite what I wanted. So I decided to simply slow down the animation when the marker reached halfway.
```Javascript
function animate(map, counter, route, point, source_id, segments) {
const start =
route.features[0].geometry.coordinates[
counter >= segments ? counter - 1 : counter
];
const end =
route.features[0].geometry.coordinates[
counter >= segments ? counter : counter + 1
];
if (!start || !end) return;
// Update point geometry to a new position
// based on counter denoting the index to access the arc.
point.features[0].geometry.coordinates =
route.features[0].geometry.coordinates[counter];
// Calculate the bearing to ensure the icon is
// rotated to match the route arc.
point.features[0].properties.bearing = turf.bearing(
turf.point(start),
turf.point(end)
);
// Update the source with this new data
map.getSource('point-' + source_id).setData(point);
// Request the next frame of animation
if (counter < (segments/2)) {
// Before halfway, just run the animation
// as normal.
requestAnimationFrame(function() {
animate(map, counter, route, point, source_id, segments);
});
} else {
// Slow down the animation after half way.
let fps = 20
setTimeout(() => {
requestAnimationFrame(function() {
animate(map, counter, route, point, source_id, segments);
});
}, 1000 / fps);
}
counter += 1;
}
```
## Zoom Level
Another thing I like to do is to set a proper zoom level. For this, I utilize the `fitBounds` functionality. To correctly calculate the bounding box, I should probably add the rotated midpoint. But here, I only use the original city coordinates to get the bounding box. And added some padding when I invoked the `fitBounds()`.
```js
let bbox = turf.bbox(turf.points(cityCoordinates));
map.fitBounds(bbox, {
linear: true,
easing: function(x){
return x * x * x;
},
padding: {top: 100, bottom:100, left: 100, right: 300}
});
```
## All together now
With all of the above, we can write our `map.js` as follow.
### map.js
```js
// Set origin, destination, and route
//
// Cities
const cities = {
"JKT": [106.8227, -6.208763],
"SG": [103.8198, 1.3521],
"KL": [101.693207, 3.140853]
}
var cityCoordinates = Object.keys(cities).map(function(key){
return cities[key];
});
// Route
const routes = [
[cities["JKT"], cities["SG"]],
[cities["SG"], cities["KL"]],
];
// Map setup
//
mapboxgl.accessToken = '