<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>GISCO OpenLayers WMS</title>

        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />



        <!--set up size of map on screen-100% of width, 400 pixels in height-->
        <style type="text/css">
            #controls
            {
                width: 100%;
                height: 400px;
            }
        </style>

        <!-- this gmaps key generated for http://www.thetimoneygroup.com/gisco/ -->
        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA_tUyd7Vd7-Nw0ODKNIjLfhSQd3wokJvBT6D62_fZ0g2J3nxFNhR-O0ftTn3NnzwMHXEov4JrNpZgIQ' type='text/javascript'></script>

        <!--Get Virtual Earth JavaScript library-->
        <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1' type='text/javascript'></script>

        <!--Get Yahoo Maps JavaScript library-->
        <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers" type='text/javascript'></script>

       <!--Get Open Layers JavaScript library-->
       <script src="http://openlayers.org/dev/OpenLayers.js" type='text/javascript'></script>



        <script type="text/javascript">


            <!--When loading tiles from 3rd party, good to have re-tries for tiles not delivered on first request-->
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
            OpenLayers.Util.onImageLoadErrorColor = "transparent";

            <!--Creates variable that will be the map object-->
            var map;


            <!--Creates variables to designate initial view of map-->
            var lon = -105;
            var lat = 39.71;
            var zoom = 8;


            <!--Initial function that fires when page is loaded-->

            function init(){

                <!--create OpenLayers map object-->
                map = new OpenLayers.Map( 'map' );


                <!--SET UP BASEMAP LAYERS-->

                    <!--Commercial Providers--check licensing for internal use-->
                    var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });
                    var ve = new OpenLayers.Layer.VirtualEarth( "Microsoft Virtual Earth");
                    var yahoo = new OpenLayers.Layer.Yahoo( "Yahoo");


                <!--SET UP OVERLAY LAYERS-->



                    <!--Pulling a Census Block Group layer from the new DRCOG WMS Service-->
                    <!--Note the 'srs' parameter to pull data in the funky Spherical Mercator (EPSG 3785) projection-->
                    <!--Note the 'reproject':true parameter to get OpenLayers to make everything line up just so-->

                    var drcog_blk = new OpenLayers.Layer.WMS("Census Block Groups",
                        "http://gis.drcog.org/geoserver/wms?",
                        {layers: "bg2000", transparent: "true", srs: '("EPSG:3785")'}, {visibility:false, isBaseLayer: false,'reproject':true});

                    var drcog_mv = new OpenLayers.Layer.WMS("2035 Metro Vision Rapid Transit",
                        "http://gis.drcog.org/geoserver/wms?",
                        {layers: "rapid_transit", transparent: "true", srs: '("EPSG:3785")'}, {visibility:false, isBaseLayer: false,'reproject':true});

                    var drcog_wusa = new OpenLayers.Layer.WMS("Wastewater Utility Service Areas",
                        "http://gis.drcog.org/geoserver/wms?",
                        {layers: "wusa", transparent: "true", srs: '("EPSG:3785")'}, {visibility:false, isBaseLayer: false,'reproject':true});



                <!--Add layers to the map object-->
                map.addLayers([google,ve,yahoo,drcog_blk,drcog_mv,drcog_wusa]);
                <!--***NOTE:  the order in which they are added determines their order in the layer switcher menu-->

                <!--Add layer switcher menu (with custom color)-->
                var ls = new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher'),activeColor:'#660066'})
                map.addControl(ls);


                <!--Add lat/long read-out to the menu-->
                map.addControl( new OpenLayers.Control.MousePosition() );

                <!--Add zoom and pan controls to map-->
                var panel = new OpenLayers.Control.NavToolbar();
                map.addControl(panel);


                <!--Have the layer menu already expanded when page is loaded-->
                ls.maximizeControl();

                <!--Set the initial view of map using variables defined above-->
                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

                }


                <!--END OF OPEN LAYERS JavaScript-->

        </script>

    </head>

    <!--HTML-->

    <body onload="init()">
        <p style="font-family:verdana;font-size:10pt">
            <b>OpenLayers:  Commercial Maps + DRCOG WMS Layers</b>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="source2.html" target="_blank">View Source Code</a>
        </p>

        <hr>
        <br>

       <!--LOAD MAP INTO A DIV-->
       <div id="controls">
            <div id="map" class="smallmap"></div>
       </div>


    </body>
</html>