Add simple image layers to MapBox / Leaflet?

Question

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.

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