[GIS] How to add custom CSS class to an image overlayer in Leaflet

leaflet

I have been using Leaflet's imageOverlay quite frequently to overlay images in a Leaflet map pane. Now I would like to apply a custom CSS to the overlaid image dynamically. I came across Raphael's post on How to add custom CSS class to leaflet tilelayer. How do I extend this method to an image layer? I tried the following using IvanSanchez example but could not get it to work. I was trying to apply CSS filter: grayscale(100%) to both the under-laid tiles and the overlaid image (a pineapple). The tiles and grid lines became gray scale but not the overlaid pineapple image.

<!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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>

Best Answer

If you have something like 

var pic = L.imageOverlay(url,[[0, -90], [90, 100]]);

Then running getElement() on your instance of L.ImageOverlay like:

var imgElement = pic.getElement();

Will get you an instance of HTMLImageElement. You can then access its classList property, which exposes an add() method. e.g.:

pic.getElement().classList.add('myCustomCSSClass');
Related Question