How to add a non-referenced image as overlay in leaflet

Question

I have a Leaflet map, with tileLayer and markers. I would like to add an image overlay to add some effects and styling to the tiles.

L.imageOverlay is nice, but it requires bounds, whereas I would like to anchor the image to absolute pixels of the rendered map. For example to have an effect that is continuous towards the zoom levels.

It should be possible to do it by getting the extent and redefining the bounds of the layer each time, but it is ridiculous, as these would need to be converted to absolute values internally. Nevertheless, I couldn't find the way of doing it by reading the API.

You can image things like a frame, like fading, etc... on top of the map.

Answer 1

You could use a control and a div to manipulate the image. Not sure if this helps.

var legend2 = L.control({position: 'topleft'}); 
legend2.onAdd = function (map) {        
    var div = L.DomUtil.create('div', 'info legend2');
    div.innerHTML = '<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" style="transform: matrix3d(-0.509677, 0.655299, 0, -0.000417152, 0.597349, 0.564009, 0, 0.000111701, 0, 0, 1, 0, 0, 0, 0, 1); ">';     
    return div;
};      
legend2.addTo(map);

Answer 2

Doing some reading as adding a watermark would be useful for us. The intro for the core Spin.js library that leaflet.spin.js calls on mentions this:

The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

So when this._spinner = new Spinner().spin(this._container); is called for the layer that is loading, the layer size is determined in pixels. It's fixed in the DOM, not in the leaflet layers.