Adding Zoom control.

Tests still missing.

css/ol.css

@@ -1,6 +1,7 @@
 .ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; }
 .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;
+}

demo/map.html

@@ -18,6 +18,6 @@
             layers: [ol.layer.osm()],
             center: [45, 5],
             zoom: 10
-        });
+        }).getEvents().register("click", function() {console.log("mapclick")})
     </script>
 </html>

lib/OpenLayers/Control/Zoom.js

@@ -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>
- */
-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"
-});

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");

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.<string>}
  */
-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 

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'
+};