Is there an easy way to add simple image layers (with no, or very limited, GIS data) to Mapbox and/or Leaflet?

Google maps seems to have the ability to add custom layers, simply by attaching the SW and NE corners to points on the image to points on the map

I thought that MapBox or Leaflet would have similar functionality, but I'm struggling so far.

I (presumptuously?) assumed that TileMill might allow me to import a non-GIS labelled image and drag and drop it to the correct position - much as you might align two Photoshop layers. However, I seem to only be able to import GIS datasourced layers, the closest of which to my needs seems to be GeoTIFF.

  • Like this maybe? Commented Jan 14, 2014 at 17:20
  • Thanks @ChadCooper - out of interest, why is the chopping up of the image required in your example? Francisco's answer allows the layer to zoom and pan without any further work.
    – Jon Hadley
    Commented Jan 15, 2014 at 12:43

1 Answer 1


Use an imageOverlay layer. You only need to specify the bounding box of the image. Check the example of the API documentation:

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);
  • Great, thanks Francisco. Out of interest, @ChadCooper's example requires that the image is cut into tiles - does that offer any advantages?
    – Jon Hadley
    Commented Jan 15, 2014 at 12:42
  • Well, tiling the image probably increments performance, but before complicate the system you should check that it's really necessary Commented Jan 16, 2014 at 14:26

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.