Highest compatible version

[THRY]

Hi,

What is the highest compatible leaflet version that works with your filter plugin? 0.7 seems fine, 1.3 doesn't work.

Thanks

[sfairgrieve]

The 1.0dev branch should work with 1.x versions. Haven't tested it with 1.3, though. Let me give it a try.

[THRY]

Hm, also the combination leaflet v. 1.0.3 and tilefilter 1.0dev doesen't work. I get the error "Cannot read property 'cssText' tilefilter of undefined"...

Leaflet 0.7 and tilefilter master branch works fine

[sfairgrieve]

Updated the 1.0dev branch. Do you still get this issue?

[THRY]

Yes, still the same error (Leaflet 1.0.3 + tilefilter 1.0dev):

leaflet-tilefilter-v1.js:903 Uncaught TypeError: Cannot read property 'cssText' of undefined at e.render (leaflet-tilefilter-v1.js:903) at e.filter (main.js:188) at e._tileOnLoad (leaflet-tilefilter-v1.js:1160) at HTMLImageElement.h (leaflet-v1.0.js:6)

[sfairgrieve]

Weird. Let me take another look. It seems like the HTMLImageElement object doesn't have a style property in this case, which is odd. What tile server are you using? Just want to see if I can recreate the issue.

[sfairgrieve]

I pushed an update to 1.0dev that should at the very least prevent this error from occurring. Still unsure what could be causing this. Any chance you could share a sample of your code?

[THRY]

Thanks for your effort! Now i tried with leaflet v1.0 and tilefilter 1, and i don't get any error anymore. However, the filters do not apply:

I'm using map data from the swiss government (https://api3.geo.admin.ch/services/sdiservices.html).

This is how i initialize the map:

` newMap = new L.Map(nodeId, { center: centerPoint, continuousWorld: true, worldCopyJump: true, zoom: zoomVal, maxBounds: bounds, maxBoundsViscosity: 1.0, scrollWheelZoom: false, zoomControl: true }); newMap.zoomControl.setPosition('topright');

var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.vec25-gebaeude/default/current/3857/{z}/{x}/{y}.jpeg';

  var tilelayer = new L.tileLayer(url, {
    minZoom: 13,
    maxZoom: 15,
    
    filter: function () {
      new L.CSSFilter({
        filters: ['contrast(160%)', 'saturate(0%)', 'brightness(94%)']
      }).render(this);
    },
    detectRetina: true
  });
  newMap.addLayer(tilelayer); 

`

Working map with leaflet 0.7 and tilefilter can be seen here: http://regionale2025.ch.inn.host.ch/cms/projekte/#map

[sfairgrieve]

I pushed a fix that I think will solve your issue. The code wasn't respecting the cssFilter option when that option is passed in when the layer is initialized vs. calling setCSSFilter after the layer is created. Also, there's a simplified way of creating CSSFilter functions, like so:

var tilelayer = new L.tileLayer('https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.vec25-gebaeude/default/20090401/3857/{z}/{x}/{y}.png', {
	    minZoom: 13,
	    maxZoom: 15,
	    cssFilter: L.ImageFilters.GenerateCSSFilter(['contrast(160%)', 'saturate(0%)', 'brightness(94%)']),
	    detectRetina: true
});

[THRY]

Great, it works now! (Although only with the simplified way of creating a filter)

Thank you very much, i really appreciate your filter plugin. We are happy to use that swiss map instead of google maps and couldn't have used it without tilefilter (beacuase all layers have awful colors).