longhotsummer/leaflet-big-image-full.html

## leaflet-big-image-full.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>
	<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>