diff --git a/css/ol.css b/css/ol.css index db686e8690..954b1e82a3 100644 --- a/css/ol.css +++ b/css/ol.css @@ -126,7 +126,7 @@ } .ol-zoom button, -.ol-zoom-extent a, +.ol-zoom-extent button, .ol-full-screen a { display: block; margin: 1px; @@ -138,37 +138,36 @@ text-align: center; height: 1.375em; width: 1.375em; - line-height: 1.375em; + line-height: .4em; background-color: #7b98bc; background-color: rgba(0,60,136,0.5); border: none; } -.ol-zoom button { - line-height: .4em; -} -.ol-zoom button::-moz-focus-inner { +.ol-zoom button::-moz-focus-inner, +.ol-zoom-extent button::-moz-focus-inner { border: none; padding: 0; } -.ol-zoom-extent a { +.ol-zoom-extent button { font-size: 16px; line-height: 22px; border-radius: 2px; } .ol-touch .ol-zoom button, .ol-touch .ol-full-screen a, -.ol-touch .ol-zoom-extent a { +.ol-touch .ol-zoom-extent button { font-size: 1.5em; } .ol-zoom button:hover, .ol-zoom button:focus, -.ol-zoom-extent a:hover { +.ol-zoom-extent button:hover, +.ol-zoom-extent button:focus { color: #fff; text-decoration: none; background-color: #4c6079; background-color: rgba(0,60,136,0.7); } -.ol-zoom-extent a:after { +.ol-zoom-extent button:after { content: "E"; } .ol-zoom-in { @@ -205,9 +204,11 @@ a.ol-full-screen-true:after { /* show a tooltip offset to below and right */ .ol-has-tooltip:hover [role=tooltip], .ol-has-tooltip:focus [role=tooltip] { clip: auto; - padding: .2em .4em; - height: auto; + padding: 0 .4em; + font-size: .8em; + height: 1.2em; width: auto; + line-height: 1.2em; z-index: 1100; max-height: 100px; white-space: nowrap; @@ -218,8 +219,12 @@ a.ol-full-screen-true:after { border: 3px solid rgba(255, 255, 255, 0.0); border-left-width: 0; border-radius: 0 4px 4px 0; + bottom: .3em; + left: 2.2em; +} +.ol-zoom .ol-has-tooltip:hover [role=tooltip], +.ol-zoom .ol-has-tooltip:focus [role=tooltip] { bottom: 1.1em; - left: 2em; } .ol-zoomslider { @@ -249,10 +254,11 @@ a.ol-full-screen-true:after { height: 20px; width: 24px; } -.ol-zoom-extent a, +.ol-zoom-extent button, .ol-attribution, .ol-full-screen a, .ol-scale-line-inner, -.ol-zoom a { +.ol-zoom button, +.ol-has-tooltip [role=tooltip] { font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif; } diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 43effb8e5f..a65026866c 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -275,6 +275,7 @@ * @typedef {Object} olx.control.ZoomToExtentOptions * @property {string|undefined} className Class name. Default is `ol-zoom-extent`. * @property {Element|undefined} target Target. + * @property {string|undefined} tipLabel Text label to use for the zoom-extent tip. Default is `Zoom to extent` * @property {ol.Extent|undefined} extent The extent to zoom to. If * undefined the validity extent of the view projection is used. * @todo stability experimental diff --git a/src/ol/control/zoomcontrol.js b/src/ol/control/zoomcontrol.js index d0318cfe92..4db00f511f 100644 --- a/src/ol/control/zoomcontrol.js +++ b/src/ol/control/zoomcontrol.js @@ -97,7 +97,6 @@ goog.inherits(ol.control.Zoom, ol.control.Control); */ ol.control.Zoom.prototype.zoomByDelta_ = function(delta, browserEvent) { // prevent the anchor from getting appended to the url - browserEvent.preventDefault(); var map = this.getMap(); // FIXME works for View2D only var view = map.getView(); diff --git a/src/ol/control/zoomtoextentcontrol.js b/src/ol/control/zoomtoextentcontrol.js index 3624654894..067a92943f 100644 --- a/src/ol/control/zoomtoextentcontrol.js +++ b/src/ol/control/zoomtoextentcontrol.js @@ -33,12 +33,18 @@ ol.control.ZoomToExtent = function(opt_options) { var className = goog.isDef(options.className) ? options.className : 'ol-zoom-extent'; + var tipLabel = goog.isDef(options.tipLabel) ? + options.tipLabel : 'Fit to extent'; + var tip = goog.dom.createDom(goog.dom.TagName.SPAN, { + 'role' : 'tooltip' + }, tipLabel); var element = goog.dom.createDom(goog.dom.TagName.DIV, { 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE }); - var button = goog.dom.createDom(goog.dom.TagName.A, { - 'href': '#zoomExtent' + var button = goog.dom.createDom(goog.dom.TagName.BUTTON, { + 'class': 'ol-has-tooltip' }); + goog.dom.appendChild(button, tip); goog.dom.appendChild(element, button); goog.events.listen(element, [ @@ -60,7 +66,6 @@ goog.inherits(ol.control.ZoomToExtent, ol.control.Control); */ ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) { // prevent #zoomExtent anchor from getting appended to the url - browserEvent.preventDefault(); var map = this.getMap(); var view = map.getView(); goog.asserts.assert(goog.isDef(view));