Visualize and animate the evolution of population data

In this tutorial, we will learn how to visualize and animate the evolution of the Global population density data with the MapTiler SDK Weather module.

Along with this tutorial, there is a news article about advanced data visualization and two more tutorials on preparing the data and processing it in MapTiler Engine:

At MapTiler, we have developed the Weather library and we provide data to create many different animated layer types (temperature, wind with particles, cloud coverage, etc.) in a super easy way. This library could also be used for non-weather raster data visualization, animated and interpolated over time. And this is exactly what we are going to do with the population density!

Since we are going to display the population data on a map, let’s first create an instance of a map. Copy the following code, paste it into your favorite text editor, and save it as a .html file.
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
Create a custom layer using the MapTiler Weather Tilelayer. The TileLayer consists of multiple timeframes, every frame is a tile pyramid at a different moment in time. The individual frames are smoothly animated.
We use the TURBO color ramp because it has a linear luminance, but there are more colorblind-friendly alternatives if your application requires it (for example, CIVIDIS).

Here is what the TURBO color ramp looks like:
Adding the tilesets from MapTiler Cloud as sources. In this example, we will use the population density tilesets generated in the Global Population Density Data Processing tutorial.
Add the custom layer to the map
If we reload the map, we can see the population layer corresponding to the first dataset (year 2000). Next, we are going to add a time bar to our application so we can animate the population layer.
Create a slider bar to animate the population layer by years.
Add the functionality to the slide bar to select dates between the years 2000 and 2020.
Style the slide bar.
Finally, we will add the functionality of showing the population density corresponding to the cursor position.
Create the HTML elements to display the population density values.
Style the text that displays population density values.
Select the HTML element where to display the information related to the population density and create the variable where to save the cursor position.
Capture the mousemove event to display the population density values corresponding to the cursor position.
We already have our map working, now we are going to add a button to play/pause the map animation.
Style the button and position it next to the time slider
Get the button to add some events so you can animate the map.
Play/pause the animation when the button is clicked.
Update the time slider and date based on the animation time.
Congratulations, you have created an animated map that shows global population density between the years 2000 and 2020.

View complete source code

Conclusion

As we can see in the example when it comes to time-wise interpolation and animation, the population density has not changed that much since the year 2000, so we only see minor variations.

This is just an example of what we can build. Here are other ideas of visualization you could build using a comparable process as a hobby or that could suit your business: