Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Full example of using leaflet to pan and zoom a big image, as described at
<!-- See also: -->
<link rel="stylesheet" href=""></script>
#image-map {
width: 100%;
height: 300px;
border: 1px solid #ccc;
margin-bottom: 10px;
<div id="image-map"></div>
<script src=""></script>
// Using leaflet.js to pan and zoom a big image.
// See also:
// create the slippy map
var map ='image-map', {
minZoom: 1,
maxZoom: 4,
center: [0, 0],
zoom: 1,
crs: L.CRS.Simple
// dimensions of the image
var w = 2000,
h = 1500,
url = '';
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);
// tell leaflet that the map is exactly as big as the image

stefansl commented Feb 2, 2017

Nice. :) One little issue in this one: It's not </script> in Line 4


wonderful... saved me efforts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment