humangeo / leaflet-tilefilter Goto Github PK

Make sure this works with 0.8-dev/1.0 (upcoming)

Hi,

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

Thanks

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

Hi and congrats for your great work .

I would like to ask you how can I use Canvas Filter eg WaterTransparent on a simple leaflet map as mentioned in code below ?Note that I have already included the required Javascript file .
I am using leaflet v1.0.3 .

require('leaflet-tilefilter/master/src/leaflet-tilefilter.js');

const map = L.map('map', {
      center: [30, 25],
      zoom: 2,
      minZoom: 2,
      maxZoom: 4
    });

Thank you in advance .

bower.json and package.json has a reference to "dist/TileLayer.Filter.min.js" and should be "dist/leaflet-tilefilter.min.js"

Probably a dumb question, but what is the most appropriate way to integrate this with a Webpack project?

I am working on a project built with Vue, Leaflet, and Webpack. Could you provide some guidance on this? Thanks.

    var map = L.map('map').setView([51.505, -0.09], 15);


    var tilelayer = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        filter: function (image, ctx) {
            new L.CanvasFilter({
                channelFilter: function (imageData) {
                    return new L.ChannelFilters.Sepia().render(imageData);
                }
            }).render(this, image, ctx);
        }
    });

    map.addLayer(tilelayer); 

The above code gives:

Uncaught TypeError: ctx.drawImage is not a function
at i.render (leaflet-tilefilter.js:381)
at i.filter (london_map.html:33)
at i._tileOnLoad (leaflet-tilefilter.js:1160)
at HTMLImageElement.s (leaflet.js:5)

in console.

So far I can only get the filter to work with CSS filter written in the simplified style:

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 });

But I really need the Canvas filter.

I am using leaflet 1.5.1 and leaflet-tilefilter 1.0dev