OpenLayers Base Map Widget - TNM Base Layers

by aguiguy

HTML

<!-- Generic selection widget for example only -->
<select id="bgLayerMenu">
    <option value="street">TNM Street</option>
    <option value="imagery">TNM Imagery</option>
    <option value="osm">Open Street Map</option>
    <option value="agsStreet">ESRI Street</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
Resolution: <input type="text" id="resolution" value="resolution" size="20" style="border:none;color:blue"/>
<div id="map"></div>
<textarea id="resolutions" rows="5" cols="100" style="border:none;color:blue;font-size:14px;">Resolutions...</textarea>

CSS

</style>

<!-- access to the HEAD element -->
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<script src="http://trac.osgeo.org/proj4js/export/2080/trunk/lib/proj4js-compressed.js"></script>
<!--
<script src="http://dev.openlayers.org/releases/OpenLayers-2.11/OpenLayers.js"></script>
-->
<script src="http://openlayers.org/dev/OpenLayers.js"></script>

<style>

#map {
    width:100%;
    height:700px;
}

JavaScript

var map;

function init() {
    var layer, bgLayer;

    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
    OpenLayers.Util.onImageLoadErrorColor = "transparent";


    map = new OpenLayers.Map('map', {
        allOverlays: true,
        numZoomLevels: 21,
        maxResolution: 156543.033928,
        maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
        projection: new OpenLayers.Projection("EPSG:102113"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m"
    });
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.events.register('moveend', map, function(e) {
        $('resolution').value = map.getResolution();
    });
    map.events.register('changelayer', map, function(e) {
        var resolutions = map.baseLayer.resolutions;
        $('resolutions').value = 'Baselayer resolutions (count=' + resolutions.length + '): ' + resolutions;
    });

    map.addLayer(new OpenLayers.Layer("blank", {
        // This layer needed to allow larger zoom scales - WHY?
        // Without this layer = 19 zoomlevels;  With = 21 (max);
        displayInLayerSwitcher: false,
        visibility: false
    }));

    var osm = new OpenLayers.Layer.OSM();
    var osm2 = new OpenLayers.Layer.OSM('OpenStreetMap', ' ', {
        //maxResolution: 78271.516953125,
        visibility: false
    });
    osm.visibility = false;
    map.addLayer(osm);


    // TNM LAYERS - SHADED RELIEF
    var shadedReliefSmallScale = new OpenLayers.Layer.XYZ('Shaded Relief - Small Scale', 'http://raster1.nationalmap.gov/ArcGIS/rest/services/TNM_Small_Scale_Shaded_Relief/MapServer/tile/${z}/${y}/${x}', {
        maxResolution: 156543.033928,
        minResolution: 2445.984905125,
        isBaseLayer: true,
        zoomOffset: 0,
        // required to adjust Z-scale (offset not required for this layer because it's range is not offset)
        // has no effect when serverResolutions are set
        alwaysInRange: false,
       ...