[OpenLayers-Commits] r11839 - sandbox/cmoullet/openlayers/examples

[commits-20090109 at openlayers.org]

Author: cmoullet
Date: 2011-03-31 05:26:56 -0700 (Thu, 31 Mar 2011)
New Revision: 11839

Modified:
   sandbox/cmoullet/openlayers/examples/mobile-base.js
   sandbox/cmoullet/openlayers/examples/mobile-jq.js
   sandbox/cmoullet/openlayers/examples/mobile-sencha.html
Log:
Add sencha select feature and centralize the feature management


Modified: sandbox/cmoullet/openlayers/examples/mobile-base.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/mobile-base.js	2011-03-31 11:58:28 UTC (rev 11838)
+++ sandbox/cmoullet/openlayers/examples/mobile-base.js	2011-03-31 12:26:56 UTC (rev 11839)
@@ -4,7 +4,6 @@
 
 // initialize map when page ready
 var map;
-var sprintersLayer;
 var gg = new OpenLayers.Projection("EPSG:4326");
 var sm = new OpenLayers.Projection("EPSG:900913");
 
@@ -12,6 +11,22 @@
 
     var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
 
+    sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
+        styleMap: new OpenLayers.StyleMap({
+            externalGraphic: "img/mobile-loc.png",
+            graphicOpacity: 1.0,
+            graphicWith: 16,
+            graphicHeight: 26,
+            graphicYOffset: -26
+        })
+    });
+
+    var sprinters = getFeatures();
+    sprintersLayer.addFeatures(sprinters);
+
+    var selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {autoActivate:true,
+        onSelect: onSelectFeatureFunction});
+
     var geolocate = new OpenLayers.Control.Geolocate({
         id: 'locate-control',
         geolocationOptions: {
@@ -39,7 +54,8 @@
                     enableKinetic: true
                 }
             }),
-            geolocate
+            geolocate,
+            selectControl
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {
@@ -68,27 +84,13 @@
                 name: "Bing Aerial + Labels",
                 transitionEffect: 'resize'
             }),
-            vector
+            vector,
+            sprintersLayer
         ],
         center: new OpenLayers.LonLat(0, 0),
         zoom: 1
     });
 
-    var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
-        styleMap: new OpenLayers.StyleMap({
-            externalGraphic: "img/mobile-loc.png",
-            graphicOpacity: 1.0,
-            graphicWith: 16,
-            graphicHeight: 26,
-            graphicYOffset: -26
-        })
-    });
-
-    var sprinters = getFeatures();
-    sprintersLayer.addFeatures(sprinters);
-
-    map.addLayer(sprintersLayer);
-
     var style = {
         fillOpacity: 0.1,
         fillColor: '#000',

Modified: sandbox/cmoullet/openlayers/examples/mobile-jq.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/mobile-jq.js	2011-03-31 11:58:28 UTC (rev 11838)
+++ sandbox/cmoullet/openlayers/examples/mobile-jq.js	2011-03-31 12:26:56 UTC (rev 11839)
@@ -1,4 +1,8 @@
 var selectedFeature = null;
+var onSelectFeatureFunction = function(feature) {
+   selectedFeature = feature;
+   $.mobile.changePage($("#popup"), "pop");
+};
 
 $(document).ready(function() {
 
@@ -44,15 +48,8 @@
             control.activate();
         }
     });
+
     
-    var selectControl = new OpenLayers.Control.SelectFeature(map.getLayersByName("Sprinters")[0], {onSelect: function(feature){
-        selectedFeature = feature;
-        $.mobile.changePage($("#popup"), "pop");
-    }});
-    
-    map.addControl(selectControl);
-    selectControl.activate();
-    
     $('div#popup').live('pageshow',function(event, ui){
         var li = "";
         for(var attr in selectedFeature.attributes){

Modified: sandbox/cmoullet/openlayers/examples/mobile-sencha.html
===================================================================
--- sandbox/cmoullet/openlayers/examples/mobile-sencha.html	2011-03-31 11:58:28 UTC (rev 11838)
+++ sandbox/cmoullet/openlayers/examples/mobile-sencha.html	2011-03-31 12:26:56 UTC (rev 11839)
@@ -50,8 +50,32 @@
         }
     </style>
     <script>
+
         var featurePopup;
+        var sprintersLayer;
 
+        var onSelectFeatureFunction = function(feature) {
+            var htmlContent = "";
+            for (var property in feature.data) {
+                if (feature.data[property] != 'undefined') {
+                    htmlContent = htmlContent + feature.data[property] + "<br>";
+                }
+            }
+            if (featurePopup) {
+                featurePopup.destroy();
+            }
+            featurePopup = new Ext.Panel({
+                floating: true,
+                modal: true,
+                centered: true,
+                hideOnMaskTap: true,
+                width: 240,
+                html: htmlContent,
+                scroll: 'vertical'
+            });
+            featurePopup.show();
+        };
+
         var app = new Ext.Application({
             name: "ol",
             launch: function() {
@@ -144,7 +168,7 @@
                             monitorResize: true,
                             id: "map",
                             listeners: {
-                                render: instantiateMap,
+                                render: init,
                                 resize: function() {
                                     if (window.map) {
                                         map.updateSize();
@@ -156,40 +180,6 @@
                 });
             }
         });
-        var instantiateMap = function() {
-            init();
-            var selectControl = new OpenLayers.Control.SelectFeature(map.getLayersByName("Sprinters")[0], {
-                onSelect: function(feature) {
-                    var htmlContent = "";
-                    for (var property in feature.data) {
-                        if (feature.data[property] != 'undefined') {
-                            htmlContent = htmlContent + feature.data[property] + "<br>";
-                        }
-                    }
-                    if (featurePopup) {
-                        featurePopup.destroy();
-                    }
-                    featurePopup = new Ext.Panel({
-                        floating: true,
-                        modal: true,
-                        centered: true,
-                        hideOnMaskTap: true,
-                        width: 240,
-                        html: htmlContent,
-                        scroll: 'vertical'
-                    });
-                    featurePopup.show();
-
-                },
-                clickout: false,
-                toggle: false,
-                multiple: false,
-                hover: false,
-                box: true
-            });
-            map.addControl(selectControl);
-            selectControl.activate();
-        }
     </script>
 </head>
 <body>