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

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11847 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2011-03-31 14:42:44 +00:00
parent fba3582b15
commit baf35aeda2
3 changed files with 112 additions and 78 deletions
--- a/examples/mobile-base.js
+++ b/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);
+    }
+
 };
--- a/examples/mobile-jq.js
+++ b/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);
-}
--- a/examples/mobile-sencha.html
+++ b/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="apple-mobile-web-app-capable" content="yes" />
+        <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 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>