Skip to content
A simple and lightweight Leaflet plugin to apply CSS filters on map tiles.
Branch: master
Clone or download
Latest commit 800f018 Nov 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Minor changes Nov 9, 2018
readme-files
src Updated min version with gulp Nov 9, 2018
.gitignore
LICENSE Create LICENSE Sep 26, 2018
README.md Update README.md Nov 9, 2018
bower.json
gulpfile.js Added gulp babel and uglify to the min version. Oct 21, 2018
package-lock.json
package.json 1.2.5 Nov 9, 2018

README.md

Leaflet.TileLayer.ColorFilter

A simple and lightweight Leaflet plugin to apply CSS color filter on map tiles.

sidebyside

Demos

Installation

NPM:

npm install --save leaflet.tilelayer.colorfilter

Bower:

bower install leaflet.tilelayer.colorfilter

Or download a release from the repository.

Basic Usage

To use this plugin, just import leaflet-tilelayer-colorfilter.min.js after leaflet.js, for example:

<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<script src="leaflet-tilelayer-colorfilter.min.js"></script>

Setting up the map with L.tileLayer.colorFilter:

let map = L.map('map').setView([51.505, -0.09], 14);

let myFilter = [
    'blur:0px',
    'brightness:95%',
    'contrast:130%',
    'grayscale:20%',
    'hue:290deg',
    'opacity:100%',
    'invert:100%',
    'saturate:300%',
    'sepia:10%',
];

let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
    attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
    filter: myFilter,
}).addTo(map);

A minimal complete example can be found in example folder. The min version also supports older browsers (ES5).

Reference

L.tileLayer.colorFilter(url, options)

The L.tileLayer.colorFilter is a simple extension of the original L.tileLayer that includes a new option filter inside options parameter.

filter accepts an array of string filters with the following format:

Filter Aliases Description Example Default
Blur blur Applies a Gaussian blur filtering measured in pixels ['blur:2px'] 0px
Brightness brightness, bright, bri Controls the brightness of tile image ['brightness:150%'] 100%
Contrast contrast, con Changes the color contrast of tiles ['contrast:150%'] 100%
Grayscale grayscale, gray Changes the color of tiles to a grayscale ['grayscale:100%'] 0%
Hue-Rotate hue-rotate, hue-rotation, hue Applies a hue rotation in degrees on tile colors ['hue:180deg'] 0deg
Opacity opacity, op Defines the opacity of the tiles ['opacity:60%'] 100%
Invert invert, inv Invert the tile colors ['invert:100%'] 0%
Saturate saturate, saturation, sat Saturates the tile colors ['saturate:150%'] 100%
Sepia sepia, sep Converts the tile colors to sepia ['sepia:0%'] 0%

For CSS Filter Browser Compatibility please, refer to Browser Compatibility.

myTileLayer.updateFilter(newFilter)

On the fly changes on filter is supported with the updateFilter function (demo):

let map = L.map('map').setView([51.505, -0.09], 14);

let oldFilter = [
     'grayscale:100%',
     'invert:100%',
]

let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
    attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
    filter: oldFilter,
}).addTo(map);

myTileLayer.updateFilter(['brightness:110%', 'hue:90deg', 'saturate:120%']);

Useful Tips

The following settings is enough to make most of the light maps to become dark:

let myFilter = [
     'grayscale:100%',
     'invert:100%',
]

dark

To keep water and street colors, a hue rotation around 180deg is very helpful to correct the color inversion:

let myFilter = [
     'hue:180deg',
     'invert:100%',
]

dark-colorized

Light maps may also look good:

let myFilter = [
     'brightness:110%',
     'hue:90deg',
     'saturate:120%',
]

colorized

The filter order matters:

let leftColoFilter = [
    'invert:100%',
    'brightness:115%',
    'hue:186deg',
]

let rightColorFilter = [
    'hue:186deg',
    'brightness:115%',
    'invert:100%',
]

filterorder

MIT License

This project is licensed under the MIT License. (c) 2018, Cláudio T. Kawakani.

Updates

2018.11

  • v1.2.5: great performance improvement. Very noticeable in mobile.

2018.10

  • Added the new function updateFilter, thanks to AndreasSchmid1 request.
  • Now it is possible to start the colorFilter without the filter parameter.
  • Package added to NPM and Bower.

2018.09.26

2018.09.24

  • Plugin renamed to Leaflet.TileLayer.ColorFilter.

2018.09.23

  • Changed from object to array of strings, because the filter order matters. Moreover, the same filter can be used more than once.

2018.09.20

  • Plugin created.
You can’t perform that action at this time.