demo of image processing using leaflet map tiles about image-sequencer HOT 9 CLOSED

This could be done by setting up a basic Leaflet map in an example, and using this listener to find when tileLayers are loaded: https://stackoverflow.com/questions/27378572/leaflet-fire-event-when-tile-layer-loading-begins-and-ends#27379032

layerInstance.on('load', function (event) {
    // fetch all the tile URLs, so in jQuery:
    $('img.leaflet-tile');
});

Then use the new replaceImage() method on them!

from image-sequencer.

Sorry, I am still unable to make out...
What are we trying to accomplish with leaflet.js?

from image-sequencer.

from image-sequencer.

Just a followup fleshing this out a bit more; the demo could be later built out into a plugin named Leaflet.TileFilter: A Leaflet plugin that accepts a pixel compositing function and runs it on every pixel of incoming tiles, on the fly

function filter(pixel) { // [r, g, b, a]
  var ndvi = (r + b) / (r - b);
  return [ndvi, ndvi, ndvi, 1]
}

var src = "http://tilesource.com/..."

var tileFilter = new Leaflet.TileFilter(filter, src);

// tileFilter acts like a tile layer

tileFilter.update(filter);

from image-sequencer.

This looks nice!

from image-sequencer.

Yay this is now possible!

Go here and drag the NDVI bookmarklet into your bookmarks bar: https://publiclab.org/wiki/imagesequencerbookmarklet#NDVI

Then go here: https://publiclab.github.io/Leaflet.DistortableImage/examples/

and click the bookmarklet!

from image-sequencer.

@jywarren you want to open a new issue using this one? Thanks!

from image-sequencer.

Which part do you think? Breaking it out as a plugin? Thanks, Gaurav?

from image-sequencer.

I've spun this into it's own Leaflet plugin here: https://github.com/publiclab/leaflet-multispectral and submitted it to the Leaflet Plugins listing here: Leaflet/Leaflet#6499

from image-sequencer.