Fixing different things in the mobile aware examples:

- css styling for the zoom panel control,
 - creating a new mobile-base.js file shared by sencha and jq examples,
 - (re-)simplyfing mobile.js


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

examples/mobile-base.js

@@ -0,0 +1,108 @@
+// API key for http://openlayers.org. Please get your own at
+// http://bingmapsportal.com/ and use that instead.
+var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+
+// initialize map when page ready
+var map;
+var gg = new OpenLayers.Projection("EPSG:4326");
+var sm = new OpenLayers.Projection("EPSG:900913");
+
+var init = function () {
+
+    var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
+
+    var geolocate = new OpenLayers.Control.Geolocate({
+        id: 'locate-control',
+        geolocationOptions: {
+            enableHighAccuracy: false,
+            maximumAge: 0,
+            timeout: 7000
+        }
+    });
+    // create map
+    map = new OpenLayers.Map({
+        div: "map",
+        theme: null,
+        projection: sm,
+        units: "m",
+        numZoomLevels: 18,
+        maxResolution: 156543.0339,
+        maxExtent: new OpenLayers.Bounds(
+            -20037508.34, -20037508.34, 20037508.34, 20037508.34
+        ),
+        controls: [
+            new OpenLayers.Control.Attribution(),
+            new OpenLayers.Control.TouchNavigation({
+                dragPanOptions: {
+                    interval: 0, // non-zero kills performance on some mobile phones
+                    enableKinetic: true
+                }
+            }),
+            geolocate
+        ],
+        layers: [
+            new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "Road",
+                // custom metadata parameter to request the new map style - only useful
+                // before May 1st, 2011
+                metadataParams: {
+                    mapVersion: "v1"
+                },
+                name: "Bing Road",
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "Aerial",
+                name: "Bing Aerial",
+                transitionEffect: 'resize'
+            }),
+            new OpenLayers.Layer.Bing({
+                key: apiKey,
+                type: "AerialWithLabels",
+                name: "Bing Aerial + Labels",
+                transitionEffect: 'resize'
+            }), 
+            vector
+        ]
+    });
+    map.zoomToMaxExtent();
+
+    var style = {
+        fillOpacity: 0.1,
+        fillColor: '#000',
+        strokeColor: '#f00',
+        strokeOpacity: 0.6
+    };
+    geolocate.events.register("locationupdated",this,function(e) {
+        vector.removeAllFeatures();
+        vector.addFeatures([
+            new OpenLayers.Feature.Vector(
+                e.point,
+                {},
+                {
+                    graphicName: 'cross',
+                    strokeColor: '#f00',
+                    strokeWidth: 2,
+                    fillOpacity: 0,
+                    pointRadius: 10
+                }
+            ),
+            new OpenLayers.Feature.Vector(
+                OpenLayers.Geometry.Polygon.createRegularPolygon(
+                    new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+                    e.position.coords.accuracy/2,
+                    50,
+                    0
+                ),
+                {},
+                style
+            )
+        ]);
+        map.zoomToExtent(vector.getDataExtent());
+    });
+};

examples/mobile-jq.html

@@ -11,7 +11,7 @@
         <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
         <link rel="stylesheet" href="style.mobile.css" type="text/css">
         <script src="../lib/OpenLayers.js"></script>
-        <script src="mobile.js"></script>
+        <script src="mobile-base.js"></script>
         <style>
             html {
                 height: 100%;

examples/mobile-sencha.html

@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
         <script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
         <script src="mobile-sencha.js"></script>
-        <script src="mobile.js"></script>
+        <script src="mobile-base.js"></script>
         <style>
             .searchList {
                 min-height: 150px;

examples/mobile.html

@@ -2,6 +2,7 @@
 <html>
     <head>
         <title>OpenLayers Mobile</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <link rel="stylesheet" href="style.mobile.css" type="text/css">
@@ -9,19 +10,60 @@
         <script src="mobile.js"></script>
         <style>
             html, body {
-                margin: 0;
+                margin  : 0;
-                padding: 0;
+                padding : 0;
-                height: 100%;
+                height  : 100%;
+                width   : 100%;
+            }
+            @media only screen and (max-width: 600px) {
+                html, body {
+                    height  : 117%;
+                }
             }
             #map {
-                position: relative;
+                width    : 100%;
-                width: 100%;
+                position : relative;
-                height: 100%;
+                height   : 100%;
             }
             .olControlAttribution {
-                font-size: 10px;
+                position      : absolute;
-                bottom: 5px;
+                font-size     : 10px;
-                right: 5px;
+                bottom        : 0 !important;
+                right         : 0 !important;
+                background    : rgba(0,0,0,0.1);
+                font-family   : Arial;
+                padding       : 2px 4px;
+                border-radius : 5px 0 0 0;
+            }
+            div.olControlZoomPanel .olControlZoomInItemInactive,
+            div.olControlZoomPanel .olControlZoomOutItemInactive {
+                background: rgba(0,0,0,0.2);
+                position: absolute;
+            }
+            div.olControlZoomPanel .olControlZoomInItemInactive {
+                border-radius: 5px 5px 0 0;
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive {
+                border-radius: 0 0 5px 5px ;
+                top: 37px;
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
+            div.olControlZoomPanel .olControlZoomInItemInactive:after{
+                font-weight: bold;
+                content   : '+';
+                font-size : 36px;
+                padding:  7px;
+                z-index: 2000;
+                color     : #fff;
+                line-height: 1em;
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive:after{
+                content: '–';
+                line-height: 0.9em;
+                padding: 0 8px;
+            }
+            div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+                display: none;
             }
             #title, #tags, #shortdesc {
                 display: none;

examples/mobile.js

@@ -1,34 +1,24 @@
-// API key for http://openlayers.org. Please get your own at
-// http://bingmapsportal.com/ and use that instead.
-var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
-
 // initialize map when page ready
 var map;
-var gg = new OpenLayers.Projection("EPSG:4326");
-var sm = new OpenLayers.Projection("EPSG:900913");
-var init = function () {
 
-    var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
+// Get rid of address bar on iphone/ipod
-
+var fixSize = function() {
-    var geolocate = new OpenLayers.Control.Geolocate({
+    window.scrollTo(0,0);
-        id: 'locate-control',
+    document.body.style.height = '100%';
-        geolocationOptions: {
+    if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
-            enableHighAccuracy: false,
+        if (document.body.parentNode) {
-            maximumAge: 0,
+            document.body.parentNode.style.height = '100%';
-            timeout: 7000
         }
-    });
+    }
+};
+setTimeout(fixSize, 700);
+setTimeout(fixSize, 1500);
+
+var init = function () {
     // create map
     map = new OpenLayers.Map({
         div: "map",
         theme: null,
-        projection: sm,
-        units: "m",
-        numZoomLevels: 18,
-        maxResolution: 156543.0339,
-        maxExtent: new OpenLayers.Bounds(
-            -20037508.34, -20037508.34, 20037508.34, 20037508.34
-        ),
         controls: [
             new OpenLayers.Control.Attribution(),
             new OpenLayers.Control.TouchNavigation({
@@ -37,71 +27,14 @@ var init = function () {
                     enableKinetic: true
                 }
             }),
-            geolocate
+            new OpenLayers.Control.ZoomPanel()
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {
                 transitionEffect: 'resize'
-            }),
+            })
-            new OpenLayers.Layer.Bing({
+        ],
-                key: apiKey,
+        center: new OpenLayers.LonLat(742000, 5861000),
-                type: "Road",
+        zoom: 3
-                // custom metadata parameter to request the new map style - only useful
-                // before May 1st, 2011
-                metadataParams: {
-                    mapVersion: "v1"
-                },
-                name: "Bing Road",
-                transitionEffect: 'resize'
-            }),
-            new OpenLayers.Layer.Bing({
-                key: apiKey,
-                type: "Aerial",
-                name: "Bing Aerial",
-                transitionEffect: 'resize'
-            }),
-            new OpenLayers.Layer.Bing({
-                key: apiKey,
-                type: "AerialWithLabels",
-                name: "Bing Aerial + Labels",
-                transitionEffect: 'resize'
-            }), 
-            vector
-        ]
-    });
-    map.zoomToMaxExtent();
-
-    var style = {
-        fillOpacity: 0.1,
-        fillColor: '#000',
-        strokeColor: '#f00',
-        strokeOpacity: 0.6
-    };
-    geolocate.events.register("locationupdated",this,function(e) {
-        vector.removeAllFeatures();
-        vector.addFeatures([
-            new OpenLayers.Feature.Vector(
-                e.point,
-                {},
-                {
-                    graphicName: 'cross',
-                    strokeColor: '#f00',
-                    strokeWidth: 2,
-                    fillOpacity: 0,
-                    pointRadius: 10
-                }
-            ),
-            new OpenLayers.Feature.Vector(
-                OpenLayers.Geometry.Polygon.createRegularPolygon(
-                    new OpenLayers.Geometry.Point(e.point.x, e.point.y),
-                    e.position.coords.accuracy/2,
-                    50,
-                    0
-                ),
-                {},
-                style
-            )
-        ]);
-        map.zoomToExtent(vector.getDataExtent());
     });
 };