ImageOverlay with georeferenced scanned map

Given the latitude and longitude coordinates of the corners of an image, we can show it at the right position and size to match with a baselayer.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ImageOverlay with georeferenced scanned map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var imageUrl = 'https://farm4.staticflickr.com/3731/14101168818_932d707f90_o.jpg',
    // This is the trickiest part - you'll need accurate coordinates for the
    // corners of the image. You can find and create appropriate values at
    // http://maps.nypl.org/warper/ or
    // http://www.georeferencer.org/
    imageBounds = L.latLngBounds([
        [40.712216, -74.22655],
        [40.773941, -74.12544]]);

var map = L.mapbox.map('map')
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
    .fitBounds(imageBounds);

// See full documentation for the ImageOverlay type:
// http://leafletjs.com/reference.html#imageoverlay
var overlay = L.imageOverlay(imageUrl, imageBounds)
    .addTo(map);
</script>

to create your own custom map and use it in this example.

Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.

Copy example