1

I have a MapBox.js map up and running and I would like to add an image to the bottom left corner. I tried adding in this code: <img src="IMAGE URL" height=100 style=’position:fixed;bottom:0px;left:0px;z-index:999’/> with my image hosted on Dropbox but it did not appear. I am using several different TileMill produced layers for this map. How can I add an image that will always be at the bottom left corner of my map?

2
  • The code for my current map is here: github.com/SLUGIS/CalMAPPER/blob/gh-pages/index.html
    – cbunn
    Commented Oct 13, 2014 at 16:55
  • I was able to change the position of a legend to the bottom left however my image being used as a legend is not a square so all the extra white space around it is still shown. I want to add a PNG image so this white space is not part of the map.
    – cbunn
    Commented Oct 13, 2014 at 18:31

1 Answer 1

3

you can add the image as a Leaflet control, then Leaflet takes care of the z-indexing and positioning.

var MyControl = L.Control.extend({
    options: {
      position: 'bottomleft'
    },

    onAdd: function (map) {
      // create the control container with a particular class name
      // ** you can add the image to the div as a background image using css
      var container = L.DomUtil.create('div', 'my-custom-control');

      // ... initialize other DOM elements, add listeners, etc.
      return container;
    }
});

map.addControl(new MyControl());

And the css:

.my-custom-control {
  background-image: url('../images/legend.jpg');
  width:xxpx; /* you will likely need to specify image width and height here */
  height:xxpx;
}
9
  • Where would I add this in my code?
    – cbunn
    Commented Oct 13, 2014 at 19:42
  • anywhere after you declare your map, so starting line 77 in your example.
    – toms
    Commented Oct 13, 2014 at 20:23
  • Can the css portion also go in my index.html? I added the code in at line 77 but the page wouldn't load.
    – cbunn
    Commented Oct 14, 2014 at 22:13
  • css can go in index, as an inline style (don't forget to change the url to point to wherever your image is). What errors are you getting on the console (F12)?
    – toms
    Commented Oct 14, 2014 at 23:48
  • if you want to put up a fiddle, or just chat directly about this, I'm sure we could fix it quickly
    – toms
    Commented Oct 15, 2014 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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