[OpenLayers-Commits] r11534 - sandbox/camptocamp/mobile/jquery/openlayers/examples

[commits-20090109 at openlayers.org]

Author: igorti
Date: 2011-02-25 09:05:19 -0800 (Fri, 25 Feb 2011)
New Revision: 11534

Modified:
   sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.html
   sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.js
   sandbox/camptocamp/mobile/jquery/openlayers/examples/style.mobile-jq.css
Log:
Added possibility to add new layers from WFS server

Modified: sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.html
===================================================================
--- sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.html	2011-02-25 16:52:26 UTC (rev 11533)
+++ sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.html	2011-02-25 17:05:19 UTC (rev 11534)
@@ -58,7 +58,8 @@
             <h1>Layers</h1>
           </div>
           <div data-role="content">
-            <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist"> 
+            <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist"></ul>
+ 			<a href="#addlayer" data-role="button" data-icon="plus">Add layer</a>
           </div>
         </div>
 
@@ -71,5 +72,14 @@
                 </ul>
             </div>
         </div>
+
+		<div id="addlayer" data-role="page">
+			<div data-position="inline" data-role="header">
+				<h1>Add new layer</h1>
+			</div>
+			<div data-role="content">
+				<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="select-layer-list"></ul>
+			</div>
+		</div>
     </body>
 </html>

Modified: sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.js
===================================================================
--- sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.js	2011-02-25 16:52:26 UTC (rev 11533)
+++ sandbox/camptocamp/mobile/jquery/openlayers/examples/mobile-jq.js	2011-02-25 17:05:19 UTC (rev 11534)
@@ -1,4 +1,10 @@
-var selectedFeature = null;
+var selectedFeature, selectedServer = null;
+OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
+var wfsServers = {
+	opengeo : {
+		url : "http://v2.suite.opengeo.org/geoserver/ows"
+	}
+};
 
 $(document).ready(function() {
 
@@ -75,7 +81,11 @@
         }
         $("ul#details-list").empty().append(li).listview("refresh");
     });
-
+	
+	$('div#popup').live('pagehide',function(event, ui){
+	  selectControl.unselectAll();
+	});
+	
     $('#searchpage').live('pageshow',function(event, ui){
         $('#query').bind('change', function(e){
             $('#search_results').empty();
@@ -141,6 +151,32 @@
     map.events.register("addlayer", this, function(e) {
         addLayerToList(e.layer);
     });
+
+	$('div#addlayer').live('pageshow',function(event, ui){
+			selectedServer = wfsServers.opengeo;
+			var serverUrl = selectedServer.url + "?service=wfs&version=1.1.0&request=GetCapabilities";
+
+	        $.mobile.pageLoading();
+			if(selectedServer.featureTypes == undefined){
+				OpenLayers.Request.GET({
+					url: serverUrl,
+					success: function(request) {
+						var format = new OpenLayers.Format.WFSCapabilities();
+						var data = format.read(request.responseText);
+						if(data != undefined){
+							displayFeatureTypes(data.featureTypeList.featureTypes);							
+							$.mobile.pageLoading(true);
+							//save feature types so that no requst is made when user selects server second time
+							selectedServer.featureTypes = data.featureTypeList.featureTypes;	
+						}						
+					}
+				});
+			}
+			else{
+				displayFeatureTypes(selectedServer.featureTypes);	
+				$.mobile.pageLoading(true);
+			}
+	});
 });
 
 function addLayerToList(layer) {
@@ -211,3 +247,51 @@
     
     return reader.read(features);
 }
+
+function findFeatureTypeByName(featureTypeName){
+	var featureType;
+	$.each(selectedServer.featureTypes, function(){
+		if(this.title == featureTypeName){
+			featureType = this;
+		}
+	});
+	return featureType;
+}
+
+function addNewLayer(featureType){
+	var styleMap = new OpenLayers.StyleMap({
+        strokeColor: "#000000",
+        strokeWidth: 3
+    });
+
+	var wfs = new OpenLayers.Layer.Vector(featureType.title, {
+        strategies: [new OpenLayers.Strategy.Fixed()],
+        protocol: new OpenLayers.Protocol.WFS({
+            url: selectedServer.url,
+            featureType: featureType.name,
+            featureNS: featureType.featureNS,
+			srsName: "EPSG:4326",
+			maxFeatures:30
+        }),
+	//	styleMap: styleMap,
+		projection: new OpenLayers.Projection("EPSG:4326")
+    });
+    map.addLayer(wfs);
+	$("ul#layerslist").listview("refresh");
+	wfs.events.on({"featuresadded": function(e){
+		map.zoomToExtent(this.getDataExtent());
+	}});
+	$.mobile.changePage($("#mappage"));	
+}
+
+function displayFeatureTypes(featureTypes){
+	var listItems = "";
+	$.each(featureTypes, function(){
+		listItems += "<li><h2>" + this.title + "</h2></li>";
+	});	
+	$("ul#select-layer-list").empty().append(listItems).listview("refresh");
+	$("ul#select-layer-list li").click(function(){
+		var selectedLayer = findFeatureTypeByName($(this).children("h2").html());
+		addNewLayer(selectedLayer);
+	});
+}

Modified: sandbox/camptocamp/mobile/jquery/openlayers/examples/style.mobile-jq.css
===================================================================
--- sandbox/camptocamp/mobile/jquery/openlayers/examples/style.mobile-jq.css	2011-02-25 16:52:26 UTC (rev 11533)
+++ sandbox/camptocamp/mobile/jquery/openlayers/examples/style.mobile-jq.css	2011-02-25 17:05:19 UTC (rev 11534)
@@ -12,7 +12,7 @@
     padding: 5px 0;
 }
 .portrait, .portrait #mappage {
-    min-height: 0;
+    min-height: 0px;
 }
 /*.portrait, .portrait .ui-page{*/
     /*min-height: 0;*/
@@ -117,4 +117,8 @@
 }
 #details-list li{
 	padding:15px 10px;
+}
+
+.popup{
+	z-index:10000;
 }
\ No newline at end of file