Monday, February 14, 2011

OpenLayers open and view GML data


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers GML Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
//var lon = 5;
//var lat = 40;
//var zoom = 5;
var map, layer;
//var clicker;
//function clicker (e){
//alert ("nothing");
//}

function selected (evt) {

var html ="<table id=\"featureDataTable\">";
var headerRow = "<tr>";
var dataRow = "<tr>";
//alert(evt.feature.id + " selected on " + this.name);
for (var member in evt.feature.data) {
headerRow += "<td>" + member + "</td>";
dataRow += "<td>" + evt.feature.data[member] + "</td>";
//alert('Name: ' + member);
//alert('Value: ' + evt.feature.data[member]);


}
headerRow += "</tr>";
dataRow += "</tr>";
html += headerRow + dataRow + "</table>" ;
//alert(html);
document.getElementById("featureData").innerHTML = html;

}
function init(){
map = new OpenLayers.Map('map');
base = new OpenLayers.Layer("",{isBaseLayer: true});

map.addLayer(base);
// layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
// "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
// layer);
map.zoomToExtent(new OpenLayers.Bounds(-126,24,-63,50));
layer =new OpenLayers.Layer.GML("GML", "http://localhost:8080/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50");
//layer =new OpenLayers.Layer.GML("GML", "http://localhost:8080/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:EMP_FIG_2010_FEATURE_SIMPLE&maxFeatures=2");
//http://localhost:8080/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:EMP_FIG_2010_FEATURE_SIMPLE&maxFeatures=2
// layer =new OpenLayers.Layer.WFS("WFS", "http://localhost:8080/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50");
layer.events.register("featureselected", layer, selected);
var control = new OpenLayers.Control.SelectFeature(layer);
map.addControl(control);
control.activate();

map.addLayer(layer);
//clicker = new OpenLayers.Control.GetFeature();
//map.addControl(clicker);




}
</script>
</head>
<body onload="init()">
<h1 id="title">GML Layer Example</h1>

<div id="tags">
GML
</div>

<p id="shortdesc">
Loads locally stored GML vector data on a basemap. Includes GML example file.
</p>

<div id="map" class="smallmap"></div>

<div id="docs"></div>

<div id="featureData"></div>

</body>

</html>