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.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/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>
Get a free Mapbox account 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.