<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Base Layers Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controls
{
width: 512px;
height: 400px;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map( 'map' );
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
var polar = new OpenLayers.Layer.WMS(
"NSIDC North polar stereographic",
"http://nsidc.org/cgi-bin/atlas_north",
{
layers: 'country_borders,arctic_circle',
format: 'image/png'
},
{
wrapDateLine: false,
projection: 'EPSG:32661',
maxExtent: new OpenLayers.Bounds(-10700000, -10700000,
14700000, 14700000),
maxResolution: (14700000 + 10700000) / 256
}
);
map.addLayers([wms, polar]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.zoomTo(1);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Changing base layer example</h1>
<p>
This example shows that when the base layer is changed from a lat-lon
projection to a polar stereographic projection (use the layer switcher), OpenLayers loads
a load of unnecessary map tiles before loading the "correct" images
(use Firebug to see these and look at the BBOX for each tile).
</p>
<p>Adding an event handler for changebaselayer does not help - the
spurious images are loaded anyway, apparently before any code in the event
handler takes effect.</p>
<div id="controls">
<div id="map" class="smallmap"></div>
</div>
</body>
</html>