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?

  • The code for my current map is here: github.com/SLUGIS/CalMAPPER/blob/gh-pages/index.html – cbunn Oct 13 '14 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 Oct 13 '14 at 18:31
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;
}
  • Where would I add this in my code? – cbunn Oct 13 '14 at 19:42
  • anywhere after you declare your map, so starting line 77 in your example. – toms Oct 13 '14 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 Oct 14 '14 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 Oct 14 '14 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 Oct 15 '14 at 0:24

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.