Skip to content

Instantly share code, notes, and snippets.

@longhotsummer
Created April 5, 2016 06:47
Show Gist options
  • Star 42 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save longhotsummer/ba9c96bb2abb304e4095ce00df17ae2f to your computer and use it in GitHub Desktop.
Save longhotsummer/ba9c96bb2abb304e4095ce00df17ae2f to your computer and use it in GitHub Desktop.
Full example of using leaflet to pan and zoom a big image, as described at http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
<html>
<!-- See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html -->
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"></script>
<style>
#image-map {
width: 100%;
height: 300px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="image-map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Using leaflet.js to pan and zoom a big image.
// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
// create the slippy map
var map = L.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 = 'http://kempe.net/images/newspaper-big.jpg';
// 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
map.setMaxBounds(bounds);
</script>
</body>
</html>
@yogevizhak
Copy link

thanks!

@hussainb
Copy link

wonderful... saved me efforts

@Salitehkat
Copy link

Hi, my image is 2000x1000px. I need it to be full screen when it opens. (full size) and that is the minimum zoom. Which values should i adjust?
And last, is there a way to make it responsive? (that is shrinks proportionally depending on the screen size).
Sorry for so many questions and thanks a lot for your time.

@congtoan
Copy link

I want to add a full screen button. How can I do that? Thank you.

@rannooo
Copy link

rannooo commented Jan 26, 2019

@jbaranski
Copy link

This example is very helpful, thank you.

@SiimTulev
Copy link

Unfortunately my 42000x42000 picture does not open with this.

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