Leaflet.TileLayer.ColorFilter

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

Demos

• Demo with a few presets.
• Make your own filter.

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%',
]

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%',
]

Light maps may also look good:

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

The filter order matters:

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

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

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

• Accepted by Leaflet in the plugins list :).

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.