<html>
<head>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" >
var map;
var topoLayer, featureLayer;
var controls;
// define the styles and style map
var styleBuffer = new OpenLayers.Style({ fillColor: 'yellow', fillOpacity: 0.2, strokeColor: 'yellow', strokeWidth: 2, pointRadius: 5, label: "${id}", fontColor: "yellow", fontSize: "12px", fontFamily: "Courier New, monospace", fontWeight: "bold", labelAlign: "cm" });
var styleSelectedBuffer = new OpenLayers.Style({ fillColor: 'yellow', fillOpacity: 0.2, strokeColor: 'yellow', strokeWidth: 4, pointRadius: 5 });
// style map
var styleMapBuffer = new OpenLayers.StyleMap({ 'default': styleBuffer, 'select': styleSelectedBuffer});
function initMap() {
// initialize OL map
var pamapbounds = new OpenLayers.Bounds(-80.7932189501, 39.531649072, -74.3575413164, 42.4219556154);
map = new OpenLayers.Map('map', { numZoomLevels: 23, maxZoomLevel: 23, controls: [new OpenLayers.Control.PanZoomBar()], 'maxResolution': 6.43568 / 512, 'maxExtent': pamapbounds });
// define topo layer
topoLayer = new OpenLayers.Layer.WMS("Topo Map", "http://maps.pasda.psu.edu/wmsconnector/com.esri.wms.Esrimap?Service=wms&Servicename=Imagery_Viewer2",
                                { transparent: 'true',
                                 layers: '155556666',
                                 'format': 'png'
                                },
                         { 'reproject': true, isBaseLayer: true });
// define layer for farm buffers
                 featureLayer = new OpenLayers.Layer.Vector("Test Feature", { visibility: true, styleMap: styleMapBuffer});
// add layer switcher
layerSw = new OpenLayers.Control.LayerSwitcher();
map.addControl(layerSw);
layerSw.maximizeControl();
// add basic navigation
map.addControl(new OpenLayers.Control.Navigation());
// add WKT feature to featureLayer
wktFeature = new OpenLayers.Format.WKT().read("POLYGON ((-77.920521476893086 40.789467898803352, -77.920422509016 40.789470967575, -77.920404096388 40.789102715012, -77.920625047926 40.789127265182, -77.920571344427074 40.789243878494, -77.920521476893086 40.789467898803352))");
wktFeature.attributes["id"] = 1;
featureLayer.addFeatures([wktFeature]);
// add layers to map
map.addLayers([topoLayer, featureLayer]);
// set initial extent
map.setCenter(new OpenLayers.LonLat(-77.9208, 40.7896), 12);
// set up feature controls
controls = {
modify: new OpenLayers.Control.ModifyFeature(featureLayer),
};
// add feature controls to map
for (var key in controls) {
map.addControl(controls[key]);
}
controls.modify.activate();
} // initMap()
</script>
</head>
<body onload="initMap();">
<div style="width:100%; height:100%; visibility:visible" id="map"></div>
</body>
</html>