{"id":22939,"date":"2022-12-13T23:05:29","date_gmt":"2022-12-13T23:05:29","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22939"},"modified":"2026-01-13T11:26:03","modified_gmt":"2026-01-13T11:26:03","slug":"animated-map-chart","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/animated-map-chart\/","title":{"rendered":"Animated map chart"},"content":{"rendered":"<p>&nbsp;<br \/>\nAnimated graphs can be a powerful tool for visualizing data and telling stories. Using JavaScript and the Highcharts Maps library, it&#8217;s possible to create interactive and engaging maps to help bring data to life.<\/p>\n<p>In this article, I will show you how to create an animated map line. Spoiler alert, it is surprisingly easy using Highcharts Maps. <\/p>\n<p>Let&#8217;s get started \ud83d\ude42<\/p>\n<p>The idea is to create the following animated map (see below). The map displays the early coffee bean journey in the world.<br \/>\n&nbsp;<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 600px; border: none;\" title=\"An animated lines on a world map displays the history journey for the coffee bean.\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/maps\/demo\/animated-mapline\"><\/iframe><\/p>\n<p>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.<\/p>\n<p>There are three main steps to create such as chart:<\/p>\n<ol>\n<li>Set up the lines between points<\/li>\n<li>Set up the map points in each country<\/li>\n<li>Create the line animation<\/li>\n<\/ol>\n<h2>1. Set up the lines<\/h2>\n<p>To create the lines between the countries, I use the following <code>geometry<\/code> option:<\/p>\n<pre>geometry: {\r\n    type: 'LineString',\r\n    coordinates: [\r\n        [48.516388, 15.552727], \/\/ Yemen\r\n        [110.004444, -7.491667] \/\/ Java\r\n    ]\r\n},<\/pre>\n<p>The type is <code>LineString<\/code> to create a line, and the coordinates to point the beginnings and the start of the line. Easy right \ud83d\ude42<\/p>\n<h2>2. Set up the map point<\/h2>\n<p>Like the previous step, to create the point on the map I use the same option <code>geometry<\/code>: <\/p>\n<pre>geometry: {\r\n    type: 'Point',\r\n    coordinates: [48.516388, 15.552727] \/\/ Yemen\r\n},<\/pre>\n<p>Notice that the type is <code>Point<\/code> instead of <code>LineString<\/code>.<\/p>\n<h2>3. Create the line animation<\/h2>\n<p>The demo&#8217;s last step is adding the animation to the lines. For that, I use the following code:<\/p>\n<pre>#container {\r\n  min-width: 320px;\r\n  max-width: 800px;\r\n  height: 500px;\r\n  margin: 1em auto;\r\n}\r\n\r\n.animated-line {\r\n  stroke-dasharray: 8;\r\n  stroke-dashoffset: 10;\r\n  animation: dash 5s linear infinite;\r\n}\r\n\r\n@keyframes dash {\r\n  from {\r\n    stroke-dashoffset: 100;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 20;\r\n  }\r\n}\r\n<\/pre>\n<p>The first part creates the line characteristic, whereas the second part creates and controls the animation.<\/p>\n<p>That is it; it is simple, right!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an animated map with Highcharts maps in an easy and straightforward way.<\/p>\n","protected":false},"author":32,"featured_media":22952,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[876,1031],"coauthors":[699],"class_list":["post-22939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-maps","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22939"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22939\/revisions"}],"predecessor-version":[{"id":29373,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22939\/revisions\/29373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22952"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22939"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}