[GIS] Add logo to a map using Leaflet/Mapbox

javascriptleafletmapbox

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 :

Google Maps handling a logo

Best Answer

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/

Related Question