4

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

6

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/

  • Thanks ! The second solution is exactly what I was looking for, since the first one only allows for no more than 4 positions. – poqu67 Jul 24 '16 at 7:47
3

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);
  • Thanks a lot, it works very well ! Unfortunately, 4 positions is quite limiting. – poqu67 Jul 24 '16 at 7:45
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.