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>