{"id":24387,"date":"2023-10-31T08:42:57","date_gmt":"2023-10-31T08:42:57","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24387"},"modified":"2026-01-13T11:38:09","modified_gmt":"2026-01-13T11:38:09","slug":"highcharts-geoheatmap","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-geoheatmap\/","title":{"rendered":"Highcharts Geoheatmap"},"content":{"rendered":"<p>In this tutorial, I will walk you through creating an interactive Geo Heatmap using Highcharts. I will use Highcharts&#8217; map module and geo heatmap module to visualize global land and sea temperature and radiation in August 2022 on a world map (see below)<\/p>\n<p class=\"demo-container\"><iframe loading=\"lazy\" style=\"border: none;\" title=\"This world map visualizes global land and sea temperature and radiation in August 2022\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/maps\/demo\/geoheatmap-earth-statistics\" width=\"100%\" height=\"670px\"><\/iframe><\/p>\n<p>Let\u2019s get started \ud83d\ude42<\/p>\n<h2>Library<\/h2>\n<p>I am using of course the main library <code>highmaps.js<\/code> to access the basic features and options ;), and the <code>geoheatmap.js<\/code> that allows me to extends Highcharts basic library to support geo heatmaps. I am also using <code>font-awesome.css<\/code> for the <code>icon-spinner<\/code>. <\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/maps\/highmaps.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/maps\/modules\/geoheatmap.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/maps\/modules\/exporting.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/code.highcharts.com\/maps\/modules\/accessibility.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;link href=\"https:\/\/netdna.bootstrapcdn.com\/font-awesome\/3.2.1\/css\/font-awesome.css\" rel=\"stylesheet\"&gt;<\/pre>\n<h2>2. Data<\/h2>\n<p>For this demo, I use the <code>world-continents.topo.json<\/code> as it provides simple contours of the continents. I fetch the geoheatmap earth data from three different JSON files:<\/p>\n<ol>\n<li><a href=\"https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@ff78574898\/samples\/data\/geoheatmap-land-sea-day-temp-august-2022.json\" target=\"_blank\" rel=\"noopener\">Land Surface (day) and Sea Temperature<\/a><\/li>\n<li><a href=\"https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@ff78574898\/samples\/data\/geoheatmap-land-sea-night-temp-august-2022.json\" target=\"_blank\" rel=\"noopener\">Land Surface (night) and Sea Temperature<\/a><\/li>\n<li><a href=\"https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@ff78574898\/samples\/data\/net-radiation-august-2022.json\" target=\"_blank\" rel=\"noopener\">Net radiation in August 2022<\/a><\/li>\n<\/ol>\n<p>I create an array called datasets to keep track of the three sets. As you can see, it is super easy to create a structure to visualize the data in the different JSON files.<\/p>\n<pre>datasets = [{\r\n  type: 'Land Surface (day) and Sea Temperature',\r\n  title: 'Land Surface (day) and Sea Temperature in August 2022',\r\n  url: 'https:\/\/cdn.jsdelivr.net\/gh\/highcharts\/highcharts@ff78574898\/samples\/data\/geoheatmap-land-sea-day-temp-august-2022.json',\r\n  colorAxis: {\r\n    \/\/ ...color configuration for the heatmap...\r\n  },\r\n  data: landDayData\r\n}, {\r\n  \/\/ ...similar structure for other types of data...\r\n}];<\/pre>\n<h2>3. Series<\/h2>\n<p>Now, the secret ingredient is in the series object:<\/p>\n<pre>series: [{\r\n  name: 'GeoHeatMap series',\r\n  type: 'geoheatmap',\r\n  interpolation: {\r\n    enabled: true\r\n  }\r\n}, {\r\n  nullColor: '#383838',\r\n  type: 'mapline',\r\n  name: 'Outlines of the Continents',\r\n  data: Highcharts.geojson(topology)\r\n}]<\/pre>\n<p>These series configurations define how the data is represented visually on the chart. The <code>geoheatmap<\/code> series displays the heatmap data with interpolation, while the <code>mapline<\/code> series draws the outlines of continents on the map. By defining multiple series in the series object, I can create complex and layered visualizations on the map, enhancing the depth and richness of the displayed information.<\/p>\n<p>This demo demonstrates the power of Highcharts for creating interactive and visually appealing data visualizations. It showcases the flexibility to handle multiple datasets, the ability to load data dynamically, and the user-friendly interface for exploring complex environmental data patterns on a global scale.<\/p>\n<p>\u00a0<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/stock-chart-examples-using-highcharts-stock\/\">Stock chart examples using Highcharts Stock<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/stock-charting-with-highcharts\/\">Stock charting with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/financial-charts-with-highcharts\/\">Financial charts with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/intraday-chart-examples-using-highcharts\/\">Intraday chart examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/climate-data-visualization-using-highcharts\/\">Climate data visualization using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/real-time-data-visualization-using-highcharts\/\">Real-time data visualization using Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a Highcharts Geoheatmap step by step.<\/p>\n","protected":false},"author":32,"featured_media":24389,"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-24387","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\/24387","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=24387"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24387\/revisions"}],"predecessor-version":[{"id":26045,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24387\/revisions\/26045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24389"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24387"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}