<!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>SOS Client Example</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"> .sosmap { width: 768px; height: 512px; } </style> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map; OpenLayers.ProxyHost = "proxy.cgi?url="; OpenLayers.Util.extend(OpenLayers.Lang.en, { 'SOSClientType': "Type", 'SOSClientTime': "Date/time", 'SOSClientLastvalue': "Last value" } ); // Example class on how to put all the OpenLayers SOS pieces together OpenLayers.SOSClient = OpenLayers.Class({ url: null, map: null, capsformat: new OpenLayers.Format.SOSCapabilities(), obsformat: new OpenLayers.Format.SOSGetObservation(), initialize: function (options) { OpenLayers.Util.extend(this, options); var params = {'service': 'SOS', 'request': 'GetCapabilities'}; var paramString = OpenLayers.Util.getParameterString(params); url = OpenLayers.Util.urlAppend(this.url, paramString); OpenLayers.Request.GET({url: url, success: this.parseSOSCaps, scope: this}); }, getFois: function() { var result = []; this.offeringCount = 0; for (var name in this.SOSCapabilities.contents.offeringList) { var offering = this.SOSCapabilities.contents.offeringList[name]; this.offeringCount++; for (var i=0, len=offering.featureOfInterestIds.length; i<len; i++) { var foi = offering.featureOfInterestIds[i]; if (OpenLayers.Util.indexOf(result, foi) === -1) { result.push(foi); } } } return result; }, parseSOSCaps: function(response) { // cache capabilities for future use this.SOSCapabilities = this.capsformat.read(response.responseXML || response.responseText); this.layer = new OpenLayers.Layer.Vector("Stations", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.SOS({ formatOptions: {internalProjection: map.getProjectionObject()}, url: this.url, fois: this.getFois() }) }); this.map.addLayer(this.layer); this.ctrl = new OpenLayers.Control.SelectFeature(this.layer, {scope: this, onSelect: this.onFeatureSelect}); this.map.addControl(this.ctrl); this.ctrl.activate(); }, getTitleForObservedProperty: function(property) { for (var name in this.SOSCapabilities.contents.offeringList) { var offering = this.SOSCapabilities.contents.offeringList[name]; if (offering.observedProperties[0] === property) { return offering.name; } } }, showPopup: function(response) { this.count++; var output = this.obsformat.read(response.responseXML || response.responseText); if (output.measurements.length > 0) { this.html += '<tr>'; this.html += '<td width="100">'+this.getTitleForObservedProperty(output.measurements[0].observedProperty)+'</td>'; this.html += '<td>'+output.measurements[0].samplingTime.timeInstant.timePosition+'</td>'; this.html += '<td>'+output.measurements[0].result.value + ' ' + output.measurements[0].result.uom + '</td>'; this.html += '</tr>'; } // check if we are done if (this.count === this.numRequests) { var html = '<table cellspacing="10"><tbody>'; html += '<tr>'; html += '<th><b>'+OpenLayers.i18n('SOSClientType')+'</b></th>'; html += '<th><b>'+OpenLayers.i18n('SOSClientTime')+'</b></th>'; html += '<th><b>'+OpenLayers.i18n('SOSClientLastvalue')+'</b></th>'; html += '</tr>'; html += this.html; html += '</tbody></table>'; var popup = new OpenLayers.Popup.FramedCloud("sensor", this.feature.geometry.getBounds().getCenterLonLat(), null, html, null, true, function(e) { this.hide(); OpenLayers.Event.stop(e); // unselect so popup can be shown again this.map.getControlsByClass('OpenLayers.Control.SelectFeature')[0].unselectAll(); } ); this.feature.popup = popup; this.map.addPopup(popup); } }, onFeatureSelect: function(feature) { this.feature = feature; this.count = 0; this.html = ''; this.numRequests = this.offeringCount; if (!this.responseFormat) { for (format in this.SOSCapabilities.operationsMetadata.GetObservation.parameters.responseFormat.allowedValues) { // look for a text/xml type of format if (format.indexOf('text/xml') >= 0) { this.responseFormat = format; } } } // do a GetObservation request to get the latest values for (var name in this.SOSCapabilities.contents.offeringList) { var offering = this.SOSCapabilities.contents.offeringList[name]; var xml = this.obsformat.write({ eventTime: 'latest', resultModel: 'om:Measurement', responseMode: 'inline', procedure: feature.attributes.id, offering: name, observedProperties: offering.observedProperties, responseFormat: this.responseFormat }); OpenLayers.Request.POST({ url: this.url, scope: this, failure: this.showPopup, success: this.showPopup, data: xml }); } }, destroy: function () { }, CLASS_NAME: "OpenLayers.SOSClient" }); function init(){ map = new OpenLayers.Map( 'map' ); var baseLayer = new OpenLayers.Layer.WMS("Test Layer", "http://vmap0.tiles.osgeo.org/wms/vmap0?", { layers: "basic"}, {singleTile: true}); var sos = new OpenLayers.SOSClient({map: map, url: 'http://v-swe.uni-muenster.de:8080/WeatherSOS/sos?'}); map.addLayers([baseLayer]); map.setCenter(new OpenLayers.LonLat(5, 45), 4); map.addControl( new OpenLayers.Control.LayerSwitcher() ); map.addControl( new OpenLayers.Control.MousePosition() ); } </script> </head> <body onload="init()"> <h1 id="title">SOS client example</h1> <div id="tags"> sos, sensor, observation, popup, advanced </div> <p id="shortdesc"> Shows how to connect OpenLayers to a Sensor Observation Service (SOS) </p> <div id="map" class="sosmap"></div> <div id="docs"> <p>This example uses a vector layer with a Protocol.SOS and a fixed Strategy. </p><p>When clicking on a point feature (the weather stations offered by the SOS), the latest values for all offerings are displayed in a popup.</p> </div> </body> </html>