summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/SLDSelect.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/SLDSelect.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/SLDSelect.html')
-rw-r--r--misc/openlayers/examples/SLDSelect.html202
1 files changed, 202 insertions, 0 deletions
diff --git a/misc/openlayers/examples/SLDSelect.html b/misc/openlayers/examples/SLDSelect.html
new file mode 100644
index 0000000..ff07e31
--- /dev/null
+++ b/misc/openlayers/examples/SLDSelect.html
@@ -0,0 +1,202 @@
+<!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 SLD based selection control</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style type="text/css">
+ .olControlSLDSelectBoxActive {
+ cursor: crosshair;
+ }
+ .olControlSLDSelectPolygonActive {
+ cursor: crosshair;
+ }
+ .olControlSLDSelectLineActive {
+ cursor: crosshair;
+ }
+ .olControlSLDSelectPointActive {
+ cursor: pointer;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map, controls, layers;
+
+ function init(){
+ OpenLayers.ProxyHost= "proxy.cgi?url=";
+ map = new OpenLayers.Map('map', {allOverlays: true, controls: []});
+ var url = "http://demo.opengeo.org/geoserver/wms";
+ layers = {
+ states: new OpenLayers.Layer.WMS("State boundary", url,
+ {layers: 'topp:tasmania_state_boundaries', format: 'image/gif', transparent: 'TRUE'},
+ {singleTile: true}),
+ roads: new OpenLayers.Layer.WMS("Roads", url,
+ {layers: 'topp:tasmania_roads', format: 'image/gif', transparent: 'TRUE'},
+ {singleTile: true}),
+ waterbodies: new OpenLayers.Layer.WMS("Water bodies", url,
+ {layers: 'topp:tasmania_water_bodies', format: 'image/gif', transparent: 'TRUE'},
+ {singleTile: true}),
+ cities: new OpenLayers.Layer.WMS("Cities", url,
+ {layers: 'topp:tasmania_cities', format: 'image/gif', transparent: 'TRUE'},
+ {singleTile: true})
+ };
+
+ for (var key in layers) {
+ map.addLayer(layers[key]);
+ }
+
+ map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7);
+
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+
+ controls = {
+ navigation: new OpenLayers.Control.Navigation(),
+ box: new OpenLayers.Control.SLDSelect(
+ OpenLayers.Handler.RegularPolygon,
+ {
+ displayClass: 'olControlSLDSelectBox',
+ layers: [layers['waterbodies']],
+ handlerOptions: {irregular: true}
+ }
+ ),
+ polygon: new OpenLayers.Control.SLDSelect(
+ OpenLayers.Handler.Polygon,
+ {
+ displayClass: 'olControlSLDSelectPolygon',
+ layers: [layers['waterbodies']]
+ }
+ ),
+ line: new OpenLayers.Control.SLDSelect(
+ OpenLayers.Handler.Path,
+ {
+ displayClass: 'olControlSLDSelectLine',
+ layers: [layers['waterbodies']]
+ }
+ ),
+ point: new OpenLayers.Control.SLDSelect(
+ OpenLayers.Handler.Click,
+ {
+ displayClass: 'olControlSLDSelectPoint',
+ layers: [layers['waterbodies']]
+ }
+ ),
+ circle: new OpenLayers.Control.SLDSelect(
+ OpenLayers.Handler.RegularPolygon,
+ {
+ displayClass: 'olControlSLDSelectBox',
+ layers: [layers['waterbodies']],
+ handlerOptions: {sides: 30}
+ }
+ )
+ };
+
+ for(var key in controls) {
+ map.addControl(controls[key]);
+ }
+ }
+
+ function toggleControl(element) {
+ for(var key in controls) {
+ var control = controls[key];
+ if(element.value == key && element.checked) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ }
+
+ function toggleSelectionLayer(element) {
+ var selectLayers = [];
+ var elements = element.value.split("_");
+ for (var key in layers) {
+ var layer = layers[key];
+ for (var i=0, len=elements.length; i<len; i++) {
+ var value = elements[i];
+ if (value == key && element.checked) {
+ selectLayers.push(layer);
+ }
+ }
+ }
+ for (var i=0, len=this.map.controls.length; i<len; i++) {
+ var control = this.map.controls[i];
+ if (control instanceof OpenLayers.Control.SLDSelect) {
+ control.setLayers(selectLayers);
+ }
+ }
+ }
+
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">SLD based selection on WMS layers</h1>
+
+ <div id="tags">
+ sld, sldselect, styling, style
+ </div>
+
+ <div id="shortdesc">Using Styled Layer Descriptors to make a selection on WMS layers</div>
+
+ <div id="map" style="width: 512px; height: 256px; border: 1px solid red;"></div>
+
+ <div id="docs">
+ This example uses the OpenLayers.Control.SLDSelect to select features in a WMS
+ layer. The features are highlighted using Styled Layer Descriptors (SLD). The
+ control supports point, box, line and polygon selection modes by configuring the
+ appriopriate handler.
+ </div>
+
+ <div id="controls">
+ <ul id="controlToggle"><b>Map Controls</b>
+ <li>
+ <input type="radio" name="control" value="navigation" id="noneToggle" onclick="toggleControl(this);" CHECKED>
+ <label for="noneToggle">navigate</label>
+ </li>
+ <li>
+ <input type="radio" name="control" value="box" id="boxToggle" onclick="toggleControl(this);">
+ <label for="boxToggle">SLD select with box</label>
+ </li>
+ <li>
+ <input type="radio" name="control" value="polygon" id="polygonToggle" onclick="toggleControl(this);">
+ <label for="polygonToggle">SLD select with polygon</label>
+ </li>
+ <li>
+ <input type="radio" name="control" value="line" id="lineToggle" onclick="toggleControl(this);">
+ <label for="lineToggle">SLD select with line</label>
+ </li>
+ <li>
+ <input type="radio" name="control" value="point" id="pointToggle" onclick="toggleControl(this);">
+ <label for="pointToggle">SLD select with point</label>
+ </li>
+ <li>
+ <input type="radio" name="control" value="circle" id="circleToggle" onclick="toggleControl(this);">
+ <label for="circleToggle">SLD select with circle</label>
+ </li>
+ </ul>
+ </div>
+ <div id="layers">
+ <ul id="layerToggle"><b>Selection layer</b>
+ <li>
+ <input type="radio" name="layer" value="waterbodies" id="waterbodiesToggle" onclick="toggleSelectionLayer(this);" CHECKED>
+ <label for="noneToggle">Water bodies</label>
+ </li>
+ <li>
+ <input type="radio" name="layer" value="cities" id="citiesToggle" onclick="toggleSelectionLayer(this);">
+ <label for="citiesToggle">Cities</label>
+ </li>
+ <li>
+ <input type="radio" name="layer" value="roads" id="roadsToggle" onclick="toggleSelectionLayer(this);">
+ <label for="roadsToggle">Roads</label>
+ </li>
+ <li>
+ <input type="radio" name="layer" value="roads_cities" id="roadsCitiesToggle" onclick="toggleSelectionLayer(this);">
+ <label for="roadsCitiesToggle">Roads and cities</label>
+ </li>
+ </ul>
+ </div>
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 04:19:04 +0000