In this tutorial, I'll show you how to add a custom logo to your leaflet webmap. This process is also known as adding a watermark.
I'm using a very basic webmap and the link to create a similar map can be found here - https://youtu.be/xHmS4OpcEOc
The code for adding a custom logo/watermark is the following:
L.Control.Watermark=L.Control.extend({
onAdd:function(map){
var img = L.DomUtil.create('img');
img.src = 'logo.png';
img.style.width = '200px';
return img;
},
onRemove:function(map){},
});
L.control.watermark = function(opts){
return new L.Control.Watermark(opts);
}
L.control.watermark({position:'bottomleft'}).addTo(map);
