[GIS] Draw heatmap only over water layer using Leaflet

heat mapleaflet

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

Edit:

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?

Best Answer

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

Related Question