[OpenLayers-Commits] r11847 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Mar 31 10:42:46 EDT 2011
Author: sbrunner
Date: 2011-03-31 07:42:44 -0700 (Thu, 31 Mar 2011)
New Revision: 11847
Modified:
trunk/openlayers/examples/mobile-base.js
trunk/openlayers/examples/mobile-jq.js
trunk/openlayers/examples/mobile-sencha.html
Log:
Sencha Touch SelectFeature, p=cmoulet, r=me (closes #3229)
Modified: trunk/openlayers/examples/mobile-base.js
===================================================================
--- trunk/openlayers/examples/mobile-base.js 2011-03-31 14:40:08 UTC (rev 11846)
+++ trunk/openlayers/examples/mobile-base.js 2011-03-31 14:42:44 UTC (rev 11847)
@@ -7,10 +7,27 @@
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 @@
enableKinetic: true
}
}),
- geolocate
+ geolocate,
+ selectControl
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
@@ -66,8 +84,9 @@
type: "AerialWithLabels",
name: "Bing Aerial + Labels",
transitionEffect: 'resize'
- }),
- vector
+ }),
+ vector,
+ sprintersLayer
],
center: new OpenLayers.LonLat(0, 0),
zoom: 1
@@ -79,7 +98,7 @@
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 @@
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 @@
]);
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);
+ }
+
};
Modified: trunk/openlayers/examples/mobile-jq.js
===================================================================
--- trunk/openlayers/examples/mobile-jq.js 2011-03-31 14:40:08 UTC (rev 11846)
+++ trunk/openlayers/examples/mobile-jq.js 2011-03-31 14:42:44 UTC (rev 11847)
@@ -22,7 +22,10 @@
map.updateSize();
} else {
// initialize map
- init();
+ init(function(feature) {
+ selectedFeature = feature;
+ $.mobile.changePage($("#popup"), "pop");
+ });
}
}
$(window).bind("orientationchange resize pageshow", fixContentHeight);
@@ -44,30 +47,7 @@
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 = "";
for(var attr in selectedFeature.attributes){
@@ -168,47 +148,3 @@
}
});
}
-
-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);
-}
Modified: trunk/openlayers/examples/mobile-sencha.html
===================================================================
--- trunk/openlayers/examples/mobile-sencha.html 2011-03-31 14:40:08 UTC (rev 11846)
+++ trunk/openlayers/examples/mobile-sencha.html 2011-03-31 14:42:44 UTC (rev 11847)
@@ -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>
More information about the Commits
mailing list