Adding jquery, flot and openlayers to be included with the GEM.v0.0.4

author: Chris Schlaeger <chris@linux.com> 2014-08-12 21:56:44 +0200
committer: Chris Schlaeger <chris@linux.com> 2014-08-12 21:56:44 +0200
commit: ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
tree: af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/getfeatureinfo-control.html
parent: 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
download: postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
1 files changed, 221 insertions, 0 deletions
diff --git a/misc/openlayers/examples/getfeatureinfo-control.html b/misc/openlayers/examples/getfeatureinfo-control.html
new file mode 100644
index 0000000..baecd42
--- /dev/null
+++ b/misc/openlayers/examples/getfeatureinfo-control.html
@@ -0,0 +1,221 @@
+<!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>OpenLayers WMS Feature Info Example (GeoServer)</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">
+    <style type="text/css">
+        ul, li {
+            padding-left: 0px;
+            margin-left: 0px;
+            list-style: none;
+        }
+        #info {
+            position: absolute;
+            top: 6em;
+            left: 550px;
+        }
+        #info table td {
+            border:1px solid #ddd;
+            border-collapse: collapse;
+            margin: 0;
+            padding: 0;
+            font-size: 90%;
+            padding: .2em .1em;
+            background:#fff;
+	}
+	#info table th{
+	    padding:.2em .2em;
+            text-transform: uppercase;
+            font-weight: bold;
+            background: #eee;
+	}
+	tr.odd td {
+            background:#eee;
+	}
+	table.featureInfo caption {
+            text-align:left;
+            font-size:100%;
+            font-weight:bold;
+            padding:.2em .2em;
+	}
+
+
+    </style>
+    <script defer="defer" type="text/javascript">
+    OpenLayers.ProxyHost = "proxy.cgi?url=";
+    var map, infocontrols, water, highlightlayer;
+    
+    function load() {
+        map = new OpenLayers.Map('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}
+        );
+
+        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}
+        );
+
+        highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
+            displayInLayerSwitcher: false, 
+            isBaseLayer: false 
+            }
+        );
+
+        infoControls = {
+            click: new OpenLayers.Control.WMSGetFeatureInfo({
+                url: 'http://demo.opengeo.org/geoserver/wms', 
+                title: 'Identify features by clicking',
+                layers: [water],
+                queryVisible: true
+            }),
+            hover: new OpenLayers.Control.WMSGetFeatureInfo({
+                url: 'http://demo.opengeo.org/geoserver/wms', 
+                title: 'Identify features by clicking',
+                layers: [water],
+                hover: true,
+                // defining a custom format options here
+                formatOptions: {
+                    typeName: 'water_bodies', 
+                    featureNS: 'http://www.openplans.org/topp'
+                },
+                queryVisible: true
+            })
+        };
+
+        map.addLayers([political, roads, cities, water, 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) {
+        if (evt.features && evt.features.length) {
+             highlightLayer.destroyFeatures();
+             highlightLayer.addFeatures(evt.features);
+             highlightLayer.redraw();
+        } else {
+            document.getElementById('responseText').innerHTML = evt.text;
+        }
+    }
+
+    function toggleControl(element) {
+        for (var key in infoControls) {
+            var control = infoControls[key];
+            if (element.value == key && element.checked) {
+                control.activate();
+            } else {
+                control.deactivate();
+            }
+        }
+    }
+
+    function toggleFormat(element) {
+        for (var key in infoControls) {
+            var control = infoControls[key];
+            control.infoFormat = element.value;
+        }
+    }
+
+    function toggleLayers(element) {
+        for (var key in infoControls) {
+            var control = infoControls[key];
+            if (element.value == 'Specified') {
+                control.layers = [water];
+            } else {
+                control.layers = null;
+            }
+        }
+    }
+
+    // function toggle(key
+    </script>
+  </head>
+  <body onload="load()">
+      <h1 id="title">Feature Info Example</h1>
+
+      <div id="tags">
+        WMS, GetFeatureInfo
+      </div>
+
+      <p id="shortdesc">
+        Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
+      </p>
+
+    <div id="info">
+        <h1>Tasmania</h1>
+        <p>Click on the map to get feature info.</p>
+        <div id="responseText">
+        </div>
+    </div>
+      <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+    </div>
+        <ul id="control">
+            <li>
+                <input type="radio" name="controlType" value="click" id="click"
+                       onclick="toggleControl(this);" checked="checked" />
+                <label for="click">Click</label>
+            </li>
+            <li>
+                <input type="radio" name="controlType" value="hover" id="hover" 
+                       onclick="toggleControl(this);" />
+                <label for="hover">Hover</label>
+            </li>
+        </ul>
+        <ul id="format">
+            <li>
+                <input type="radio" name="formatType" value="text/html" id="html"
+                       onclick="toggleFormat(this);" checked="checked" />
+                <label for="html">Show HTML Description</label>
+            </li>
+            <li>
+                <input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight" 
+                       onclick="toggleFormat(this);" />
+                <label for="highlight">Highlight Feature on Map</label>
+            </li>
+        </ul>
+        <ul id="layers">
+            <li>
+                <input type="radio" name="layerSelection" value="Specified" id="Specified"
+                       onclick="toggleLayers(this);" checked="checked" />
+                <label for="Specified">Get water body info</label>
+            </li>
+            <li>
+                <input type="radio" name="layerSelection" value="Auto" id="Auto" 
+                       onclick="toggleLayers(this);" />
+                <label for="Auto">Get info for visible layers</label>
+            </li>
+        </ul>
+  </body>
+</html>
author	Chris Schlaeger <chris@linux.com>	2014-08-12 21:56:44 +0200
committer	Chris Schlaeger <chris@linux.com>	2014-08-12 21:56:44 +0200
commit	ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
tree	af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/getfeatureinfo-control.html
parent	59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
download	postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip