4

In a Leaflet app I want to overlay raster data (technically speaking, a field) on a web map. The data consists of triples < lat,lon,value >, where value is in range [0,1], for example:

23.33,10.55,0.54
23.331,10.55,0.5
23.331,10.56,0.4
...

I tried with a heatmap plugin, but it doesn't really support field visualization (it's a visualization of points, regardless of their values). This is an example of what I mean from a GIS.

enter image description here

How can I achieve that in Leaflet, without switching to a full-fledged GIS?

  • Hi, I know this is old, but for future reference and visitors, you may have a look at this plugin I have developed: ihcantabria.github.io/Leaflet.CanvasLayer.Field It loads ASCII Grid & GeoTIFF files as layers in a Leaflet map, without any server components, just client rendering – Víctor Velarde May 29 '17 at 15:58
3

If this is typical raster data (or can be converted into typical raster data), I can think of a couple of options:

  1. Use a map server (like MapServer, GeoServer) to host the raster data, and pull this into Leaflet via WMS

  2. Assuming you can symbolize this the way you want it to look in a GIS (e.g. QGIS), and export as an image, you could then use a tool such as gdal2tiles or MapTiler to cut the image into tiles that you can then use with Leaflet. This blog post goes into the details and requirements for using these tools, but here are some of the most relevant parts:

On success, both tools will output a set of tiles in this format (tiles is just a placeholder for whatever you want to call the parent directory):

tiles/{z}/{x}/{y}.jpg

With this in place, you can use leaflet to display the tiles. Here is some basic html and javascript to get you started:

<html>
<head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 700px; height: 500px"></div>


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script>
        // You can set the view to the coordinates and zoom you need
        var map = L.map('map').setView([0, 0], 2);
        // make sure to change the tile url to whatever you named your folder
        L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
            minZoom: 1, // change these as needed
            maxZoom: 10,
            tms: true
        }).addTo(map);
    </script>
</body>
</html>

As noted, make sure the tms parameter is set to true.

I assume this will work locally, but of course, you will probably eventually want to put these on a server.

  • Thank you, but actually the raster is generated dynamically from a server, so I can't really pre-computed and make it into tiles. – Mulone Oct 16 '14 at 4:44
  • i have a similar situation - we are looking to programmatically retrieve the data, generate the images/tiles, and move the images back to the webserver using a scheduled task. It's a bit arduous, but it can be done. – fluidmotion Oct 16 '14 at 10:01
  • if its an xyz lattice with potentially thousands of individual points, I think you'll have to do more manipulation before getting this into Leaflet. Maybe look for tools to convert xyz to an image, such as GMT/GDAL/R. – toms Oct 16 '14 at 17:15
  • Somebody should write a Leaflet plugin to generate raster overlays. Any takers? :-) – Mulone Oct 16 '14 at 17:38
  • I have a similar situation - point data stored in PostGIS database and I need display heatmap of this points in web. I write shell script (put in cron for automatically update raster if changes values in points) which make next: 1. convert data from PostGIS table in local csv file (x,y,value) 2. using gdal_grid command I receive TIFF raster from values of csv file (invdist interpolation algoritm). 3. this raster clip by polygonal shapefile (gdalwarp command) 4. and new raster publish in GeoServer via WMS and connect them in Leaflet map – HasT Oct 16 '14 at 19:00
1

I have a similar situation - point data stored in PostGIS database and I need display heatmap of this points in web. I write shell script (put in cron for automatically update raster if changes values in points) which make next:

  • convert data from PostGIS table in local csv file (x,y,value)
  • using gdal_grid command I receive TIFF raster from values of csv file (invdist interpolation algoritm).
  • this raster clip by polygonal shapefile (gdalwarp command)
  • and new raster publish in GeoServer via WMS and connect them in Leaflet map
0

An easy way is to use is the Leaflet plugin: leaflet-canvaslayer-field that adds layers to visualize fields from ASCIIGrid or GeoTIFF (Raster) files. You can also create vector animation in addition to scalar field visualization using that.

Examples here.

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.