KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #claude-code #codex #developer-tools #dsh-plugin #ai-agent #mcp #deepseek-harness #windows #open-source

leaflet-tilefilter

★ 98 Open GitHub ↗

Change the appearance of Leaflet map tiles on the fly using a variety of canvas or CSS3 image filters. It's like Instagram for Leaflet map tiles.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Leaflet.TileLayer.Filter

![Filters Example](http://humangeo.github.io/leaflet-tilefilter/images/filters.gif)

Are you bored with the basic, free tile map services out there, or have you ever wanted to change their base offerings to fit in better with your app?

Do you want the appearance of custom map tiles without having to setup your own tile server?  Spice up your maps by adding customizable image filters to tile images.  Use one of the existing, free tile providers like MapQuest, OSM, Stamen, and others, then change up their default offerings by adjusting the colors/styling on the client end.

This plugin extends L.TileLayer based classes, adding support for tile image filters.  It provides extensible canvas-based filter approaches as well as CSS3 image filters.  Canvas filters can be chained together and combined with one or more CSS3 image filters, allowing for many variations.
It was originally inspired by [Ilya Zverev](https://github.com/Zverik)'s [Leaflet.TileLayer.Grayscale](https://github.com/Zverik/leaflet-grayscale/) plug-in, but modified to be more extensible, supporting more than just a grayscale tile filter.

## Build

```
npm install
bower install
grunt
```

## Basic Usage

```javascript
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();
	}
});

var baseLayer = new L.StamenTileLayer('toner');

baseLayer.setFilter(function () {
	new L.CanvasFilter(this, {
		channelFilter: function (imageData) {
			return new L.CanvasChannelFilters.Colorize(imageData, {
				values: [100, 100]
			}).render();
		}
	}).render();
});
```

## Demo

http://humangeo.github.io/leaflet-tilefilter/demo.html

## Details

Read the [docs](https://github.com/humangeo/leaflet-tilefilter/wiki).  Checkout the 1.0dev branch for Leaflet 1.x support.

leaflet-tilefilter

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README