Merge branch 'master' of github.com:openlayers/openlayers into utfgrid

2012-03-06 00:06:15 -07:00
parent 28687257d6 83fe251ef6
commit cf30e71b9f
101 changed files with 2619 additions and 690 deletions
--- a/examples/accessible-click-control.html
+++ b/examples/accessible-click-control.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <title>Accessible Custom Click Control</title>
+        
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style type="text/css">
+        <style type="text/css">
+            a {
+                text-decoration: none;
+                font-size: 1.2em;
+            }
+            a em {
+                font-style: normal;
+                font-weight: normal;
+                text-decoration: underline;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
+            a.api {
+                font-size:1em;
+                text-decoration:underline;
+            }
+            a.accesskey {
+                color: white;
+            }
+            a.accesskey:focus {
+                color: #436976;
+            }
+            a.zoom {
+                padding-right: 20px;
+            }
+        </style>
+        <script src="../lib/Firebug/firebug.js"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="accessible-click-control.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">An accessible click control implementation</h1>
+    
+        <div id="tags">
+            click, control, accessibility
+        </div>
+
+        <a class="accesskey"
+           href=""
+           accesskey="1"
+           onclick="document.getElementById('map').focus();return false;">
+           Jump to map
+        </a>
+
+        <div id="map" class="smallmap" tabindex="0"></div>
+
+        <p id="desc">
+            Demonstrate the KeyboardDefaults control as well as a control that
+            allows clicking on the map using the keyboard.
+            First focus the map (using tab key or mouse), then press the 'i'
+            key to activate the query control. You can then move the point
+            using arrow keys. Press 'RETURN' to get the coordinate. Press 'i'
+            again to deactivate the control.
+        </p>
+
+    </body>
+</html>
--- a/examples/accessible-click-control.js
+++ b/examples/accessible-click-control.js
@@ -0,0 +1,199 @@
+var map, navigationControl, queryControl; 
+
+function init(){
+    map = new OpenLayers.Map('map', {controls: []});
+    var layer = new OpenLayers.Layer.WMS(
+        "OpenLayers WMS",
+        "http://vmap0.tiles.osgeo.org/wms/vmap0",
+        {layers: 'basic'}
+    );
+    map.addLayers([layer]);
+
+    navigationControl = new OpenLayers.Control.KeyboardDefaults({
+        observeElement: 'map'
+    });
+    map.addControl(navigationControl);
+    
+    queryControl = new OpenLayers.Control.KeyboardClick({
+        observeElement: 'map'
+    });
+    map.addControl(queryControl);
+
+    map.zoomToMaxExtent();
+}
+
+/**
+ * Class: OpenLayers.Control.KeyboardClick
+ *
+ * A custom control that (a) adds a vector point that can be moved using the
+ * arrow keys of the keyboard, and (b) displays a browser alert window when the
+ * RETURN key is pressed. The control can be activated/deactivated using the
+ * "i" key. When activated the control deactivates any KeyboardDefaults control
+ * in the map so that the map is not moved when the arrow keys are pressed.
+ *
+ * This control relies on the OpenLayers.Handler.KeyboardPoint custom handler.
+ */
+OpenLayers.Control.KeyboardClick = OpenLayers.Class(OpenLayers.Control, {
+    initialize: function(options) {
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);
+        var observeElement = this.observeElement || document;
+        this.handler = new OpenLayers.Handler.KeyboardPoint(this, {
+            done: this.onClick,
+            cancel: this.deactivate
+        }, {
+            observeElement: observeElement
+        });
+        OpenLayers.Event.observe(
+            observeElement,
+            "keydown",
+            OpenLayers.Function.bindAsEventListener(
+                function(evt) {
+                    if (evt.keyCode == 73) { // "i"
+                        if (this.active) {
+                            this.deactivate();
+                        } else {
+                            this.activate();
+                        }
+                    }
+                },
+                this
+            )
+        );
+    },
+
+    onClick: function(geometry) {
+        alert("You clicked near " + geometry.x + " N, " +
+                                    geometry.y + " E");
+    },
+
+    activate: function() {
+        if(!OpenLayers.Control.prototype.activate.apply(this, arguments)) {
+            return false;
+        }
+        // deactivate any KeyboardDefaults control
+        var keyboardDefaults = this.map.getControlsByClass(
+                'OpenLayers.Control.KeyboardDefaults')[0];
+        if (keyboardDefaults) {
+            keyboardDefaults.deactivate();
+        }
+        return true;
+    },
+
+    deactivate: function() {
+        if(!OpenLayers.Control.prototype.deactivate.apply(this, arguments)) {
+            return false;
+        }
+        // reactivate any KeyboardDefaults control
+        var keyboardDefaults = this.map.getControlsByClass(
+                'OpenLayers.Control.KeyboardDefaults')[0];
+        if (keyboardDefaults) {
+            keyboardDefaults.activate();
+        }
+        return true;
+    }
+});
+
+/**
+ * Class: OpenLayers.Handler.KeyboardPoint
+ *
+ * A custom handler that displays a vector point that can be moved
+ * using the arrow keys of the keyboard.
+ */
+OpenLayers.Handler.KeyboardPoint = OpenLayers.Class(OpenLayers.Handler, {
+    
+    KEY_EVENTS: ["keydown"],
+
+
+    initialize: function(control, callbacks, options) {
+        OpenLayers.Handler.prototype.initialize.apply(this, arguments);
+        // cache the bound event listener method so it can be unobserved later
+        this.eventListener = OpenLayers.Function.bindAsEventListener(
+            this.handleKeyEvent, this
+        );
+    },
+
+    activate: function() {
+        if(!OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
+            return false;
+        }
+        this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME);
+        this.map.addLayer(this.layer);
+        this.observeElement = this.observeElement || document;
+        for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
+            OpenLayers.Event.observe(
+                this.observeElement, this.KEY_EVENTS[i], this.eventListener);
+        }
+        if(!this.point) {
+            this.createFeature();
+        }
+        return true;
+    },
+
+    deactivate: function() {
+        if (!OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
+            return false;
+        }
+        for (var i=0, len=this.KEY_EVENTS.length; i<len; i++) {
+            OpenLayers.Event.stopObserving(
+                this.observeElement, this.KEY_EVENTS[i], this.eventListener);
+        }
+        this.map.removeLayer(this.layer);
+        this.destroyFeature();
+        return true;
+    },
+
+    handleKeyEvent: function (evt) {
+        switch(evt.keyCode) {
+            case OpenLayers.Event.KEY_LEFT:
+                this.modifyFeature(-3, 0);
+                break;
+            case OpenLayers.Event.KEY_RIGHT: 
+                this.modifyFeature(3, 0);
+                break;
+            case OpenLayers.Event.KEY_UP:
+                this.modifyFeature(0, 3);
+                break;
+            case OpenLayers.Event.KEY_DOWN:
+                this.modifyFeature(0, -3);
+                break;
+            case OpenLayers.Event.KEY_RETURN:
+                this.callback('done', [this.point.geometry.clone()]);
+                break;
+            case OpenLayers.Event.KEY_ESC:
+                this.callback('cancel');
+                break;
+        }
+    },
+
+    modifyFeature: function(lon, lat) {
+        if(!this.point) {
+            this.createFeature();
+        }
+        var resolution = this.map.getResolution();
+        this.point.geometry.x = this.point.geometry.x + lon * resolution;
+        this.point.geometry.y = this.point.geometry.y + lat * resolution;
+        this.callback("modify", [this.point.geometry, this.point, false]);
+        this.point.geometry.clearBounds();
+        this.drawFeature();
+    },
+
+    createFeature: function() {
+        var center = this.map.getCenter();
+        var geometry = new OpenLayers.Geometry.Point(
+            center.lon, center.lat
+        );
+        this.point = new OpenLayers.Feature.Vector(geometry);
+        this.callback("create", [this.point.geometry, this.point]);
+        this.point.geometry.clearBounds();
+        this.layer.addFeatures([this.point], {silent: true});
+    },
+
+    destroyFeature: function() {
+        this.layer.destroyFeatures([this.point]);
+        this.point = null;
+    },
+
+    drawFeature: function() {
+        this.layer.drawFeature(this.point, this.style);
+    }
+});
--- a/examples/accessible-panel.html
+++ b/examples/accessible-panel.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>Custom and accessible panel</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style type="text/css">
+
+        .olControlPanel button {
+          position: relative;
+          display: block;
+          margin: 2px;
+          border: 1px solid;
+          padding: 0 5px;
+          border-radius: 4px;
+          height: 35px;
+          background-color: white;
+          float: left;
+          overflow: visible; /* needed to remove padding from buttons in IE */
+        }
+        .olControlPanel button span {
+          padding-left: 25px;
+        }
+        .olControlPanel button span:first-child {
+          padding-left: 0;
+          display: block;
+          position: absolute;
+          left: 2px;
+        }
+        .olControlPanel .olControlDrawFeatureItemActive span:first-child { 
+          background-image: url("../theme/default/img/draw_line_on.png");
+          height: 22px;
+          width: 24px;
+          top: 5px;
+        }
+        .olControlPanel .olControlDrawFeatureItemInactive span:first-child { 
+          background-image: url("../theme/default/img/draw_line_off.png");
+          height: 22px;
+          width: 24px;
+          top: 5px;
+        }
+        .olControlPanel .olControlZoomBoxItemInactive span:first-child { 
+          background-image: url("../img/drag-rectangle-off.png");
+          height: 29px;
+          width: 29px;
+          top: 2px;
+        }
+        .olControlPanel .olControlZoomBoxItemActive span:first-child { 
+          background-image: url("../img/drag-rectangle-on.png");
+          height: 29px;
+          width: 29px;
+          top: 2px;
+        }
+        .olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child { 
+          background-image: url("../img/zoom-world-mini.png");
+          height: 18px;
+          width: 18px;
+          top: 8px;
+        }
+        .olControlPanel .navHistory span:first-child {
+           background-image: url("../theme/default/img/navigation_history.png");
+           height: 24px;
+           width: 24px;
+           top: 4px;
+        }
+        .olControlPanel .navHistoryPreviousItemActive span:first-child { 
+          background-position: 0 0;
+        }
+        .olControlPanel .navHistoryPreviousItemInactive span:first-child { 
+           background-position: 0 -24px;
+        }
+        .olControlPanel .navHistoryNextItemActive span:first-child { 
+           background-position: -24px 0;
+        }
+        .olControlPanel .navHistoryNextItemInactive span:first-child { 
+           background-position: -24px -24px;
+        }
+        
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="accessible-panel.js"></script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Custom and accessible panel</h1>
+    <div id="tags">
+        panels, CSS, style, accessibility, button
+    </div>
+    <p id="shortdesc">
+      Create a custom and accessible panel, styled entirely with
+      CSS.
+    </p>  
+    <div id="panel"></div>
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+
+      <p>An accessible panel:
+
+      <ul>
+      <li>The buttons are actual HTML buttons. You can therefore
+      use the TAB key to give the focus to the panel's buttons, and the "ENTER"
+      key to activate or trigger the corresponding control.</li>
+      <li>The buttons include text and titles (displayed when a button
+      is hovered).</li>
+      <li>If you remove colors from the page (for example using FireFox's <a
+          href="https://addons.mozilla.org/en-US/firefox/addon/no-color/">No
+          Color extension</a>) the buttons are still visible, and
+          accessible using the keyboard.</li>
+      </ul>
+      </p>
+
+      <p>By default a panel creates buttons as divs. In this example the
+      <code>createControlMarkup</code> panel function is overridden to create
+      a more accessible markup for the buttons.  See the <a
+          href="accessible-panel.js" target="_blank"> accessible-panel.js
+          source</a> to see how this is done.</p>
+
+      <p>Note: in IE 8, when a button is pressed its content shifts by 1 pixel.
+      This is a <a
+          href="http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/">known
+          IE8 bug</a>, with known workarounds. No workaround is applied in this
+      example though.</p>
+
+    </div>
+
+  </body>
+</html>
--- a/examples/accessible-panel.js
+++ b/examples/accessible-panel.js
@@ -0,0 +1,64 @@
+var lon = 5;
+var lat = 40;
+var zoom = 5;
+var map, layer;
+
+function init() {
+    map = new OpenLayers.Map( 'map', { controls: [] } );
+    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
+    map.addLayer(layer);
+
+    vlayer = new OpenLayers.Layer.Vector( "Editable" );
+    map.addLayer(vlayer);
+    
+    zb = new OpenLayers.Control.ZoomBox({
+        title: "Zoom box: zoom clicking and dragging",
+        text: "Zoom"
+    });
+
+    var panel = new OpenLayers.Control.Panel({
+        defaultControl: zb,
+        createControlMarkup: function(control) {
+            var button = document.createElement('button'),
+                iconSpan = document.createElement('span'),
+                textSpan = document.createElement('span');
+            iconSpan.innerHTML = '&nbsp;';
+            button.appendChild(iconSpan);
+            if (control.text) {
+                textSpan.innerHTML = control.text;
+            }
+            button.appendChild(textSpan);
+            return button;
+        }
+    });
+
+    panel.addControls([
+        zb,
+        new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
+            {title:'Draw a feature', text: 'Draw'}),
+        new OpenLayers.Control.ZoomToMaxExtent({
+            title:"Zoom to the max extent",
+            text: "World"
+        }) 
+    ]);
+    
+    nav = new OpenLayers.Control.NavigationHistory({
+        previousOptions: {
+            title: "Go to previous map position",
+            text: "Prev"
+        },
+        nextOptions: {
+            title: "Go to next map position",
+            text: "Next"
+        },
+        displayClass: "navHistory"
+    });
+    // parent control must be added to the map
+    map.addControl(nav);
+    panel.addControls([nav.next, nav.previous]);
+    
+    map.addControl(panel);
+
+    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+}
--- a/examples/accessible.html
+++ b/examples/accessible.html
@@ -31,13 +31,26 @@
                font-size:1em;
                text-decoration:underline;
            }
+            a.accesskey {
+                color: white;
+            }
+            a.accesskey:focus {
+                color: #436976;
+            }
+            a.zoom {
+                padding-right: 20px;
+            }
        </style>
        <script src="../lib/OpenLayers.js"></script>
        <script type="text/javascript">
            var map = null;
            function init(){
                var options = {
-                    controls: [new OpenLayers.Control.KeyboardDefaults()]
+                    controls: [
+                        new OpenLayers.Control.KeyboardDefaults({
+                            observeElement: 'map'
+                        })
+                    ]
                };
                map = new OpenLayers.Map('map', options);
                var wms = new OpenLayers.Layer.WMS(
@@ -57,31 +70,37 @@
            keyboard, pan, panning, zoom, zooming, accesskey
        </div>        

+        <a class="accesskey"
+           href=""
+           accesskey="1"
+           onclick="document.getElementById('map').focus(); return false;">
+           Go to map
+        </a>
+
        <p id="shortdesc">
-            Demonstrate how to use the KeyboardDefaults option parameter for layer types.
+            Demonstrate the KeyboardDefaults control and how to use links
+            with Access Keys to navigate the map with the keyboard.
        </p>

+        <a class="zoom"
+           href="javascript: void map.zoomIn();"
+           accesskey="i">
+            zoom <em>i</em>n</a>
+        <a class="zoom"
+           href="javascript: void map.zoomOut();"
+           accesskey="o">
+            zoom <em>o</em>ut</a>
+
        <table>
            <tbody>
                <tr>
-                    <td>
-                        <a href="javascript: void map.zoomOut();"
-                           accesskey="o">
-                            zoom <em>o</em>ut
-                        </a>
-                    </td>
+                    <td>&nbsp;</td>
                    <td>
                        <a href="javascript: void map.pan(0, -map.getSize().h / 4);"
                           accesskey="n">
                            pan <em>n</em>orth
                        </a>
                    </td>
-                    <td>
-                        <a href="javascript: void map.zoomIn();"
-                           accesskey="i">
-                            zoom <em>i</em>n
-                        </a>
-                    </td>
                </tr>
                <tr>
                    <td>
@@ -90,7 +109,7 @@
                            pan <em>w</em>est
                        </a>
                    </td>
-                    <td id="map" class="smallmap"></td>
+                    <td id="map" class="smallmap" tabindex="0"></td>
                    <td>
                        <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
                           accesskey="e">
@@ -113,9 +132,9 @@

        <div id="docs">
            <p>Navigate the map in one of three ways:</p>
-                <ul>
-                    <li>Click on the named links to zoom and pan</li>
-                    <li>Use following keys to pan and zoom:
+                <ol>
+                    <li>Use Access Key "1" (alt + 1) to focus the map element, and
+                        use following keys to pan and zoom:
                        <ul>
                            <li>+ (zoom in)</li>
                            <li>- (zoom out)</li>
@@ -124,8 +143,12 @@
                            <li>left-arrow (pan east)</li>
                            <li>right-arrow (pan west)</li>
                        </ul>
+                        See <a href=http://en.wikipedia.org/wiki/Access_key>wikipedia</a> for
+                        more detail about Access Keys.
                    </li>
-                    <li>If access keys work for links in your browser, use:
+                    <li>Navigate to pan and zoom links using the "tab" key, and
+                        press "enter" to pan and zoom</li>
+                    <li>If Access Keys work for links in your browser, use:
                        <ul>
                            <li>i (zoom in)</li>
                            <li>o (zoom out)</li>
@@ -135,7 +158,7 @@
                            <li>w (pan west)</li>
                        </ul>
                    </li>
-                </ul>
+                </ol>
            <p>

            This is an example of using alternate methods to control panning and zooming.  This approach uses map.pan() and map.zoom().  You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.
--- a/examples/all-overlays-google.html
+++ b/examples/all-overlays-google.html
@@ -8,7 +8,7 @@
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
-        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
        <script src="../lib/OpenLayers.js"></script>
        <script src="all-overlays-google.js"></script>
    </head>
--- a/examples/cross-origin-xml.html
+++ b/examples/cross-origin-xml.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Script Protocol XML Example</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <script src="../lib/OpenLayers.js"></script>
+    </head>
+    <body>
+        <h1 id="title">Script Protocol With XML</h1>
+        <div id="tags">
+            protocol, script, cross origin, xml, advanced
+        </div>
+        <p id="shortdesc">
+            Demonstrates how, with a custom parseFeatures method, the script protocol can be used with YQL for cross-origin loading of files in any of the XML formats supported by OpenLayers.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                YQL can wrap a jsonp callback around an XML file, which effectively means Yahoo's servers are acting as a proxy for cross-origin feature loading. This example uses a GPX file, but the same technique can be used for other formats such as KML.
+            </p>
+            <p>
+                View the <a href="cross-origin-xml.js" target="_blank">cross-origin-xml.js</a>
+                source to see how this is done
+            </p>
+        </div>
+        <script src="cross-origin-xml.js"></script>
+    </body>
+</html>
--- a/examples/cross-origin-xml.js
+++ b/examples/cross-origin-xml.js
@@ -0,0 +1,25 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.OSM(),
+        new OpenLayers.Layer.Vector("Vectors", {
+            projection: new OpenLayers.Projection("EPSG:4326"),
+            strategies: [new OpenLayers.Strategy.Fixed()],
+            protocol: new OpenLayers.Protocol.Script({
+                url: "http://query.yahooapis.com/v1/public/yql",
+                params: {
+                    q: "select * from xml where url='http://www.topografix.com/fells_loop.gpx'"
+                },
+                format: new OpenLayers.Format.GPX(),
+                parseFeatures: function(data) {
+                    return this.format.read(data.results[0]);
+                }
+            }),
+            eventListeners: {
+                "featuresadded": function () {
+                    this.map.zoomToExtent(this.getDataExtent());
+                }
+            }
+        })
+    ]
+});
--- a/examples/google-v3.html
+++ b/examples/google-v3.html
@@ -8,7 +8,7 @@
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
-        <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
+        <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
        <script src="../lib/OpenLayers.js"></script>
        <script src="google-v3.js"></script>
    </head>
--- a/examples/gutter.html
+++ b/examples/gutter.html
@@ -45,7 +45,7 @@
          "http://demo.opengeo.org/geoserver/wms",
          {layers: 'topp:states'},
          {gutter: 15});
-      var states = new OpenLayers.Layer.WMS( "Roads (no gutter)",
+      var states = new OpenLayers.Layer.WMS( "States (no gutter)",
          "http://demo.opengeo.org/geoserver/wms",
          {layers: 'topp:states'});
      map.addLayers([states, states15]);
--- a/examples/mapbox.html
+++ b/examples/mapbox.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <title>OpenLayers MapBox Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            .olControlAttribution {
+                bottom: 5px;
+                font-size: 9px;
+            }
+            div.olControlZoomPanel {
+                top: 10px;
+                left: 10px;
+            }
+            div.olControlZoomPanel .olControlZoomInItemInactive,
+            div.olControlZoomPanel .olControlZoomOutItemInactive {
+                background: rgba(0, 0, 0, 0.2);
+                position: absolute;
+            }
+            div.olControlZoomPanel .olControlZoomInItemInactive {
+                border-radius: 3px 3px 0 0;
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive {
+                border-radius: 0 0 3px 3px ;
+                top: 20px;
+            }
+            div.olControlZoomPanel div:hover {
+                background: rgba(0, 0, 0, 0.5);
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive:after ,
+            div.olControlZoomPanel .olControlZoomInItemInactive:after {
+                font-weight: bold;
+                content: '+';
+                font-size: 18px;
+                padding: 0 2px;
+                z-index: 2000;
+                color: #fff;
+                line-height: 1em;
+            }
+            div.olControlZoomPanel .olControlZoomOutItemInactive:after {
+                content: '–';
+                line-height: 0.9em;
+                padding: 0 5px;
+            }
+            div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Basic MapBox OSM Example</h1>
+        <div id="tags">mapbox xyz osm</div>
+
+        <div id="shortdesc">Shows how to use MapBox tiles in an OpenLayers map.</div>
+
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs">
+            <p>This example demonstrates the use of an XYZ layer that accesses tiles from MapBox.</p>
+            <p>
+                See the <a href="mapbox.js" target="_blank">mapbox.js</a> source 
+                for details.  Make sure to read the <a href="http://mapbox.com/tos/">Terms of Service</a>
+                before using MapBox tiles in your application.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="mapbox.js"></script>
+    </body>
+</html>
--- a/examples/mapbox.js
+++ b/examples/mapbox.js
@@ -0,0 +1,34 @@
+var streets = new OpenLayers.Layer.XYZ(
+    "MapBox Streets",
+    [
+        "http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
+        "http://b.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
+        "http://c.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png",
+        "http://d.tiles.mapbox.com/v3/mapbox.mapbox-streets/${z}/${x}/${y}.png"
+    ], {
+        attribution: "Tiles © <a href='http://mapbox.com/'>MapBox</a> | " + 
+            "Data © <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
+            "and contributors, CC-BY-SA",
+        sphericalMercator: true,
+        transitionEffect: "resize",
+        buffer: 1,
+        numZoomLevels: 16
+    }
+);
+
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [streets],
+    controls: [
+        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.ZoomPanel(),
+        new OpenLayers.Control.Permalink({anchor: true})
+    ],
+    center: [0, 0],
+    zoom: 1
+});
--- a/examples/osm-google.html
+++ b/examples/osm-google.html
@@ -8,7 +8,7 @@
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
-        <script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
+        <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
        <script src="../lib/OpenLayers.js"></script>
        <script src="osm-google.js"></script>
    </head>
--- a/examples/spherical-mercator.html
+++ b/examples/spherical-mercator.html
@@ -22,7 +22,7 @@
        }
    </style>

-    <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
+    <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>

    <script src="../lib/OpenLayers.js"></script>
  </head>
--- a/examples/zoom.html
+++ b/examples/zoom.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <title>OpenLayers Zoom Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            .olControlAttribution {
+                bottom: 5px;
+                font-size: 9px;
+            }
+            #customZoom {
+                z-index: 1001;
+                position: relative;
+                top: 10px;
+                left: 10px;
+            }
+            #customZoom a {
+                text-decoration: none;
+                position: absolute;
+                display: block;
+                width: 50px;
+                text-align: center;
+                font-weight: bold;
+                color: #fff;
+                background: #369;
+                border: 1px solid #ccc;
+                border-radius: 3px;
+            }
+            #customZoom a:hover {
+                background: #036;
+            }
+            #customZoomOut {
+                top: 25px;
+            }
+            
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Zoom Control Example</h1>
+        <div id="tags">zoom control</div>
+
+        <div id="shortdesc">Shows how to use a simple zoom control.</div>
+
+        <div id="map" class="smallmap"></div>
+        <p>The map above uses the default control configuration and style.</p>
+        <p>The map below uses the custom zoom elements and styling.</p>
+        <div id="map2" class="smallmap">
+            <div id="customZoom">
+                <a href="#customZoomIn" id="customZoomIn">in</a>
+                <a href="#customZoomIn" id="customZoomOut">out</a>
+            </div>
+        </div>
+
+        <div id="docs">
+            <p>This example demonstrates the use of a Zoom control.</p>
+            <p>
+                See the <a href="zoom.js" target="_blank">zoom.js</a> source 
+                for details.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="zoom.js"></script>
+    </body>
+</html>
--- a/examples/zoom.js
+++ b/examples/zoom.js
@@ -0,0 +1,34 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [new OpenLayers.Layer.OSM()],
+    controls: [
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.Zoom()
+    ],
+    center: [0, 0],
+    zoom: 1
+});
+
+var map2 = new OpenLayers.Map({
+    div: "map2",
+    layers: [new OpenLayers.Layer.OSM()],
+    controls: [
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.Zoom({
+            zoomInId: "customZoomIn",
+            zoomOutId: "customZoomOut"
+        })
+    ],
+    center: [0, 0],
+    zoom: 1
+});