[GIS] How to implement a temperature map using leaflet/openlayers

heat mapleafletopenlayersopenstreetmap

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):

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):

Best Answer

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.

Related Solutions

[GIS] Leaflet Heatmap Dynamic data layer

You can load dynamically (with ajax) your PHP file and set the content into testData var, as in your previous script. Then execute your original script without any changes.

Note that you will use $.ajax() jquery method to be able to set 'async': false option.

var testData = (function () {
var testData = null;
$.ajax({
    'async': false,
    'global': false,
    'url': 'pat/to/your/heatMapData.php',
    'dataType': "json",
    'success': function (data) {
        testData = data;
    }
});
return testData;
})();

Be sure your PHP file return the wanted values and a well-formated json file. It can be tested online.

[GIS] How to make focus on Leaflet marker with a click from another window

Since you want your child window to communicate with parent window, it will need some Java Script code, which is simpler to implement if you create separate page for child window.

Parent window will send lat,lng coordinates as arguments to child window. Child window will on click call Java Script function in parent window, with lat,lng parameters. This function will then flyTo to desired coordinates.

Parent window Java Script code modification:

function onMapClick(e) {
    var popup = L.popup()
    .setLatLng(e.latlng)
    .setContent("<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>")
    .openOn(mymap);
    var lat = marker.getLatLng().lat;
    var lng = marker.getLatLng().lng;
    var myWindow = window.open('child.html?lat=' + lat + '&lng=' + lng, "MsgWindow", "width=200,height=100");
};

 function flyToLatLng(lat, lng) {
    mymap.flyTo([lat, lng], 15);
 };

Child page child.html:

<!DOCTYPE html>
<html>
<head>
  <title>MsgWindow</title>
   <meta charset="utf-8" />
</head>
<body>
<p>This is 'MsgWindow'ty for helping</p>
<p id="latlng" style="background-color: #E5E5E5; cursor: pointer"></p>

<script>
  // quick dirty solution to get arguments lat and lng
  var lat = location.search.match(/lat=([^&]+)/)[1]; 
  var lng = location.search.match(/lng=([^&]+)/)[1];

  document.getElementById('latlng').innerHTML = lat + ', ' + lng;

  document.getElementById('latlng').addEventListener('click', function() {
    window.opener.flyToLatLng(lat, lng);
  });

</script>

</body>
</html>

Best Answer

Related Solutions

[GIS] Leaflet Heatmap Dynamic data layer

[GIS] How to make focus on Leaflet marker with a click from another window

Related Question