options not defined

[dcdieci]

I don't get the example code to run because of an console error:

            var map = L.map("map-canvas", {
                attributionControl: false,
                zoomControl: false
            }).setView(L.latLng(47.491695, 11.095498), 12);




            var baseLayer = new L.TileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
                filter: function () {
                    new L.CSSFilter(this, {
                        filters: ['saturate(200%)']
                    }).render();
                }
            });
            map.addLayer(baseLayer);

throws an error

Uncaught ReferenceError: options is not definedL.ChannelFilters.Matrix.L.ChannelFilter.extend.initialize @ leaflet-tilefilter.self.js?body=1:657e @ leaflet.js:6(anonymous function) @ leaflet-tilefilter.self.js?body=1:1044
scaffold.self.js?body=1:3 5

with leaflet version: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

Help would be appreciated

[sfairgrieve]

Thanks for pointing this out. I'll look into it and get back to you soon.

Thanks,

Scott

On Saturday, October 24, 2015, dcdieci notifications@github.com wrote:

I don't get the example code to run because of an console error:

        var map = L.map("map-canvas", {
            attributionControl: false,
            zoomControl: false
        }).setView(L.latLng(47.491695, 11.095498), 12);




        var baseLayer = new L.TileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
            filter: function () {
                new L.CSSFilter(this, {
                    filters: ['saturate(200%)']
                }).render();
            }
        });
        map.addLayer(baseLayer);

throws an error

Uncaught ReferenceError: options is not definedL.ChannelFilters.Matrix.L.ChannelFilter.extend.initialize @ leaflet-tilefilter.self.js?body=1:657e @ leaflet.js:6(anonymous function) @ leaflet-tilefilter.self.js?body=1:1044
scaffold.self.js?body=1:3 5

with leaflet version: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

Help would be appreciated

—
Reply to this email directly or view it on GitHub
#3.

[sfairgrieve]

Looks like it's an issue with the documentation. My apologies. I updated the filter classes so that filter instances are reusable and forgot to update the corresponding documentation. The documentation on the wiki has been updated, but I still need to update the README. Give this a try:

            var map = L.map("map-canvas", {
                attributionControl: false,
                zoomControl: false
            }).setView(L.latLng(47.491695, 11.095498), 12);

            var baseLayer = new L.TileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
                filter: function () {
                    new L.CSSFilter({
                        filters: ['saturate(200%)']
                    }).render(this);
                }
            });
            map.addLayer(baseLayer);

[dcdieci]

@sfairgrieve Thanks for replying. I still get the error. It's not related to the contstructor I guess since I get the error as soon as I include the script without even initalizing L.Tilelayler.
My includes is:

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js" data-turbolinks-track="true"></script> <script src="/assets/lib/PruneCluster.self.js?body=1" data-turbolinks-track="true"></script> <script src="/assets/lib/leaflet-tilefilter.self.js?body=1" data-turbolinks-track="true"></script>

Any ideas?

[sfairgrieve]

Try getting the latest when you get a chance. I think I see what the issue was and fixed it (hopefully).

I would also recommend updating to the 1.0dev version when you can, since it has much better performance, particularly if you plan to use canvas filters.

[wambacher]

same for me. if i just add script src='js/common/leaflet/leaflet-tilefilter.js' , i get this error message too. even if i don't change anything else.
and my existing tilelayer is empty.

leaflet 7.5, master + 1.0dev the same.

had to remove html for script... in this comment

[sfairgrieve]

@wambacher Can you try now with 0.7.5 and the master branch? I just realized I fixed the issue in the 1.0dev branch (or so I thought) and didn't carry over the changes to the master branch. Is the error message you're getting related to the Matrix filter (as dcdieci mentioned above) or something else?

[wambacher]

Hi Scott,

i switched back to master and CSS-Filters are running fine.

Canvas does not run.

Source:
filter: function (image, ctx) {
new L.CanvasFilter({
channelFilter: function (imageData) {
return new L.CanvasChannelFilters.Sepia().render(imageData);
}
}).render(this, image, ctx);
}

error: TypeError: L.CanvasChannelFilters is undefined

Of course i would like to use canvas to get more flexibility ;) But i can go on with css and switch to canvas later.

regards
walter

btw: the current version is leaflet 0.7.7 so i did my test with 0.7.5 and 0.7.7 without differences. css is ok and canvas not.

[sfairgrieve]

I see what the issue is. Looks like the documentation was out of date. L.CanvasChannelFilters should be L.ChannelFilters, so your options should look like this:

{
filter: function (image, ctx) { 
     new L.CanvasFilter({
          channelFilter: function (imageData) {
               return new L.ChannelFilters.Sepia().render(imageData);
          }
     }).render(this, image, ctx);
}
}

[wambacher]

done (0.7.5 + master):

17:14:11.839 TypeError: (intermediate value).render is not a function 21x idx028.jsp:173:23

that is the return-statement of your function.

            filter: function (image, ctx) { 
                           new L.CanvasFilter({
                              channelFilter: function (imageData) {
                                 return new L.ChannelFilters.Sepia().render(imageData);
                              }
                            }).render(this, image, ctx);
                     }

[sfairgrieve]

@wambacher I appreciate the candid feedback and apologize for the current state of the documentation. This is a side project that I started for fun just to play around with the concept of applying image filters to map tiles, not something that I get paid for or have a ton of time to work on - as such I try to support it when I have free time (less and less these days), which is why the documentation is lacking. It's unclear to me why the example I provided is not working, but it's clear I spoke too soon, and I'll provide a better example. I know it seems overly complex due to the lack of documentation, but it's fairly straightforward (I'll add this explanation to the wiki). Most of the complexity comes from trying to make it flexible to allow for developers to provide their own code in certain situations.

filter takes a function that accepts an image and a Canvas context for editing the pixels of that image. This is setup to allow you to supply whatever code you want that makes use of the Canvas API to modify images (doesn't have to be one the convenience classes from this library, even)

filter: function (image, ctx) {
     // Modify the image using the Canvas context
}

L.CanvasFilter is a convenience class for manipulating the RGBA channels or individual pixels of an image. It typically takes a channelFilter option, which specifies a function that accepts and modifies the data of an image. Here you would typically use an L.CanvasChannelFilter instance passing in an array of L.ChannelFilter instances under the L.ChannelFilters namespace (e.g. `L.ChannelFilters.Sepia) to be applied to the image data.

filter: function (image, ctx) {
     // This filter manipulates an image using the Canvas context
     return new L.CanvasFilter({
      channelFilter: function (imageData) { 
                // This filter manipulates raw image data
        return new L.CanvasChannelFilter({
            filters: [<L.ChannelFilter 1>, <L.ChannelFilter 2>, ...]
        }).render(imageData);
      }
    }).render(this, image, ctx);
}

L.CanvasFilter and L.CanvasChannelFilter instances have render methods. This allows you to initialize these things once and then reuse them later, like so:

var channelFilter = new L.CanvasChannelFilter({
    filters: [<L.ChannelFilter 1>, <L.ChannelFilter 2>, ...]
});
var canvasFilter = new L.CanvasFilter({
    channelFilter: function (imageData) { 
         return channelFilter.render(imageData);
    }
});

...
// Initialize layer with filter option like so..
filter: function (image, ctx) {
     return canvasFilter.render(this, image, ctx);
}
...

There are helper functions for making this easier if you're using common filters/options. These helper functions exist under the L.ImageFilters.Presets.CanvasChannel namespace, like:

L.ImageFilters.Presets.CanvasChannel.Sepia1

You should be able to do this:

// Initialize layer with filter option like so...
var newLayer = new L.TileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
    filter: L.ImageFilters.Presets.CanvasChannel.Sepia1
});

newLayer.addTo(map);

This library also adds a new TileLayer class that should be faster when using Canvas-based filters: L.TileLayer.CanvasTMS. It uses Canvas based tiles instead of image based tiles.

[wambacher]

Hi Scott,

same for me. I'm running some OpenStreetMap Applications for fun, mainly quality control of national and international boundaries. (still openlayers: https://osm.wno-edv-service.de/boundaries)

Tnx for the detailed description of "filter". I think, this will be helpfull.

i'm not shure if i can use CanvasTMS, because i'm using pre-rendered Tiles from openstreetmap.org. I'm planning to get a 24-hours view (Bright at noon, dark at midnight, gray/foggy at rain, ...) just for fun ;)

next would be hillshading depending on sun-position. May be i'll use vector tiles for that.
I'll keep you informed when canvasFilter is doing the job.

Regards
walter

[wambacher]

i'm realy frustrated:

   var osmOrgUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
   var osmOrg     = L.tileLayer(osmOrgUrl, {
                      attribution: osmAttr,
                           filter: L.ImageFilters.Presets.CanvasChannel.Sepia1
  });

gives

see https://osm.wno-edv-service.de/locator/idx028.jsp

may be, my program is too complex. because i can't find any simple, running demo i'll have to write one by my own - but not today.

[sfairgrieve]

@wambacher does this demo work for you, or do you see the same thing? http://humangeo.github.io/leaflet-tilefilter/demo.html (if you select Sepia under canvas filters). There's some logic in there (perhaps incorrect) for using different tile sizes when detectRetina is true. Are you on a retina screen?

var osmOrgUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmOrg     = L.tileLayer(osmOrgUrl, {
                      attribution: osmAttr,
                      filter: L.ImageFilters.Presets.CanvasChannel.Sepia1,
                      detectRetina: true
});

[wambacher]

Different tile size depending on screen resolution? Canvas should never change the tilesize, i think

Got it, adding detectRetina: true did fix it. For me.

i'm using a 4k-monitor with the actual resolution 2560x1600.
But what if somebody is calling my page using a "normal" screen? And that will happen.

did you try https://osm.wno-edv-service.de/locator/idx028.jsp ?

regards
walter

[wambacher]

Hi Scott,

went to my neighbor and did a test: Windows/Firefox/"normal" Screen (no 4k) and everything is fine :-)

Tnx for your help - and patience

Regards
walter