Displaying raster data on map in leaflet

Question

I have a trouble with displaying raster data on leaflet maps.

There is an float NxM array and RGB scale. I want to add new layer with the colorful tiles. I tried just to draw rectangles, but it's incredibly slow displaying. I noticed method L.GridLayer.extend(), but I didn't find any examples of what I want (just simple grid with text of coords on each tile).

Can somebody give an example where the raster data displayed by this or any other method?

Answer 1

If you look at the list of Leaflet plugins, you'll see quite a few that do per-pixel raster manipulation, including:

• L.TileLayer.BPG: extends tilelayer, loading a tile means rendering a <canvas> and dumping its contents into the <img>
• L.TileLayer.PixelFilter: loads an image and replaces individual pixels
• Leaflet-fractal: Displays the mandelbrot set, calculating each pixel of a <canvas>
• L.TileLayer.GL: Manipulate images with WebGL. Very useful and fast for heavy computations (fractal sets are several orders of magnitude faster) or manipulating existing images. Do have a look at the hypsometric tint demo; it will be useful if your NxM array is in any kind of graphical format (as the "terrain-rgb" tiles).