[OpenLayers-Users] Dynamic styling of raster data

[Tobias Reinicke]

Hi Luis,

Depending of you can use some html5 functionality, you can use client side
code by using the "getCanvasContext()" method.

I can't remember where I got this from, but this will go through all the
pixels of the osm layer I'm pulling in and greyscale them:

var osmGS = new OpenLayers.Layer.OSM('OSM GreyScale - Client', null, {
    eventListeners: {
        tileloaded: function (evt) {
            var ctx = evt.tile.getCanvasContext();
            if (ctx) {
                var imgd = ctx.getImageData(0, 0, evt.tile.size.w,
evt.tile.size.h);
                var pix = imgd.data;
                for (var i = 0, n = pix.length; i < n; i += 4) {
                    pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 *
pix[i + 1] + pix[i + 2]) / 8;
                }
                ctx.putImageData(imgd, 0, 0);
                evt.tile.imgDiv.removeAttribute("crossorigin");
                evt.tile.imgDiv.src = ctx.canvas.toDataURL();
            }
        }
    }
});

I adapted the above because I wanted to get rid of black areas around
aerial photography, and the below does that:

  tileloaded: function (evt) {
            var ctx = evt.tile.getCanvasContext();
            if (ctx) {
                var imgd = ctx.getImageData(0, 0, evt.tile.size.w,
evt.tile.size.h);
                var pix = imgd.data;

                for (var i = 0, n = pix.length; i < n; i += 4) {
                //    pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 *
pix[i + 1] + pix[i + 2]) / 8;
                 if((pix[i] + pix[i + 1] + pix[i + 2]) < 1){
                   // pix[i] = pix[i + 1] = pix[i + 2] = 255;
                    pix[i+3]=0;
                }
                }
                ctx.putImageData(imgd, 0, 0);
                evt.tile.imgDiv.removeAttribute("crossorigin");
                evt.tile.imgDiv.src = ctx.canvas.toDataURL();
            }
        }


Regards,

Toby



On 4 October 2012 12:29, Luís de Sousa <luis.a.de.sousa at gmail.com> wrote:

> Thank you vGIS and Tom for the replies.
>
> Changing the style server side would be technically possible, but it
> probably wouldn't allow for the kind of interactive user interface we are
> aim at (the user expects to see changes reflected in the map immediatly
> after toggling the threshold value).
>
> Pixastic could work indeed, but I see a good deal of work ahead me. Thanks
> in any case for the clues.
>
> Luís
>
>
>
> --
> View this message in context:
> http://osgeo-org.1560.n6.nabble.com/Dynamic-styling-of-raster-data-tp5006345p5006376.html
> Sent from the OpenLayers Users mailing list archive at Nabble.com.
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20121004/bad190d0/attachment.html>