Add logo to a map using Leaflet/Mapbox

Question

I am currently trying to learn how to use Leaflet / Mapbox (and JS, to some extent) by creating custom test maps.

My problem is that I want to add a logo on the top of my map, with absolute coordinates (in pixels).

I have already looked for out-of-the-box methods on the API reference and GIS stack, but couldn't find anything. I also tried some "homemade" solutions (with my limited skills), like adding the logo as a marker or custom layer with non-fixed geographic coordinates (using getBounds().getEast() for example). Unfortunately, nothing worked...

It can be easily done with the Google Maps API, using :

var controlUI = document.createElement('div')

and the logo passed as a background for the 'div' section, but I would like to avoid this API.

Here is an example of what I want it to look like :

Answer 1

You can try with L.Control.Credits plugin.

A simple, attractive, interactive control to put your logo and link in the corner of your map.

You can also easily do it yourself with JavaScript:

var mapControlsContainer = document.getElementsByClassName("leaflet-control")[0];
var logoContainer = document.getElementById("logoContainer");

mapControlsContainer.appendChild(logoContainer);

Demo: http://jsfiddle.net/3v7hd2vx/44/

Answer 2

You can use L.control, but there are only 4 positions:

    //logo position: bottomright, topright, topleft, bottomleft
    var logo = L.control({position: 'topleft'});
    logo.onAdd = function(map){
        var div = L.DomUtil.create('div', 'myclass');
        div.innerHTML= "<img src='logo.png'/>";
        return div;
    }
    logo.addTo(map);

Answer 3

You can try div logo inner div map in HTML:

<div id="map" style="...">
   <div id="logoContainer">
     <img src="img.png" width="70">
   </div>
</div>

And add a CSS:

#logoContainer {
    position: absolute;
    z-index: 100;
    top: 15px;
    left: 15px;
}