diff --git a/css/ol.css b/css/ol.css index cf46a42de2..0813fc01a6 100644 --- a/css/ol.css +++ b/css/ol.css @@ -1,5 +1,6 @@ .ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; } -.ol-renderer-webgl-canvas { width:100%;height:100%; } +.ol-renderer-webgl-canvas { width:100%; height:100%; } + /** * arrow implementation from http://cssarrowplease.com/ for ol-popup @@ -22,7 +23,6 @@ height: 17px; right: 0; } - .ol-popup-top {} .ol-popup-top:after, .ol-popup-top:before { bottom: 100%; @@ -33,21 +33,18 @@ position: absolute; pointer-events: none; } - .ol-popup-top:after { border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } - .ol-popup-top:before { border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; } - .ol-popup-bottom {} .ol-popup-bottom:after, .ol-popup-bottom:before { top: 100%; @@ -58,7 +55,6 @@ position: absolute; pointer-events: none; } - .ol-popup-bottom:after { border-top-color: #88b7d5; border-width: 30px; @@ -81,7 +77,6 @@ position: absolute; pointer-events: none; } - .ol-popup-right:after { border-left-color: #88b7d5; border-width: 30px; @@ -104,7 +99,6 @@ position: absolute; pointer-events: none; } - .ol-popup-left:after { border-right-color: #88b7d5; border-width: 30px; @@ -118,3 +112,44 @@ margin-top: -36px; } +div.ol-control-zoom { + position: absolute; + top: 8px; + left: 8px; + background: rgba(255,255,255,0.4); + border-radius: 4px; + padding: 2px; +} +div.ol-control-zoom a { + display: block; + margin: 1px; + padding: 0; + color: white; + font-size: 18px; + 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; + background: #130085; /* fallback for IE - IE6 requires background shorthand*/ + background: rgba(0, 60, 136, 0.5); + filter: alpha(opacity=80); +} +div.ol-control-zoom a:hover { + background: #130085; /* fallback for IE */ + background: rgba(0, 60, 136, 0.7); + filter: alpha(opacity=100); +} +@media only screen and (max-width: 600px) { + div.ol-control-zoom a:hover { + background: rgba(0, 60, 136, 0.5); + } +} +a.ol-control-zoom-in { + border-radius: 4px 4px 0 0; +} +a.ol-control-zoom-out { + border-radius: 0 0 4px 4px; +} \ No newline at end of file diff --git a/demo/map.html b/demo/map.html index bd4fb74fdc..f15365cab5 100644 --- a/demo/map.html +++ b/demo/map.html @@ -18,6 +18,6 @@ layers: [ol.layer.osm()], center: [45, 5], zoom: 10 - }); + }).getEvents().register("click", function() {console.log("mapclick")}) \ No newline at end of file diff --git a/lib/OpenLayers/Control/Zoom.js b/lib/OpenLayers/Control/Zoom.js deleted file mode 100644 index 37ac48ce66..0000000000 --- a/lib/OpenLayers/Control/Zoom.js +++ /dev/null @@ -1,138 +0,0 @@ -/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for - * full list of contributors). Published under the 2-clause BSD license. - * See license.txt in the OpenLayers distribution or repository for the - * full text of the license. */ - -/** - * @requires OpenLayers/Control.js - * @requires OpenLayers/Events/buttonclick.js - */ - -/** - * Class: OpenLayers.Control.Zoom - * The Zoom control is a pair of +/- links for zooming in and out. - * - * Inherits from: - * - - */ -OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, { - - /** - * APIProperty: zoomInText - * {String} - * Text for zoom-in link. Default is "+". - */ - zoomInText: "+", - - /** - * APIProperty: zoomInId - * {String} - * Instead of having the control create a zoom in link, you can provide - * the identifier for an anchor element already added to the document. - * By default, an element with id "olZoomInLink" will be searched for - * and used if it exists. - */ - zoomInId: "olZoomInLink", - - /** - * APIProperty: zoomOutText - * {String} - * Text for zoom-out link. Default is "-". - */ - zoomOutText: "-", - - /** - * APIProperty: zoomOutId - * {String} - * Instead of having the control create a zoom out link, you can provide - * the identifier for an anchor element already added to the document. - * By default, an element with id "olZoomOutLink" will be searched for - * and used if it exists. - */ - zoomOutId: "olZoomOutLink", - - /** - * Method: draw - * - * Returns: - * {DOMElement} A reference to the DOMElement containing the zoom links. - */ - draw: function() { - var div = OpenLayers.Control.prototype.draw.apply(this), - links = this.getOrCreateLinks(div), - zoomIn = links.zoomIn, - zoomOut = links.zoomOut, - eventsInstance = this.map.events; - - if (zoomOut.parentNode !== div) { - eventsInstance = this.events; - eventsInstance.attachToElement(zoomOut.parentNode); - } - eventsInstance.register("buttonclick", this, this.onZoomClick); - - this.zoomInLink = zoomIn; - this.zoomOutLink = zoomOut; - return div; - }, - - /** - * Method: getOrCreateLinks - * - * Parameters: - * el - {DOMElement} - * - * Return: - * {Object} Object with zoomIn and zoomOut properties referencing links. - */ - getOrCreateLinks: function(el) { - var zoomIn = document.getElementById(this.zoomInId), - zoomOut = document.getElementById(this.zoomOutId); - if (!zoomIn) { - zoomIn = document.createElement("a"); - zoomIn.href = "#zoomIn"; - zoomIn.appendChild(document.createTextNode(this.zoomInText)); - zoomIn.className = "olControlZoomIn"; - el.appendChild(zoomIn); - } - OpenLayers.Element.addClass(zoomIn, "olButton"); - if (!zoomOut) { - zoomOut = document.createElement("a"); - zoomOut.href = "#zoomOut"; - zoomOut.appendChild(document.createTextNode(this.zoomOutText)); - zoomOut.className = "olControlZoomOut"; - el.appendChild(zoomOut); - } - OpenLayers.Element.addClass(zoomOut, "olButton"); - return { - zoomIn: zoomIn, zoomOut: zoomOut - }; - }, - - /** - * Method: onZoomClick - * Called when zoomin/out link is clicked. - */ - onZoomClick: function(evt) { - var button = evt.buttonElement; - if (button === this.zoomInLink) { - this.map.zoomIn(); - } else if (button === this.zoomOutLink) { - this.map.zoomOut(); - } - }, - - /** - * Method: destroy - * Clean up. - */ - destroy: function() { - if (this.map) { - this.map.events.unregister("buttonclick", this, this.onZoomClick); - } - delete this.zoomInLink; - delete this.zoomOutLink; - OpenLayers.Control.prototype.destroy.apply(this); - }, - - CLASS_NAME: "OpenLayers.Control.Zoom" -}); diff --git a/src/ol.js b/src/ol.js index 163edd4dcb..0e07878d04 100644 --- a/src/ol.js +++ b/src/ol.js @@ -2,8 +2,8 @@ goog.provide("ol"); goog.require('ol.base'); goog.require('ol.bounds'); -goog.require('ol.control.Control'); goog.require('ol.control.Navigation'); +goog.require('ol.control.Zoom'); goog.require('ol.event.Drag'); goog.require('ol.event.Events'); goog.require("ol.map"); diff --git a/src/ol/Map.js b/src/ol/Map.js index fae064f055..b598a44a01 100644 --- a/src/ol/Map.js +++ b/src/ol/Map.js @@ -108,8 +108,6 @@ ol.Map = function() { */ this.container_ = null; - this.setControls(ol.Map.DEFAULT_CONTROLS); - }; /** @@ -136,7 +134,7 @@ ol.Map.DEFAULT_TILE_SIZE = 256; @const @type {Array.} */ -ol.Map.DEFAULT_CONTROLS = ["navigation"]; +ol.Map.DEFAULT_CONTROLS = ["navigation", "zoom"]; /** * @return {ol.Loc} Location. @@ -355,9 +353,19 @@ ol.Map.prototype.setMaxRes = function(res) { * @param {Element} container the container to render the map to */ ol.Map.prototype.setContainer = function(container) { - this.events_.setElement(container); this.container_ = container; this.setViewport(); + this.createRenderer(); + //TODO Controls could be set earlier, but we need to deal with content that + // controls place on overlays. + this.setControls(ol.Map.DEFAULT_CONTROLS); +}; + +/** + * @return {Element} + */ +ol.Map.prototype.getViewport = function() { + return this.viewport_; }; ol.Map.prototype.setViewport = function() { @@ -367,9 +375,21 @@ ol.Map.prototype.setViewport = function() { this.staticOverlay_ = goog.dom.createDom('div', 'ol-overlay-static'); goog.dom.append(this.viewport_, this.mapOverlay_, this.staticOverlay_); } + this.events_.setElement(this.viewport_); goog.dom.appendChild(this.container_, this.viewport_); }; +ol.Map.prototype.createRenderer = function() { + /*var registeredRenderers = ol.renderer.RENDERER_MAP, + candidate; + for (var r in registeredRenderers) { + if (registeredRenderers[r].isSupported()) { + break; + } + } + this.renderer_ = new registeredRenderers[r](this.viewport_);*/ +}; + /** * @return {ol.event.Events} the events instance for this map */ @@ -385,6 +405,14 @@ ol.Map.prototype.moveByPx = function(dx, dy) { // call moveByPx on renderers }; +ol.Map.prototype.zoomIn = function() { + this.setZoom(this.zoom_++); +}; + +ol.Map.prototype.zoomOut = function() { + this.setZoom(this.zoom_--); +}; + /** * @param {ol.geom.Point} loc the location being requested * @returns {Object} the diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js new file mode 100644 index 0000000000..86192ef12d --- /dev/null +++ b/src/ol/control/Zoom.js @@ -0,0 +1,103 @@ +goog.provide('ol.control.Zoom'); + +goog.require('ol.control.Control'); +goog.require('goog.dom'); + + +/** + * @constructor + * @extends {ol.control.Control} + * @param {boolean|undefined} opt_autoActivate + */ +ol.control.Zoom = function(opt_autoActivate) { + + goog.base(this, opt_autoActivate); + + /** + * Activate this control when it is added to a map. Default is true. + * + * @type {boolean} autoActivate + */ + this.autoActivate_ = + goog.isDef(opt_autoActivate) ? opt_autoActivate : true; + +}; +goog.inherits(ol.control.Zoom, ol.control.Control); + +/** + * @param {ol.Map} map + */ +ol.control.Zoom.prototype.setMap = function(map) { + goog.base(this, 'setMap', map); + var container = goog.dom.createDom('div', ol.control.Zoom.RES.CLS); + var inButton = goog.dom.createDom( + 'div', ol.control.Zoom.RES.IN_CLS, + goog.dom.createDom('a', {'href': '#zoomIn'}) + ); + goog.dom.setTextContent( + /** @type {Element} */ (inButton.firstChild), + ol.control.Zoom.RES.IN_TEXT + ); + var outButton = goog.dom.createDom( + 'div', ol.control.Zoom.RES.OUT_CLS, + goog.dom.createDom('a', {'href': '#zoomOut'}) + ); + goog.dom.setTextContent( + /** @type {Element} */ (outButton.firstChild), + ol.control.Zoom.RES.OUT_TEXT + ); + goog.dom.append(container, inButton, outButton); + + var viewport = /** @type {Node} */ map.getViewport(); + if (goog.isDefAndNotNull(viewport)) { + goog.dom.append(viewport, container); + } +}; + +/** @inheritDoc */ +ol.control.Zoom.prototype.activate = function() { + var active = goog.base(this, 'activate'); + if (active) { + this.getMap().getEvents().register("click", this.handle, this); + } + return active; +}; + +/** @inheritDoc */ +ol.control.Zoom.prototype.deactivate = function() { + var inactive = goog.base(this, 'deactivate'); + if (inactive) { + this.getMap().getEvents().unregister("click", this.handle, this); + } + return inactive; +}; + +/** + * @param {Event} evt + */ +ol.control.Zoom.prototype.handle = function(evt) { + var target = /** @type {Node} */ evt.target, + handled = false; + if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.IN_CLS)) { + this.getMap().zoomIn(); + handled = true; + } else + if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.OUT_CLS)) { + this.getMap().zoomOut(); + handled = true; + } + if (handled) { + evt.preventDefault(); + } + return !handled; +}; + +ol.control.addControl('zoom', ol.control.Zoom); + +ol.control.Zoom.RES = { + CLS: 'ol-control-zoom', + IN_CLS: 'ol-control-zoom-in', + OUT_CLS: 'ol-control-zoom-out', + IN_TEXT: '+', + OUT_TEXT: '\u2013' +}; \ No newline at end of file