Merge pull request openlayers#321 from tonio/zoomdefault

Make Zoom control be default instead of PanZoom.
kochizufan · Mar 19, 2012 · 2b41c89 · 2b41c89
2 parents 926283f + b10e670
commit 2b41c89
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 78 deletions.
diff --git a/build/light.cfg b/build/light.cfg
@@ -13,7 +13,7 @@ OpenLayers/Layer/WMS.js
 OpenLayers/Layer/Google/v3.js
 OpenLayers/Popup/FramedCloud.js
 OpenLayers/Control/Navigation.js
-OpenLayers/Control/ZoomPanel.js
+OpenLayers/Control/Zoom.js
 OpenLayers/Control/Attribution.js
 OpenLayers/Control/SelectFeature.js
 OpenLayers/Control/Panel.js

diff --git a/build/mobile.cfg b/build/mobile.cfg
@@ -11,7 +11,7 @@ OpenLayers/Layer/Bing.js
 OpenLayers/Layer/WMS.js
 OpenLayers/Control/TouchNavigation.js
 OpenLayers/Control/Geolocate.js
-OpenLayers/Control/ZoomPanel.js
+OpenLayers/Control/Zoom.js
 OpenLayers/Control/Attribution.js
 OpenLayers/Control/SelectFeature.js
 OpenLayers/Control/DrawFeature.js

diff --git a/examples/mobile.html b/examples/mobile.html
@@ -35,36 +35,6 @@
                 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;
             }

diff --git a/examples/mobile.js b/examples/mobile.js
@@ -26,7 +26,7 @@ var init = function () {
                     enableKinetic: true
                 }
             }),
-            new OpenLayers.Control.ZoomPanel()
+            new OpenLayers.Control.Zoom()
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {

diff --git a/examples/style.mobile.css b/examples/style.mobile.css
@@ -1,31 +1,42 @@
-div.olControlZoomPanel {
-    height: 108px;
-    width: 36px;
+div.olControlZoom {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 8px;
+    left: 8px;
 }
-div.olControlZoomPanel div {
-    width: 36px;
-    height: 36px;
-    background-image: url(img/mobile-zoombar.png);
-    left: 0;
+* {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-div.olControlZoomPanel .olControlZoomInItemInactive {
-    top: 0;
-    background-position: 0 0;
+div.olControlZoom a {
+    display: block;
+    margin: 1px;
+    padding: 0;
+    color: white;
+    font-size: 28px;
+    font-family: sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+    height: 32px;
+    width: 32px;
+    line-height: 28px;
+    text-shadow: 0 0 3px rgba(0,0,0,0.8);
+    background: #666666; /* fallback for IE - IE6 requires background shorthand*/
+    background: rgba(0, 0, 0, 0.3);
+    filter: alpha(opacity=60);
 }
-div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
-    top: 36px;
-    background-position: 0 -36px;
+a.olControlZoomIn {
+    border-radius: 4px 4px 0 0;
 }
-div.olControlZoomPanel .olControlZoomOutItemInactive {
-    top: 72px;
-    background-position: 0 -72px;
+a.olControlZoomOut {
+    border-radius: 0 0 4px 4px;
 }
-.olTileImage {
-    -webkit-transition: opacity 0.2s linear;
-    -moz-transition: opacity 0.2s linear;
-    -o-transition: opacity 0.2s linear;
-    transition: opacity 0.2s linear;
+div.olControlZoom a:hover {
+    background: #444444; /* fallback for IE */
+    background: rgba(0, 0, 0, 0.5);
+    filter: alpha(opacity=80);
+}
+@media only screen and (max-width: 600px) {
+    div.olControlZoom a:hover {
+        background: rgba(0, 0, 0, 0.3);
+    }
 }
diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js
@@ -195,7 +195,7 @@ OpenLayers.Map = OpenLayers.Class({
      * If not provided in the map options at construction, the map will
      *     by default be given the following controls if present in the build:
      *  - <OpenLayers.Control.Navigation> or <OpenLayers.Control.TouchNavigation>
-     *  - <OpenLayers.Control.PanZoom>
+     *  - <OpenLayers.Control.Zoom> or <OpenLayers.Control.PanZoom>
      *  - <OpenLayers.Control.ArgParser>
      *  - <OpenLayers.Control.Attribution>
      */
@@ -622,9 +622,12 @@ OpenLayers.Map = OpenLayers.Class({
                 } else if (OpenLayers.Control.TouchNavigation) {
                     this.controls.push(new OpenLayers.Control.TouchNavigation());
                 }
-                if (OpenLayers.Control.PanZoom) {
+                if (OpenLayers.Control.Zoom) {
+                    this.controls.push(new OpenLayers.Control.Zoom());
+                } else if (OpenLayers.Control.PanZoom) {
                     this.controls.push(new OpenLayers.Control.PanZoom());
                 }
+
                 if (OpenLayers.Control.ArgParser) {
                     this.controls.push(new OpenLayers.Control.ArgParser());
                 }

diff --git a/theme/default/style.css b/theme/default/style.css
@@ -23,16 +23,16 @@ div.olLayerDiv {
 }
 .olLayerGooglePoweredBy {
     left: 2px;
-    bottom: 15px;   
+    bottom: 15px;
 }
 .olLayerGoogleV3.olLayerGooglePoweredBy {
     bottom: 15px !important;
 }
 .olControlAttribution {
-    font-size: smaller; 
-    right: 3px; 
-    bottom: 4.5em; 
-    position: absolute; 
+    font-size: smaller;
+    right: 3px;
+    bottom: 4.5em;
+    position: absolute;
     display: block;
 }
 .olControlScale {
@@ -67,7 +67,7 @@ div.olLayerDiv {
     display: block;
     position: absolute;
     font-size: smaller;
-} 
+}
 
 div.olControlMousePosition {
     bottom: 0em;
@@ -133,7 +133,7 @@ div.olControlMousePosition {
 .olPopupContent {
     padding:5px;
     overflow: auto;
-}    
+}
 
 .olControlNavigationHistory {
    background-image: url("img/navigation_history.png");
@@ -142,25 +142,25 @@ div.olControlMousePosition {
    height: 24px;
 
 }
-.olControlNavigationHistoryPreviousItemActive { 
+.olControlNavigationHistoryPreviousItemActive {
   background-position: 0 0;
 }
-.olControlNavigationHistoryPreviousItemInactive { 
+.olControlNavigationHistoryPreviousItemInactive {
    background-position: 0 -24px;
 }
-.olControlNavigationHistoryNextItemActive { 
+.olControlNavigationHistoryNextItemActive {
    background-position: -24px 0;
 }
-.olControlNavigationHistoryNextItemInactive { 
+.olControlNavigationHistoryNextItemInactive {
    background-position: -24px -24px;
 }
 
-div.olControlSaveFeaturesItemActive { 
+div.olControlSaveFeaturesItemActive {
     background-image: url(img/save_features_on.png);
     background-repeat: no-repeat;
     background-position: 0 1px;
 }
-div.olControlSaveFeaturesItemInactive { 
+div.olControlSaveFeaturesItemInactive {
     background-image: url(img/save_features_off.png);
     background-repeat: no-repeat;
     background-position: 0 1px;
@@ -181,12 +181,12 @@ div.olControlSaveFeaturesItemInactive {
     opacity: 0.50;
     font-size: 1px;
     filter: alpha(opacity=50);
-}   
+}
 
 .olControlPanPanel {
     top: 10px;
     left: 5px;
-}  
+}
 
 .olControlPanPanel div {
     background-image: url(img/pan-panel.png);
@@ -221,7 +221,7 @@ div.olControlSaveFeaturesItemInactive {
 .olControlZoomPanel {
     top: 71px;
     left: 14px;
-} 
+}
 
 .olControlZoomPanel div {
     background-image: url(img/zoom-panel.png);
@@ -249,9 +249,9 @@ div.olControlSaveFeaturesItemInactive {
     background-position: 0 18px;
 }
 
-/* 
+/*
  * When a potential text is bigger than the image it move the image
- * with some headers (closes #3154) 
+ * with some headers (closes #3154)
  */
 .olControlPanZoomBar div {
     font-size: 1px;
@@ -440,13 +440,14 @@ div.olControlZoom a {
     padding: 0;
     color: white;
     font-size: 18px;
-    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;    
+    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
     font-weight: bold;
     text-decoration: none;
     text-align: center;
     height: 22px;
     width:22px;
     line-height: 19px;
+    text-shadow: 0 0 3px rgba(0,0,0,0.8);
     background: #666666; /* fallback for IE - IE6 requires background shorthand*/
     background: rgba(0, 0, 0, 0.3);
     filter: alpha(opacity=60);
@@ -456,6 +457,11 @@ div.olControlZoom a:hover {
     background: rgba(0, 0, 0, 0.5);
     filter: alpha(opacity=80);
 }
+@media only screen and (max-width: 600px) {
+    div.olControlZoom a:hover {
+        background: rgba(0, 0, 0, 0.3);
+    }
+}
 a.olControlZoomIn {
     border-radius: 4px 4px 0 0;
 }