I need to draw a heatmap, but only over water because I want to represent water heat level. I am using Leaflet. How can I do it?

I found an only-water layer, maybe it would be usefult for developing a solution: http://openlayers.org/en/v3.2.1/examples/tile-vector.html?q=tile


An option would be: 1. draw water + 2. draw noise + 3. draw land. However, I can not find a way to draw only the land-side of a map.

Another option would be, before painting, discarding the points that are not water. Would it be possible in the client side?

  • 1
    In WebGIS, algorithms which require intensive computing, like heatmap with a mask are not recommended to do on the client side. You can make such a layer in a desktop environment and publish it with a map server, or you can generate the heatmap on the client side and put a transparent only land layer on the top of it (demo.opengeo.org/geoserver/maps/…). Mar 31 '15 at 7:43
  • Thanks @GaborFarkas We already tried to serve the heatmap as a raster with Geoserver, but it was extremely slow. Moreover, heat information is produced every x minutes by a server, and can not be edited manually. Leaflet heatmaps plugin provide a good efficiency in the client side, so we decided to use them.
    – pedromateo
    Mar 31 '15 at 10:34
  • BTW, is there any way to say that water in a map layer must be transparent?
    – pedromateo
    Mar 31 '15 at 10:38
  • 1
    Then consider this example as a starting point: jsfiddle.net/GFarkas/7ds24ftr .Transparency can be achieved by publishing a map in a format which supports alpha channel (like png), then calling with transparency option set to true. This can be done easily with a WMS. Mar 31 '15 at 10:42
  • last comment by @GaborFarkas could be an answer. In short: draw a land layer above the heat map, not the water
    – toms
    Mar 31 '15 at 16:21

In WebGIS, algorithms which require intensive computing, like heatmap with a mask are not recommended to do on the client side. As the data source changes rapidly, the easiest way would be to render the whole as a heatmap layer and mask it with a WMS layer. The WMS should only have landmass data, and the transparency should be set to true. An example can be found here.

You should note some of the particularities of the library prior to deploying:

  • The Z index of the tile and vector layers are handled separately. To place the tile layer on the top of the vector, you have to set the whole tile container's Z index greater than the overlay container's. This way, you can't load a water layer below the heatmap and a landmass layer above it.
  • You can define the maxNativeZoom property of the layer. The example layer's maximum zoom is 7. This way the library will scale the tiles on greater zoom levels. The result won't be pretty, but it will work.

There are alternative ways to achieve your goal. One consideration would be to use vector data to mask out the landmass. This way you can use a normal tile source like MapQuest, render the heatmap over it, then render the land boundary vectors on the top of the heatmap. As Z indices can be set on similar layers with the zIndex property, you can easily render the land vector on the top of the heatmap, while the tile source will be on the bottom of the stack.A simplified world boundaries vector in GeoJSON format is hosted by the OpenLayers website.

Discarding superfluous points could be done on the server side by a PIP (point in polygon) algorithm, on the client side it would cause such overhead, it wouldn't worth it (especially if you have a great number of points which I assume is the case).

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.