The basic things needed for completing this tutorial:
MapTiler API key. Your MapTiler account access key is on your MapTiler Cloud account page.
Test environment or an online editor. Somewhere where are you going to test your code. You can use the web app you are already working on, or just test out the code in an online editor like Codepen.
<head> of your HTML file.
.js file and include it or put it into
<script> tags at the bottom of the page. You will need your MapTiler API key, so your map style works.
Now we will add a map container HTML and simple CSS styling. In
<body> of your page add the container.
And simple CSS styling. For this tutorial, we will make a fullscreen map, but you can style the map to your needs. We use
position: absolute on the map itself and
position: relative on the wrap around the map for more possibilities in future styling if needed.
Now you should see your beautiful map.
Creating an animation
Now we will start coding the animation itself. Our goal is to make simple animation visiting several places. You can see an example at MapLibre.
We'll store our places as objects in an array and create
playAnimation() function to play our animation.
We'll iterate through our array of places and use flyTo function fly to each place in our array. Each place will have location data and animation time data. The time data has two values
start time and
zoom - These are the position values of the place.
bearing - Rotation of the position from -180 to 180
pitch - Angle of the place camera view from 0 to 60.
duration - How long will it take to fly to that place in milliseconds.
start - when will flying to this place start in milliseconds.
playAnimation() function, 'timeline' will be created and played. Each place has set setTimeout using the
start value, this means at the set
start value of the place, the map will fly to set coordinates.
duration will set how long will it take to go to that place. With this logic, the following must always apply.
start time value of the place has to be equal to or bigger than
duration of the place before. When equal the map will fly the place as soon as it hits the previous place.
Let’s start with an array of the places.
For the animation function. Using
forEach we iterate through the array setting timeout for each
Initializing the animation
Now that everything is set up, you can just call the
playAnimation() function the way you need. For our tutorial. We will call the function on windows load and make the animation repeat. First, we will declare a variable which is the last point of the array.
After that, we’ll add a line to call animation on window load, and set an interval function.
lastPoint.start + lastPoint.duration equals the time it takes to finish the whole animation, so the setInterval function will call the
playAnimation() function and the end of the ‘timeline' when the animation finishes. The last point should be the same position as the initial map values so the animation repeats smoothly.
Get your own animation data
Time values you choose for yourself depending on how long you want the animation to be as explained before. As for position values, we will add a simple set of inputs that will show the current position on the map. Add these lines to your
Now we will add basic styling:
Now we will add js code under our map variable declaration which will change input values on map move.
You can add this to a separate HTML page with a map just for your local testing to get the values you want.