<html>
<head>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<!--<script type="text/javascript" src="http://128.118.7.3/ol/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 });
var styleDrawBuffer = new OpenLayers.Style({ fillColor: '#cccccc', fillOpacity: 0.3, strokeColor: 'green', strokeWidth: 2, pointRadius: 5 });
var styleSelectedBuffer = new OpenLayers.Style({ fillColor: 'yellow', fillOpacity: 0.2, strokeColor: 'yellow', strokeWidth: 4, pointRadius: 5 });
var styleDelete = new OpenLayers.Style({ display: "none" });
// style map
var styleMapBuffer = new OpenLayers.StyleMap({ 'default': styleBuffer, 'select': styleSelectedBuffer, 'temporary': styleDrawBuffer, 'delete': styleDelete });
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),
select: new OpenLayers.Control.SelectFeature(featureLayer)
};
// add feature controls to map
for (var key in controls) {
map.addControl(controls[key]);
}
} // initMap()
// handle button's onclick event and select the feature
function selectFeature() {
for (i = 0; i < featureLayer.features.length; i++) {
if (featureLayer.features[i].attributes.id == 1) {
// activate modify control
controls.modify.activate();
// select feature
controls.select.select(featureLayer.features[i]);
}
}
}
</script>
</head>
<body onload="initMap();">
<div style="position:absolute;left:0px; width:70%; height:100%; visibility:visible" id="button"><input type="button" onclick="selectFeature();" value="Select"/></div>
<div style="position:absolute;left:75px; width:100%; height:100%; visibility:visible" id="map"></div>
</body>
</html>