Add WMS layer

Utilizing the Municipal Boundary layer from DRCOG Regional Data Catalog we can add the wms over the basemap. Add the following code under where you added the google layers in the simple map example.

 

var wms = new OpenLayers.Layer.WMS("Muni Boundaries 2010",
              {
		"http://gis.drcog.org/geoserver/gwc/service/wms?", 
		 layers: 'DRCOGPUB:muni_2010',
		 format: 'image/png',
		 transparent: 'true',
		 isBaseLayer: 'false',
		 projection: 'EPSG:2232',
		 reproject: 'true'
		});

     map.addLayer(wms);

     

Your JavaScript, in its entirety, will now look like this:


var map; 
$(document).ready(function () {

    map = new OpenLayers.Map('map', {

       maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
         maxResolution: 156543.0399,
        numZoomLevels: "auto",
         units: 'm',
         projection: new OpenLayers.Projection("EPSG:4326"),
         displayProjection: new OpenLayers.Projection("EPSG:900913")
	});
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    var gmap = new OpenLayers.Layer.Google(

        "Google Streets", 
        {numZoomLevels: 20}
    );
    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );

        var gsat = new OpenLayers.Layer.Google( 
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}

    );
        map.addLayers([gmap, gphy, ghyb, gsat]);
        map.setCenter(new OpenLayers.LonLat(-104.96, 39.75).transform(
                new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 9);
        
      var wms = new OpenLayers.Layer.WMS("Muni Boundaries 2010",
               {
		"http://gis.drcog.org/geoserver/gwc/service/wms?", 
		 layers: 'DRCOGPUB:muni_2010',
		 format: 'image/png',
		 transparent: 'true',
		 isBaseLayer: 'false',
		 projection: 'EPSG:2232',
		 reproject: 'true'
		});
     map.addLayer(wms);

}):