Animated map chart

 
Animated graphs can be a powerful tool for visualizing data and telling stories. Using JavaScript and the Highcharts Maps library, it’s possible to create interactive and engaging maps to help bring data to life.

In this article, I will show you how to create an animated map line. Spoiler alert, it is surprisingly easy using Highcharts Maps.

Let’s get started 🙂

The idea is to create the following animated map (see below). The map displays the early coffee bean journey in the world.
 

There are ten countries involved in the early coffee trade. In this case, I create 10 points on the map, one for each country, and seven lines to display the trade between the countries.

There are three main steps to create such as chart:

1. Set up the lines between points
2. Set up the map points in each country
3. Create the line animation

1. Set up the lines

To create the lines between the countries, I use the following geometry option:

geometry: {
    type: 'LineString',
    coordinates: [
        [48.516388, 15.552727], // Yemen
        [110.004444, -7.491667] // Java
    ]
},

The type is LineString to create a line, and the coordinates to point the beginnings and the start of the line. Easy right 🙂

2. Set up the map point

Like the previous step, to create the point on the map I use the same option geometry:

geometry: {
    type: 'Point',
    coordinates: [48.516388, 15.552727] // Yemen
},

Notice that the type is Point instead of LineString.

3. Create the line animation

The demo’s last step is adding the animation to the lines. For that, I use the following code:

#container {
  min-width: 320px;
  max-width: 800px;
  height: 500px;
  margin: 1em auto;
}

.animated-line {
  stroke-dasharray: 8;
  stroke-dashoffset: 10;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 20;
  }
}

The first part creates the line characteristic, whereas the second part creates and controls the animation.

That is it; it is simple, right!