Sencha Touch SelectFeature, p=cmoulet, r=me (closes #3229)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11847 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/mobile-base.js

@@ -7,10 +7,27 @@ var map;
 var gg = new OpenLayers.Projection("EPSG:4326");
 var sm = new OpenLayers.Projection("EPSG:900913");
 
-var init = function () {
+var init = function (onSelectFeatureFunction) {
 
     var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
 
+    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);
+
+    var selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {
+        autoActivate:true,
+        onSelect: onSelectFeatureFunction});
+
     var geolocate = new OpenLayers.Control.Geolocate({
         id: 'locate-control',
         geolocationOptions: {
@@ -38,7 +55,8 @@ var init = function () {
                     enableKinetic: true
                 }
             }),
-            geolocate
+            geolocate,
+            selectControl
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {
@@ -66,8 +84,9 @@ var init = function () {
                 type: "AerialWithLabels",
                 name: "Bing Aerial + Labels",
                 transitionEffect: 'resize'
-            }), 
+            }),
-            vector
+            vector,
+            sprintersLayer
         ],
         center: new OpenLayers.LonLat(0, 0),
         zoom: 1
@@ -79,7 +98,7 @@ var init = function () {
         strokeColor: '#f00',
         strokeOpacity: 0.6
     };
-    geolocate.events.register("locationupdated",this,function(e) {
+    geolocate.events.register("locationupdated", this, function(e) {
         vector.removeAllFeatures();
         vector.addFeatures([
             new OpenLayers.Feature.Vector(
@@ -96,7 +115,7 @@ var init = function () {
             new OpenLayers.Feature.Vector(
                 OpenLayers.Geometry.Polygon.createRegularPolygon(
                     new OpenLayers.Geometry.Point(e.point.x, e.point.y),
-                    e.position.coords.accuracy/2,
+                    e.position.coords.accuracy / 2,
                     50,
                     0
                 ),
@@ -106,4 +125,49 @@ var init = function () {
         ]);
         map.zoomToExtent(vector.getDataExtent());
     });
+
+    function getFeatures() {
+        var features = {
+            "type": "FeatureCollection",
+            "features": [
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]},
+                    "properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]},
+                    "properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]},
+                    "properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]},
+                    "properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]},
+                    "properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]},
+                    "properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]},
+                    "properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]},
+                    "properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]},
+                    "properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]},
+                    "properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]},
+                    "properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]},
+                    "properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny-près-Yverdon"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]},
+                    "properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]},
+                    "properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]},
+                    "properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}},
+                { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]},
+                    "properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}}
+            ]
+        };
+
+        var reader = new OpenLayers.Format.GeoJSON();
+
+        return reader.read(features);
+    }
+
 };

examples/mobile-jq.js

@@ -22,7 +22,10 @@ $(document).ready(function() {
             map.updateSize();
         } else {
             // initialize map
-            init();
+            init(function(feature) { 
+                selectedFeature = feature; 
+                $.mobile.changePage($("#popup"), "pop"); 
+            });
         }
     }
     $(window).bind("orientationchange resize pageshow", fixContentHeight);
@@ -44,29 +47,6 @@ $(document).ready(function() {
             control.activate();
         }
     });
-
-    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 selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {onSelect: function(feature){
-        selectedFeature = feature;
-        $.mobile.changePage($("#popup"), "pop");
-    }});
-    
-    map.addControl(selectControl);
-    selectControl.activate();
     
     $('div#popup').live('pageshow',function(event, ui){
         var li = "";
@@ -168,47 +148,3 @@ function addLayerToList(layer) {
         }
     });
 }
-
-function getFeatures(){
-    var features = {
-      "type": "FeatureCollection", 
-      "features": [
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]}, 
-            "properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]}, 
-            "properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]}, 
-            "properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]}, 
-            "properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]}, 
-            "properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]}, 
-            "properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]}, 
-            "properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]}, 
-            "properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]}, 
-            "properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]}, 
-            "properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]}, 
-            "properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]},
-            "properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny-près-Yverdon"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]},
-            "properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]},
-            "properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]}, 
-            "properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}},
-            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]}, 
-            "properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}}
-       ]
-    };
-
-    var reader = new OpenLayers.Format.GeoJSON();
-    
-    return reader.read(features);
-}

examples/mobile-sencha.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
-    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+        <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" />
+        <meta name="apple-mobile-web-app-capable" content="yes"/>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>OpenLayers with Sencha Touch</title>
         <script src="../lib/OpenLayers.js?mobile"></script>
@@ -15,29 +15,36 @@
             .searchList {
                 min-height: 150px;
             }
+
             .close-btn {
                 position: absolute;
                 right: 10px;
                 top: 10px;
             }
+
             img.minus {
                 -webkit-mask-image: url(img/minus1.png);
             }
+
             img.layers {
                 -webkit-mask-image: url(img/list.png);
             }
+
             .gx-layer-item {
                 margin-left: 10px;
             }
+
             #map {
                 width: 100%;
                 height: 100%;
             }
+
             .olControlAttribution {
                 font-size: 10px;
                 bottom: 5px;
                 right: 5px;
             }
+
             #title, #tags, #shortdesc {
                 display: none;
             }
@@ -59,7 +66,7 @@
                         items: [{
                             iconCls: "search",
                             iconMask: true,
-                            handler: function(){
+                            handler: function() {
                                 // this is the app
                                 if (!app.searchFormPopupPanel) {
                                     app.searchFormPopupPanel = new App.SearchFormPopupPanel({
@@ -124,11 +131,37 @@
                             monitorResize: true,
                             id: "map",
                             listeners: {
-                                render: init,
+                                render: function() {
+                                    var self = this;
+                                    init(function(feature) {
+                                        var htmlContent = "";
+                                        for (var property in feature.data) {
+                                            if (feature.data[property] != 'undefined') {
+                                                htmlContent = htmlContent + feature.data[property] + "<br>";
+                                            }
+                                        }
+                                        if (self.featurePopup) {
+                                            self.featurePopup.destroy();
+                                        }
+                                        self.featurePopup = new Ext.Panel({
+                                            floating: true,
+                                            modal: true,
+                                            centered: true,
+                                            hideOnMaskTap: true,
+                                            width: 240,
+                                            html: htmlContent,
+                                            scroll: 'vertical'
+                                        });
+                                        self.featurePopup.show();
+                                    })
+                                },
                                 resize: function() {
                                     if (window.map) {
                                         map.updateSize();
                                     }
+                                },
+                                scope: {
+                                    featurePopup: null
                                 }
                             }
                         }
@@ -140,6 +173,7 @@
     </head>
     <body>
         <h1 id="title">OpenLayers with Sencha Touch</h1>
+
         <div id="tags">
             mobile, sencha touch
         </div>