Leaflet put image overlay below the map

Question

I have a mapbox map and an Image Overlay on my leaflet project. I need to put the image below the map (which has transparent areas) but I tried also with bringToBack() with no luck.

This is the code:

mymap = new L.Map('map').setView([41.69906, 12.39258],5);

    L.tileLayer('https://api.mapbox.com/styles/v1/.....',
    {zIndex:90}).addTo(mymap);

var bounds = new L.LatLngBounds (
  new L.LatLng(30,-10),
  new L.LatLng(50,36));
mymap.fitBounds(bounds);


var overlay = new L.ImageOverlay("image.png" ,
  bounds, {  
  attribution: "E.U Copernicus Marine Environment Monitoring Service"
});
mymap.addLayer(overlay);
overlay.bringToBack();

Leaflet docs allow bringToBack to an ImageOverlay, but I suppose that the overlay and the map are in 2 different stacks.

Answer 1

The stack order is controlled by map panes. You could add a pane, set its z-index to be under the tile layer and add your image overlay to this pane.

Something like

mymap.createPane('imagebg');
mymap.getPane('imagebg').style.zIndex = 50;

// ...

var overlay = new L.ImageOverlay("image.png" ,
  bounds, {  
  attribution: "E.U Copernicus Marine Environment Monitoring Service",
  pane: 'imagebg'
});

And a demo (the leaflet logo behind semi transparent tiles)

var map = new L.Map('map').setView([41.69906, 12.39258],5);

map.createPane('imagebg');
map.getPane('imagebg').style.zIndex = 50;

var attributions =  {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>'};

var tiles = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',attributions).addTo(map);
tiles.setOpacity(0.7);

var bounds = new L.LatLngBounds (
  new L.LatLng(30,-10),
  new L.LatLng(50,36));
map.fitBounds(bounds);


var overlay = new L.ImageOverlay("http://leafletjs.com/docs/images/logo.png" ,
  bounds, {  
  attribution: "Leaflet",
  pane: 'imagebg'
});
map.addLayer(overlay);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

<div id='map'></div>