Tutorials

Highcharts Geoheatmap

by

Mustapha Mekhatria

3 minutes read

In this tutorial, I will walk you through creating an interactive Geo Heatmap using Highcharts. I will use Highcharts’ map module and geo heatmap module to visualize global land and sea temperature and radiation in August 2022 on a world map (see below)

Let’s get started 🙂

Library

I am using of course the main library highmaps.js to access the basic features and options ;), and the geoheatmap.js that allows me to extends Highcharts basic library to support geo heatmaps. I am also using font-awesome.css for the icon-spinner.

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/geoheatmap.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

2. Data

For this demo, I use the world-continents.topo.json as it provides simple contours of the continents. I fetch the geoheatmap earth data from three different JSON files:

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.

datasets = [{
  type: 'Land Surface (day) and Sea Temperature',
  title: 'Land Surface (day) and Sea Temperature in August 2022',
  url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@ff78574898/samples/data/geoheatmap-land-sea-day-temp-august-2022.json',
  colorAxis: {
    // ...color configuration for the heatmap...
  },
  data: landDayData
}, {
  // ...similar structure for other types of data...
}];

3. Series

Now, the secret ingredient is in the series object:

series: [{
  name: 'GeoHeatMap series',
  type: 'geoheatmap',
  interpolation: {
    enabled: true
  }
}, {
  nullColor: '#383838',
  type: 'mapline',
  name: 'Outlines of the Continents',
  data: Highcharts.geojson(topology)
}]

These series configurations define how the data is represented visually on the chart. The geoheatmap series displays the heatmap data with interpolation, while the mapline 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.

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.