Crater Lake National Park

NPMap

Digital maps for the National Park Service

Zoomify with Automatic Extent

Bring a Zoomify tileset into an NPMap map and automatically set the map to its extent. A bit more difficult than you might think!

To display the map, type a NPS park code in the text box below and click "Build Map". A few examples: GRSM, YELL, DENA, and YOSE.

 

Related resources:

Map

The map will load here after you hit "Build Map."

Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example-map" style="height:500px;position:absolute;width:500px;">
    </div>
    <script>
      var added = false,
          NPMap = NPMap || {};
        
      function buildMap() {
        added = true;
      
        NPMap.app = {
          setBoundsToZoomify: function(size) {
            var map = NPMap.Map.Leaflet.map
                resolution = map.layerPointToLatLng(new L.Point(0, 1)).lat - map.layerPointToLatLng(new L.Point(0, 0)).lat,
                latLng = new L.LatLng((size.h / 2) * resolution, (size.w / 2) * resolution),
                latLngNpmap = {
                  lat: latLng.lat,
                  lng: latLng.lng
                };
                
            NPMap.Map.centerAndZoom(latLngNpmap, NPMap.config.zoom);
            NPMap.Map.setInitialCenter(latLngNpmap);
          }
        };
        NPMap.config = {
          api: 'bing',
          div: 'example-map',
          events: {
            preinit: function(callback) {
              var alpha = document.getElementById('alpha').value,
                  urlTiles = 'http://www.nps.gov/parkmaps/' + alpha  +'/img/',
                  urlXml = urlTiles + 'ImageProperties.xml';
              
              reqwest({
                success: function(response) {
                  var div = document.getElementById(NPMap.config.div),
                      divHeight = div.offsetHeight,
                      divWidth = div.offsetWidth,
                      els = response.d.split(' '),
                      height,
                      imageSize,
                      numberOfTiers,
                      tileCountUpToTier = [
                        0
                      ],
                      tierImageSize,
                      tiles,
                      tileSize,
                      tierSizeInTiles,
                      width;
                  
                  for (var i = 0; i < els.length; i++) {
                    var el = els[i];
                    
                    if (el.indexOf('HEIGHT') !== -1) {
                      height = parseInt(el.replace('HEIGHT="', '').replace('"', ''));
                    } else if (el.indexOf('TILESIZE') !== -1) {
                      tileSize = parseInt(el.replace('TILESIZE="', '').replace('"', ''));
                    } else if (el.indexOf('WIDTH') !== -1) {
                      width = parseInt(el.replace('WIDTH="', '').replace('"', ''));
                    }
                  }
                  
                  imageSize = {
                    h: height,
                    w: width
                  };
                  tierImageSize = [
                    imageSize
                  ];
                  tiles = {
                    x: Math.ceil( imageSize.w / tileSize ),
                    y: Math.ceil( imageSize.h / tileSize )
                  };
                  tierSizeInTiles = [
                    tiles
                  ];
                  
                  while (imageSize.w > 256 || imageSize.h > 256 ) {
                    imageSize = {
                      h: Math.floor(imageSize.h / 2),
                      w: Math.floor(imageSize.w / 2)
                    };
                    tiles = {
                      h: Math.ceil(imageSize.h / 256),
                      w: Math.ceil(imageSize.w / 256)
                    }
                    
                    tierImageSize.push(imageSize);
                    tierSizeInTiles.push(tiles);
                  }
                  
                  numberOfTiers = tierSizeInTiles.length;
                  
                  tierImageSize.reverse();
                  tierSizeInTiles.reverse();
                  
                  for (var i = 1; i < numberOfTiers; i++) {
                    tileCountUpToTier.push(
                      tierSizeInTiles[i - 1].w * tierSizeInTiles[i - 1].h + tileCountUpToTier[i - 1]
                    );
                  }
                  
                  NPMap.app.tierImageSize = tierImageSize;
                  NPMap.config.baseLayers = [{
                    height: height,
                    type: 'Zoomify',
                    url: urlTiles,
                    visible: true,
                    width: width
                  }];
                  NPMap.config.center = {
                    lat: 0,
                    lng: 0
                  };
                  NPMap.config.zoomRange = {
                    max: numberOfTiers - 1,
                    min: 0
                  };
                  NPMap.config.zoom = (function() {
                    for (var i = 0; i < tierImageSize.length; i++) {
                      var size = tierImageSize[i];
                      
                      if (size.h > divHeight || size.w > divWidth) {
                        if (i === 0) {
                          return i;
                        } else {
                          return i - 1;
                        }
                      }
                    }
                    
                    return 0;
                  })();
                  
                  NPMap.Event.add('NPMap.Map', 'ready', function(map) {
                    NPMap.app.setBoundsToZoomify(NPMap.app.tierImageSize[NPMap.config.zoom]);
                  });
                  callback();
                },
                type: 'jsonp',
                url: 'http://maps.nps.gov/proxy/xml?url=' + urlXml
              });
            }
          }
        };
        
        (function() {
          var s = document.createElement('script');
          s.src = 'http://www.nps.gov/npmap/1.0.0/bootstrap.js';
          document.body.appendChild(s);
        })();
      }
    </script>
  </body>
</html>