Changed example to follow our well known structure. Now it also works in IE.
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9162 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
@@ -7,98 +7,83 @@
|
|||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
ul, li { padding-left: 0px; margin-left: 0px; }
|
ul, li { padding-left: 0px; margin-left: 0px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1 id="title">Feature Info Example</h1>
|
|
||||||
|
|
||||||
<div id="tags"></div>
|
|
||||||
|
|
||||||
<p id="shortdesc">
|
|
||||||
Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<a id="permalink" href="">Permalink</a><br />
|
|
||||||
|
|
||||||
<div style="float:right;width:28%">
|
|
||||||
<h1 style="font-size:1.3em;">South Africa</h1>
|
|
||||||
<p style="font-size:.8em;">Click on the map to get feature info.</p>
|
|
||||||
<div id="nodeList">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="map" class="smallmap"></div>
|
|
||||||
|
|
||||||
<script defer="defer" type="text/javascript">
|
<script defer="defer" type="text/javascript">
|
||||||
OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
|
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
|
||||||
var map = new OpenLayers.Map('map', {
|
|
||||||
maxExtent: new OpenLayers.Bounds(16.154,-34.953,33.327,-22.193)
|
var map, infocontrols, vegetation, highlightlayer;
|
||||||
});
|
|
||||||
|
function load() {
|
||||||
|
map = new OpenLayers.Map('map', {
|
||||||
|
maxExtent: new OpenLayers.Bounds(16.154,-34.953,33.327,-22.193)
|
||||||
|
});
|
||||||
|
|
||||||
var roads = new OpenLayers.Layer.WMS("Roads",
|
var roads = new OpenLayers.Layer.WMS("Roads",
|
||||||
"http://geo.openplans.org/geoserver/wms",
|
"http://geo.openplans.org/geoserver/wms",
|
||||||
{'layers': 'za:za_roads', transparent: true, format: 'image/png'},
|
{'layers': 'za:za_roads', transparent: true, format: 'image/png'},
|
||||||
{isBaseLayer: true}
|
{isBaseLayer: true}
|
||||||
);
|
);
|
||||||
|
|
||||||
var natural = new OpenLayers.Layer.WMS("Natural Features",
|
var natural = new OpenLayers.Layer.WMS("Natural Features",
|
||||||
"http://geo.openplans.org/geoserver/wms",
|
"http://geo.openplans.org/geoserver/wms",
|
||||||
{'layers': 'za:za_natural', transparent: true, format: 'image/png'},
|
{'layers': 'za:za_natural', transparent: true, format: 'image/png'},
|
||||||
{isBaseLayer: false}
|
{isBaseLayer: false}
|
||||||
);
|
);
|
||||||
|
|
||||||
var points = new OpenLayers.Layer.WMS("Points of Interest",
|
var points = new OpenLayers.Layer.WMS("Points of Interest",
|
||||||
"http://geo.openplans.org/geoserver/wms",
|
"http://geo.openplans.org/geoserver/wms",
|
||||||
{'layers': 'za:za_points', transparent: true, format: 'image/png'},
|
{'layers': 'za:za_points', transparent: true, format: 'image/png'},
|
||||||
{isBaseLayer: false}
|
{isBaseLayer: false}
|
||||||
);
|
);
|
||||||
|
|
||||||
var vegetation = new OpenLayers.Layer.WMS("Vegetation",
|
vegetation = new OpenLayers.Layer.WMS("Vegetation",
|
||||||
"http://geo.openplans.org/geoserver/wms",
|
"http://geo.openplans.org/geoserver/wms",
|
||||||
{'layers': 'za:za_vegetation', transparent: true, format: 'image/png'},
|
{'layers': 'za:za_vegetation', transparent: true, format: 'image/png'},
|
||||||
{isBaseLayer: false}
|
{isBaseLayer: false}
|
||||||
);
|
);
|
||||||
|
|
||||||
var highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
|
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
|
||||||
displayInLayerSwitcher: false,
|
displayInLayerSwitcher: false,
|
||||||
isBaseLayer: false,
|
isBaseLayer: false,
|
||||||
styleMap: new OpenLayers.StyleMap({
|
styleMap: new OpenLayers.StyleMap({
|
||||||
"default": new OpenLayers.Style({
|
"default": new OpenLayers.Style({
|
||||||
fillColor: "#0000BB",
|
fillColor: "#0000BB",
|
||||||
strokeColor: "#000099"
|
strokeColor: "#000099"
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
infoControls = {
|
||||||
|
click: new OpenLayers.Control.WMSGetFeatureInfo('http://geo.openplans.org/geoserver/wms', {
|
||||||
|
title: 'Identify features by clicking',
|
||||||
|
layers: [vegetation],
|
||||||
|
queryVisible: true
|
||||||
|
}),
|
||||||
|
hover: new OpenLayers.Control.WMSGetFeatureInfo('http://geo.openplans.org/geoserver/wms', {
|
||||||
|
title: 'Identify features by clicking',
|
||||||
|
layers: [vegetation],
|
||||||
|
hover: true,
|
||||||
|
// defining a custom format here
|
||||||
|
formats: {'application/vnd.ogc.gml': new OpenLayers.Format.GML({
|
||||||
|
typeName: 'vegetation',
|
||||||
|
featureNS: 'http://opengeo.org/za'
|
||||||
|
})},
|
||||||
|
queryVisible: true
|
||||||
|
})
|
||||||
}
|
}
|
||||||
);
|
|
||||||
|
|
||||||
var infoControls = {
|
map.addLayers([roads, natural, points, vegetation, highlightLayer]);
|
||||||
click: new OpenLayers.Control.WMSGetFeatureInfo('http://geo.openplans.org/geoserver/wms', {
|
for (var i in infoControls) {
|
||||||
title: 'Identify features by clicking',
|
infoControls[i].events.register("getfeatureinfo", this, showInfo);
|
||||||
layers: [vegetation],
|
map.addControl(infoControls[i]);
|
||||||
queryVisible: true
|
}
|
||||||
}),
|
|
||||||
hover: new OpenLayers.Control.WMSGetFeatureInfo('http://geo.openplans.org/geoserver/wms', {
|
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||||
title: 'Identify features by clicking',
|
|
||||||
layers: [vegetation],
|
infoControls.click.activate();
|
||||||
hover: true,
|
map.zoomToMaxExtent();
|
||||||
// defining a custom format here
|
|
||||||
formats: {'application/vnd.ogc.gml': new OpenLayers.Format.GML({
|
|
||||||
typeName: 'vegetation',
|
|
||||||
featureNS: 'http://opengeo.org/za'
|
|
||||||
})},
|
|
||||||
queryVisible: true
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
map.addLayers([roads, natural, points, vegetation, highlightLayer]);
|
|
||||||
for (var i in infoControls) {
|
|
||||||
infoControls[i].events.register("getfeatureinfo", this, showInfo);
|
|
||||||
map.addControl(infoControls[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
|
||||||
|
|
||||||
infoControls.click.activate();
|
|
||||||
map.zoomToMaxExtent();
|
|
||||||
|
|
||||||
function showInfo(evt) {
|
function showInfo(evt) {
|
||||||
if (evt.features && evt.features.length) {
|
if (evt.features && evt.features.length) {
|
||||||
highlightLayer.destroyFeatures();
|
highlightLayer.destroyFeatures();
|
||||||
@@ -140,6 +125,26 @@
|
|||||||
|
|
||||||
// function toggle(key
|
// function toggle(key
|
||||||
</script>
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="load()">
|
||||||
|
<h1 id="title">Feature Info Example</h1>
|
||||||
|
|
||||||
|
<div id="tags"></div>
|
||||||
|
|
||||||
|
<p id="shortdesc">
|
||||||
|
Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="permalink" href="">Permalink</a><br />
|
||||||
|
|
||||||
|
<div style="float:right;width:28%">
|
||||||
|
<h1 style="font-size:1.3em;">South Africa</h1>
|
||||||
|
<p style="font-size:.8em;">Click on the map to get feature info.</p>
|
||||||
|
<div id="nodeList">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="map" class="smallmap"></div>
|
||||||
|
|
||||||
<div id="docs">
|
<div id="docs">
|
||||||
</div>
|
</div>
|
||||||
<ul id="control">
|
<ul id="control">
|
||||||
|
|||||||
Reference in New Issue
Block a user