He estado utilizando con bastante frecuencia imageOverlay de Leaflet para superponer imágenes en un panel de mapa de Leaflet. Ahora me gustaría aplicar un CSS personalizado a la imagen superpuesta de forma dinámica. Me encontré con el post de Raphael en Cómo añadir una clase CSS personalizada a leaflet tilelayer . ¿Cómo extiendo este método a una capa de imagen? He intentado lo siguiente usando el ejemplo de IvanSanchez pero no he conseguido que funcione. Intentaba aplicar el filtro CSS: grayscale(100%) tanto a los mosaicos de debajo como a la imagen superpuesta (una piña). Los azulejos y las líneas de la cuadrícula se convirtieron en escala de grises, pero no la imagen superpuesta de la piña.
<!DOCTYPE html>
<html>
<head>
<link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script>
<meta charset="utf-8">
<title>Leaflet JS Bin</title>
<style>
#map {
width:600px;
height:400px;
}
.leaflet-layer.foobar img {
border: 5px solid red;
filter: grayscale(100%);
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: myCenter, zoom: 1});
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
positron.getContainer().className += ' foobar';
url="https://www.w3schools.com/cssref/pineapple.jpg";
pic=L.imageOverlay(url,[[0, -90], [90, 100]]);
map.addLayer(pic);
pic.getContainer().className += ' foobar';
</script>
</body>
</html>
