summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/getfeatureinfo-popup.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/getfeatureinfo-popup.html')
-rw-r--r--misc/openlayers/examples/getfeatureinfo-popup.html96
1 files changed, 96 insertions, 0 deletions
diff --git a/misc/openlayers/examples/getfeatureinfo-popup.html b/misc/openlayers/examples/getfeatureinfo-popup.html
new file mode 100644
index 0000000..cecdebe
--- /dev/null
+++ b/misc/openlayers/examples/getfeatureinfo-popup.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <title>GetFeatureInfo Popup</title>
+ <script src="../lib/OpenLayers.js"></script>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <script>
+ OpenLayers.ProxyHost = "proxy.cgi?url=";
+
+ var map, info;
+
+ function load() {
+ map = new OpenLayers.Map({
+ div: "map",
+ maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
+ });
+
+ var political = new OpenLayers.Layer.WMS("State Boundaries",
+ "http://demo.opengeo.org/geoserver/wms",
+ {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
+ {isBaseLayer: true}
+ );
+
+ var roads = new OpenLayers.Layer.WMS("Roads",
+ "http://demo.opengeo.org/geoserver/wms",
+ {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
+ {isBaseLayer: false}
+ );
+
+ var cities = new OpenLayers.Layer.WMS("Cities",
+ "http://demo.opengeo.org/geoserver/wms",
+ {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
+ {isBaseLayer: false}
+ );
+
+ var water = new OpenLayers.Layer.WMS("Bodies of Water",
+ "http://demo.opengeo.org/geoserver/wms",
+ {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
+ {isBaseLayer: false}
+ );
+
+ var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
+ displayInLayerSwitcher: false,
+ isBaseLayer: false
+ });
+
+ map.addLayers([political, roads, cities, water, highlight]);
+
+ info = new OpenLayers.Control.WMSGetFeatureInfo({
+ url: 'http://demo.opengeo.org/geoserver/wms',
+ title: 'Identify features by clicking',
+ queryVisible: true,
+ eventListeners: {
+ getfeatureinfo: function(event) {
+ map.addPopup(new OpenLayers.Popup.FramedCloud(
+ "chicken",
+ map.getLonLatFromPixel(event.xy),
+ null,
+ event.text,
+ null,
+ true
+ ));
+ }
+ }
+ });
+ map.addControl(info);
+ info.activate();
+
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ map.zoomToMaxExtent();
+ }
+
+ </script>
+ </head>
+ <body onload="load()">
+ <h1 id="title">Feature Info in Popup</h1>
+
+ <div id="tags">
+ WMS, GetFeatureInfo, popup
+ </div>
+
+ <p id="shortdesc">
+ Demonstrates the WMSGetFeatureInfo control for fetching information
+ about a position from WMS (via GetFeatureInfo request). Results
+ are displayed in a popup.
+ </p>
+
+ <div id="map" class="smallmap"></div>
+
+ <div id="docs"></div>
+ </body>
+</html>