diff --git a/examples/mobile-base.js b/examples/mobile-base.js index 9cf9b859e2..c23f9f79e1 100644 --- 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); + } + }; diff --git a/examples/mobile-jq.js b/examples/mobile-jq.js index 5e8f53cbee..73cb6bc40e 100644 --- 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); -} diff --git a/examples/mobile-sencha.html b/examples/mobile-sencha.html index a4b24dd2c7..8fe1ad17cc 100644 --- a/examples/mobile-sencha.html +++ b/examples/mobile-sencha.html @@ -1,8 +1,8 @@ - - + + OpenLayers with Sencha Touch @@ -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] + "
"; + } + } + 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 @@

OpenLayers with Sencha Touch

+
mobile, sencha touch