
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        
        // define global variables
        var lon = -106.5;
        var lat = 36;
        var zoom = 3;
        var map;
        var layer, countiesLayer, indlandLayer, federallandsLayer;
        
        // define map controls
        var baseControls = [
        	new OpenLayers.Control.Navigation({}),
        	new OpenLayers.Control.PanZoomBar({}),
			new OpenLayers.Control.LayerSwitcher({}),
			new OpenLayers.Control.Permalink(),
			new OpenLayers.Control.MousePosition({})
        ];

        // =============== Initialization function ===================
        function init(){
            //map = new OpenLayers.Map( 'map' );
            
            map = new OpenLayers.Map('map', {
				projection: 'EPSG:900913',
				maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
				20037508, 20037508.34),
				maxResolution: 156543.0339,
				units: 'm', 
				controls: baseControls
			});
            
			// =========== OSM Map ====================
            layer = new OpenLayers.Layer.OSM( "Open Street Map");
            map.addLayer(layer);
            
            // =========== USGS National Atlas WMS ====
            // from USGS National Atlas: http://webservices.nationalatlas.gov/wms/boundaries?SERVICE=WMS&REQUEST=GetCapabilities
            countiesLayer = new OpenLayers.Layer.WMS( 
            	"US Counties", 
            	"http://webservices.nationalatlas.gov/wms?",
            	{layers: "counties", version: '1.3.0', transparent: 'TRUE'},
            	{isBaseLayer: false}
            );
            map.addLayer(countiesLayer);
			
            indlanLayer = new OpenLayers.Layer.WMS( 
            	"Indian Lands", 
            	"http://webservices.nationalatlas.gov/wms?",
            	{layers: "indlan", version: '1.3.0', transparent: 'TRUE'},
            	{isBaseLayer: false, visibility: false}
            );
            map.addLayer(indlanLayer);
			
            federallandsLayer = new OpenLayers.Layer.WMS( 
            	"US Federal Lands", 
            	"http://webservices.nationalatlas.gov/wms?",
            	{layers: "federallands", version: '1.3.0', transparent: 'TRUE'},
            	{isBaseLayer: false, visibility: false}
            );
            map.addLayer(federallandsLayer);
			
			map.setCenter(
                new OpenLayers.LonLat(lon, lat).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), zoom
            );
                
        }
        // =============== End of Initialization Function ============
        
	</script>
	<style type="text/css">
		#map {width:90%; height:500px}
	</style>
  </head>
  <body onload="init()">
    <h1>Basic OpenLayers Map</h1>
    <p>Shows the basic use of OpenLayers with the <a href="http://www.openstreetmap.org/">OpenStreetmap</a> basemap</p>
	
	<!-- Map DIV -->
	<div id="map"></div>

	<ul>
		<li>OpenLayers.Control.Navigation</li>
		<li>OpenLayers.Control.PanZoomBar</li>
		<li>OpenLayers.Control.LayerSwitcher</li>
		<li>OpenLayers.Control.Permalink</li>
		<li>OpenLayers.Control.MousePosition</li>
	</ul>

	
  </body>
</html>