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>