GeoTIFF/georaster-layer-for-leaflet

CanvasRenderingContext2D/filter --> using georaster from url

zmcfire opened this issue · 2 comments

zmcfire commented

Hi Daniel - Thanks for awesome leaflet/georaster work. I am trying to explore adding canvas filters to georaster url image. Not sure where to start. Do you have any comment? Any response appreciated! Jeff

Far below is the javascript for display of single band geotif, with url, with defined hexcolors.

Something like:

<style type="text/css"> .myclass { filter: blur(5px); } </style>

L.tileLayer(url, {className: 'myclass'});

Or Something like:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.filter = "blur(4px)";
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

Below this is working without filter:

// Add raster

console.log("Start raster");

map.createPane('gust');
map.getPane('gust').style.zIndex = 300;
map.getPane('gust').style.pointerEvents = 'none';

let gust1 = "http://localhost:1337/raster.tif";

     fetch(gust1)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {

     parseGeoraster(arrayBuffer).then(georaster => {

      const min = georaster.mins[0];
      const max = georaster.maxs[0];
      const range = georaster.ranges[0];

      console.log("georaster:", georaster);
      console.log(chroma.brewer);

	    var scale = chroma.scale(['#6271b7','#39619f','#4a94a9','#4d8d7b','#53a553','#359f35','#a79d51','#9f7f3a','#a16c5c','#a16c5c','#813a4e','#af5088','#754a93','#6d61a3','#44698d','#5c9098','#7d44a5','#e7d7d7','#dbd487','#cdca70','#808080']).domain([0,2,7,11,16,20,25,29,34,38,43,47,54,60,65,81,103,114,172,233])
        var gust2 = new GeoRasterLayer({
        attribution: "zmc.alert@gmail.com",
        georaster: georaster,
        debugLevel: 1,
        resolution: 2048,
        resampleMethod:"spline" ,
        rgb: "false",
        project: "true",
        opacity: .9,
        pane: 'gust',

         pixelValuesToColorFn: function(pixelValues) {
		                  var pixelValue = pixelValues[0];
		                  if (pixelValue === 0) return null;
              			  return scale(pixelValue).hex();

}

});

 gust2.addTo(gust);

});

});

console.log("END Raster");

DanielJDufour commented

Hi, @zmcfire . Just wanted to say I saw this and think it's an awesome suggestion. I haven't done context filters before, so will have to read up. Perhaps an interim step could be exposing the canvas through a pre- or post-processing hook. Also open to PRs if it's something you'd like to take on. Have a great day!

zmcfire commented