diff --git a/examples/mobile-wmts-vienna.css b/examples/mobile-wmts-vienna.css
index 48e83d8372..82af86790b 100644
--- a/examples/mobile-wmts-vienna.css
+++ b/examples/mobile-wmts-vienna.css
@@ -30,12 +30,27 @@ html, body, #map {
     perspective: 1000;
 }
 
+/* Tile fade animation */
 .olLayerGrid .olTileImage {
     -webkit-transition: opacity 0.2s linear;
     -moz-transition: opacity 0.2s linear;
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
+
+/* Zoom Box */
+.olHandlerBoxZoomBox {
+    border: 2px solid red;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+.olDrawBox {
+    cursor: crosshair;
+}
+
 div.olControlAttribution {
     position: absolute;
     font-size: 10px;
diff --git a/examples/mobile-wmts-vienna.js b/examples/mobile-wmts-vienna.js
index ded4d00f83..ca28f1e1e9 100644
--- a/examples/mobile-wmts-vienna.js
+++ b/examples/mobile-wmts-vienna.js
@@ -46,49 +46,53 @@ var map;
     
     // Geolocate control for the Locate button - the locationupdated handler
     // draws a cross at the location and a circle showing the accuracy radius.
-    zoomPanel.addControls([
-        new OpenLayers.Control.Geolocate({
-            type: OpenLayers.Control.TYPE_TOGGLE,
-            geolocationOptions: {
-                enableHighAccuracy: false,
-                maximumAge: 0,
-                timeout: 7000
+    var geolocate = new OpenLayers.Control.Geolocate({
+        type: OpenLayers.Control.TYPE_TOGGLE,
+        bind: false,
+        watch: true,
+        geolocationOptions: {
+            enableHighAccuracy: false,
+            maximumAge: 0,
+            timeout: 7000
+        },
+        eventListeners: {
+            activate: function() {
+                map.addLayer(vector);
             },
-            eventListeners: {
-                activate: function() {
-                    map.addLayer(vector);
-                },
-                deactivate: function() {
-                    map.removeLayer(vector);
-                    vector.removeAllFeatures();
-                },
-                locationupdated: function(e) {
-                    vector.removeAllFeatures();
-                    vector.addFeatures([
-                        new OpenLayers.Feature.Vector(e.point, null, {
-                            graphicName: 'cross',
+            deactivate: function() {
+                map.removeLayer(vector);
+                vector.removeAllFeatures();
+            },
+            locationupdated: function(e) {
+                vector.removeAllFeatures();
+                vector.addFeatures([
+                    new OpenLayers.Feature.Vector(e.point, null, {
+                        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
+                        ), null, {
+                            fillOpacity: 0.1,
+                            fillColor: '#000',
                             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
-                            ), null, {
-                                fillOpacity: 0.1,
-                                fillColor: '#000',
-                                strokeColor: '#f00',
-                                strokeOpacity: 0.6
-                            }
-                        )
-                    ]);
-                    map.zoomToExtent(vector.getDataExtent());
-                }
+                            strokeOpacity: 0.6
+                        }
+                    )
+                ]);
+                map.zoomToExtent(vector.getDataExtent());
             }
-        })
-    ]);
+        }
+    })
+    zoomPanel.addControls([geolocate]);
+
+    // Fallback layer when outside Vienna
+    var osm = new OpenLayers.Layer.OSM();
 
     // Map with navigation controls optimized for touch devices
     map = new OpenLayers.Map({
@@ -96,17 +100,11 @@ var map;
         theme: null,
         projection: "EPSG:3857",
         units: "m",
-        restrictedExtent: [1799448.394855, 6124949.747770, 1848250.442089, 6162571.828177],
         maxResolution: 38.21851413574219,
         numZoomLevels: 8,
         tileManager: new OpenLayers.TileManager(),
         controls: [
-            new OpenLayers.Control.Navigation({
-                dragPanOptions: {
-                    enableKinetic: true
-                },
-                zoomBoxEnabled: false
-            }),
+            new OpenLayers.Control.Navigation(),
             new OpenLayers.Control.Attribution(),
             zoomPanel,
             layerPanel
@@ -116,6 +114,13 @@ var map;
                 // update anchor for permalinks
                 var ctr = map.getCenter();
                 window.location.hash = "x="+ctr.lon+"&y="+ctr.lat+"&z="+map.getZoom();
+                // switch to OSM when outside Vienna
+                if (!map.getExtent().intersectsBounds(fmzk.tileFullExtent)) {
+                    if (map.baseLayer !== osm) {
+                        map.addLayer(osm);
+                        map.setBaseLayer(osm);
+                    }
+                }
             }
         }
     });
@@ -130,8 +135,7 @@ var map;
         zoomOffset: 12,
         requestEncoding: "REST",
         matrixSet: "google3857",
-        attribution: 'Datenquelle: Stadt Wien - <a href="http://data.wien.gv.at">data.wien.gv.at</a>',
-        transitionEffect: "resize"
+        attribution: 'Datenquelle: Stadt Wien - <a href="http://data.wien.gv.at">data.wien.gv.at</a>'
     };
 
     // The WMTS layers we're going to add