zverik / leaflet-grayscale Goto Github PK
View Code? Open in Web Editor NEWGrayscale TileLayer for Leaflet
Grayscale TileLayer for Leaflet
Most 'photo-style' grayscale filters use luminance or another factor rather than a mean of all bands.
The demo is flickering between colored and grayscale in
Firefox 56.0 (32-Bit) (tested with Windows 7)
Just move the call to this.options.quotaDivider() outside the loop.
Thanks for the nice plugin!
hi,
i'm using leaflet.grayscale with LL 0.7 and it is doing fine. Now i'm testing LL 1.0 beta 1 and leaflet.grayscale seems not to work.
any idea, what i can do?
may be this functionality is integrated in LL 1.0? Or you have to change something?
regards
walter
http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS - possibly faster than canvas-pixel-sweeping as well.
Comparing the file sizes of an original colored tile from OSM (http://tile.openstreetmap.org/3/2/4.png) @ 7.3 KB
and
The converted greyscale image, which is @ 14.4 KB (twice the size)
After looking at the properties of the two images, I found that the greyscale image has added Alpha Channel information, which results in the 7KB increase.
So... it could probably be optimized ^^
Please add package.json
i simply wanted to thank you for your grayscale layer!
i've adapted it to show a pure black and white map
https://github.com/aoloe/leaflet-blackAndWhite
and could replace the php based filtering i was previously using!
Grayscaling does not work with tiles from http://a.www.toolserver.org/tiles/osm-no-labels/10/530/340.png.
Example: Visit http://www.openrailwaymap.org/ and select the "Mapnik no-labels Grayscale" layer from the layerselection. You will see just an empty background.
Using an up-to-date version of Chrome (Version 33.0.1750.117, Mac OS X), I get this error message (repeated 38 times or so...):
"cross-origin image load denied by cross-origin resource sharing policy"
Map tiles are on local disk - therefore I do not understand the root cause of this error message. I am calling leaflet-grayscale with thie method:
var taustakartta = new L.tileLayer.grayscale('taustakartta/{z}/{x}/{y}.png', {
attribution: 'Kartta: Maanmittauslaitos',
maxZoom: 20,
opacity: 0.65
});
I think the problem is caused by leaflet-grayscale. If I remove it and use normal L.TileLayer method, then everything works perfectly also in Chrome:
var taustakartta = new L.TileLayer('taustakartta/{z}/{x}/{y}.png', {
attribution: 'Kartta: Maanmittauslaitos',
maxZoom: 20,
opacity: 0.65
});
Is it working with https tiles?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.