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? – Chad Cooper Jan 14 '14 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 Jan 15 '14 at 12:43

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 Jan 15 '14 at 12:42
  • Well, tiling the image probably increments performance, but before complicate the system you should check that it's really necessary – Francisco Puga Jan 16 '14 at 14:26

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.