CanvasRenderingContext2D/filter --> using georaster from url

[zmcfire]

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: "[email protected]",
        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]

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]

Hi Daniel - Right now I am just using hrml5 css filter on the custom map pane which has some affect. I’ll dig in to better understand the relationship of the georaster resolution and resample values with the css filter. Thanks for responding! Jeff On Mar 4, 2023, at 8:21 AM, Daniel J. Dufour ***@***.***> wrote: 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! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>