jupyter-widgets / ipyleaflet

A Jupyter - Leaflet.js bridge
https://ipyleaflet.readthedocs.io
MIT License
1.49k stars 363 forks source link

ColorFilter options for maptiles #1223

Open tberends opened 1 month ago

tberends commented 1 month ago

I would like to give maptiles a grayscale. Is the colorfilter availabe for tiled maplayers in ipyleaflet, like the following plugin in leaflet? And if yes, is there an example code snippet how to use it?

https://github.com/Leaflet/Leaflet/blob/93f681c488ec07690cd4a393056078cf88f3bcff/docs/_plugins/tile-image-display/leaflet-tilelayer-colorfilter.md?plain=1#L4

Thanks in advance!

tberends commented 1 month ago

I found a 'hacky' work around so the grayscale can be displayed in the widget in Python. Unfortunately it isn't working for a map saved to html.

from ipyleaflet import Map, basemaps, TileLayer,
from branca.colormap import linear
from IPython.display import display, HTML

# Set basemap of the map
m = Map( zoom=10, basemap=basemaps.Esri.WorldImagery, scroll_wheel_zoom=True)

# Add a grayscale filter using custom CSS
display(HTML("""
<style>
    .leaflet-tile {
        filter: grayscale(100%);
    }
</style>
"""))

# Set size of the map
m.layout.height = '800px'
m.layout.width = '1000px'

# Save the map as html file
m.save('map.html')
m