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> |
This comment has been minimized.
This comment has been minimized.
thanks! |
This comment has been minimized.
This comment has been minimized.
wonderful... saved me efforts |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
I want to add a full screen button. How can I do that? Thank you. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This example is very helpful, thank you. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Nice. :) One little issue in this one: It's not </script> in Line 4