I am new on Leaflet/OpenLayers. I have been searching the internet for a way to create a temperature map like the one below, but I didn't succeed...the only thing I made was a classical heatmap, but not even closer to this example.

This is the scenario:

  • I have 5100 coordenates (longitude, latitude, metric)
  • This metric varies from 0 to 1

I want to implement a temperature map like the one below(from openlayers 3 cookbook):

enter image description here

I'm not looking for a 'ready to go' tool or a straightforward answer, I just want a 'direction'.

What I have implemented so far looks like this(completely different from the one above):

enter image description here

  • 1
    Is your data irregularly spaced? If it is, then you need to interpolate it to a grid using one of many techniques - inverse distance weighting, kriging etc.
    – Spacedman
    Aug 9, 2018 at 22:41
  • @Spacedman Yes, it's completely irregularly spaced. I do neet to interpole it, but how I get the temperature effect like in the first map? Aug 9, 2018 at 22:51

1 Answer 1


I will argue that this is not a job to be done in a web browser, but rather on the backend. I am not aware of any library or plugin that performs the necessary transformations in a web browser.

You need to perform gridding on your data, in order to convert your vector (point) dataset into a raster dataset. For this, gdal_grid does the job (although you can use other GIS tools for this).

After that you'll have a raster file with values ranging from 0 to 1 for each cell (read "for each pixel"; this is since your original data values range from 0 to 1). You'll probably want to convert that raster image into a 3-channel RGB raster image. For this, gdaldem does the job (once again, you can use other GIS tools).

Lastly, if your goal is to display this in Leaflet/OpenLayers, then you'll need to slice the raster image into tiles to achieve some performance. See gdal2tiles and similar tools.

  • Thanks @IvanSanchez! Seems that your approach is exactly what I was looking for. I will try it today. Aug 13, 2018 at 17:59
  • i found this extremely helpful. Feb 18, 2021 at 2:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.