diff --git a/build/light.cfg b/build/light.cfg index f2f7a649a4..b5d7392963 100644 --- 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 index 7bba251270..bfe4543412 100644 --- 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 index 708eb8b68b..671f522b0a 100644 --- 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 index 094647a69e..9bbcb9125a 100644 --- 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 index 58dee4586b..d0775bd464 100644 --- 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 index b963c8f06e..e11dc71efc 100644 --- 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: * - or - * - + * - or * - * - */ @@ -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 index f18e3209d5..0912ffebec 100644 --- 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; }