Merge branch 'master' of https://github.com/openlayers/openlayers into no-$

apidoc_config/Menu.txt

@@ -319,6 +319,7 @@ Group: OpenLayers  {
       File: nn  (no auto-title, OpenLayers/Lang/nn.js)
       File: oc  (no auto-title, OpenLayers/Lang/oc.js)
       File: pt  (no auto-title, OpenLayers/Lang/pt.js)
+      File: pl  (no auto-title, OpenLayers/Lang/pl.js)
       File: pt-BR  (no auto-title, OpenLayers/Lang/pt-BR.js)
       File: ru  (no auto-title, OpenLayers/Lang/ru.js)
       File: sk  (no auto-title, OpenLayers/Lang/sk.js)
@@ -408,9 +409,7 @@ Group: OpenLayers  {
       File: Renderer  (no auto-title, OpenLayers/Renderer.js)
       File: Canvas  (no auto-title, OpenLayers/Renderer/Canvas.js)
       File: ElementsIndexer  (no auto-title, OpenLayers/Renderer/Elements.js)
-      File: NG  (no auto-title, OpenLayers/Renderer/NG.js)
       File: SVG  (no auto-title, OpenLayers/Renderer/SVG.js)
-      File: SVG2  (no auto-title, OpenLayers/Renderer/SVG2.js)
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 

build/license.txt

@@ -2,14 +2,14 @@
 
   OpenLayers.js -- OpenLayers Map Viewer Library
 
-  Copyright 2005-2011 OpenLayers Contributors, released under the FreeBSD
+  Copyright (c) 2006-2012 by OpenLayers Contributors
-  license. Please see http://svn.openlayers.org/trunk/openlayers/license.txt
+  Published under the 2-clause BSD license.
-  for the full text of the license.
+  See http://openlayers.org/dev/license.txt for the full text of the license, and http://openlayers.org/dev/authors.txt for full list of contributors.
 
   Includes compressed code under the following licenses:
 
-  (For uncompressed versions of the code used please see the
+  (For uncompressed versions of the code used, please see the
-  OpenLayers SVN repository: <http://openlayers.org/>)
+  OpenLayers Github repository: <https://github.com/openlayers/openlayers>)
 
 */
 

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

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

doc/customization

@@ -1,49 +0,0 @@
-Customizing OpenLayers
-======================
-
-OpenLayers is designed to fit many needs -- fitting in alongside all kinds of
-various applications which are currently in use. 
-
-Currently, OpenLayers supports a 'theme' option when creating a map. This 
-theme option allows you to specify the location of a CSS theme which should
-be included.
-
-A default theme is available as an example in the theme/ directory: the setup
-is:
-
- * theme/
- * theme/default/
- * theme/default/style.css
- * theme/default/img/
-
-Currently, the OpenLayers code does not support class names, and therefore,
-it is not possible to control many aspects of OpenLayers code with CSS 
-classes. However, with this framework in place, we expect to invest time 
-to make existing features and new features use the CSS theming framework
-where apropriate. 
-
-
-Class Naming
-============
-Elements should have class names which are descriptive of the Javascript
-class from which they come. For example, the main layer switcher element
-in the OpenLayers.Control.LayerSwitcher would be classed:
-
-  olControlLayerSwitcher
-
-This would allow users to add to their style.css class in their theme,
-changing, for example: 
-
-::
-  
-  .olControlLayerSwitcher input {
-    width:10px;
-  }
-
-Sub elements of a particular control can add to the class name:
-
-::
-
-  .olControlLayerSwitcherBaseLabel {
-      color: red;
-  }

doc/readme.txt

@@ -1,7 +0,0 @@
-Automatically generated OpenLayers API documentation is online:
-
-  http://dev.openlayers.org/apidocs
-
-More information on documentation is available from:
-
-  http://trac.openlayers.org/wiki/Documentation

doc_config/Menu.txt

@@ -319,6 +319,7 @@ Group: OpenLayers  {
       File: nl  (no auto-title, OpenLayers/Lang/nl.js)
       File: nn  (no auto-title, OpenLayers/Lang/nn.js)
       File: oc  (no auto-title, OpenLayers/Lang/oc.js)
+      File: pl  (no auto-title, OpenLayers/Lang/pl.js)
       File: pt  (no auto-title, OpenLayers/Lang/pt.js)
       File: pt-BR  (no auto-title, OpenLayers/Lang/pt-BR.js)
       File: ru  (no auto-title, OpenLayers/Lang/ru.js)
@@ -408,9 +409,7 @@ Group: OpenLayers  {
       File: Renderer  (no auto-title, OpenLayers/Renderer.js)
       File: Canvas  (no auto-title, OpenLayers/Renderer/Canvas.js)
       File: ElementsIndexer  (no auto-title, OpenLayers/Renderer/Elements.js)
-      File: NG  (no auto-title, OpenLayers/Renderer/NG.js)
       File: SVG  (no auto-title, OpenLayers/Renderer/SVG.js)
-      File: SVG2  (no auto-title, OpenLayers/Renderer/SVG2.js)
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 

examples/all-overlays-google.html

@@ -15,7 +15,7 @@
     <body onload="init()">
         <h1 id="title">All Overlays with Google and OSM</h1>
         <div id="tags">
-            overlay, baselayer, google, osm, openstreetmap
+            overlay, baselayer, google, osm, openstreetmap, light
         </div>
         <p id="shortdesc">
             Using the Google and OSM layers as overlays.

examples/all-overlays.html

@@ -61,7 +61,7 @@
     <body onload="init()">
         <h1 id="title">OpenLayers Overlays Only Example</h1>
         <div id="tags">
-            overlay, baselayer
+            overlay, baselayer, light
         </div> 
         <p id="shortdesc">
             Demonstrates a map with overlays only.

examples/attribution.html

@@ -40,7 +40,7 @@
         <h1 id="title">Attribution Example</h1>
 
         <div id="tags">
-            copyright, watermark, logo, attribution
+            copyright, watermark, logo, attribution, light
         </div>
 
         <p id="shortdesc">

examples/bing-tiles.html

@@ -20,7 +20,7 @@
     <h1 id="title">Basic Bing Tiles Example</h1>
 
     <div id="tags">
-        bing tiles
+        bing tiles, light
     </div>
 
     <div id="shortdesc">Use Bing with direct tile access</div>

examples/bing-tiles.js

@@ -23,7 +23,9 @@ var hybrid = new OpenLayers.Layer.Bing({
 
 map.addLayers([road, aerial, hybrid]);
 map.addControl(new OpenLayers.Control.LayerSwitcher());
+// Zoom level numbering depends on metadata from Bing, which is not yet loaded.
+var zoom = map.getZoomForResolution(76.43702827453613);
 map.setCenter(new OpenLayers.LonLat(-71.147, 42.472).transform(
     new OpenLayers.Projection("EPSG:4326"),
     map.getProjectionObject()
-), 11);
+), zoom);

examples/bing.html

@@ -48,7 +48,7 @@
     <h1 id="title">Bing Example</h1>
 
     <div id="tags">
-        Bing, Microsoft, Virtual Earth
+        Bing, Microsoft, Virtual Earth, light
     </div>
 
     <p id="shortdesc">

examples/boxes-vector.html

@@ -45,7 +45,7 @@
         <h1 id="title">Boxes Example Vector</h1>
 
         <div id="tags">
-            box, vector, annotation
+            box, vector, annotation, light
         </div>
 
         <p id="shortdesc">

examples/buffer.html

@@ -37,7 +37,7 @@
         <h1 id="title">Buffer Example</h1>
 
         <div id="tags">
-            buffer, performance, tile
+            buffer, performance, tile, light
         </div>
 
         <p id="shortdesc">

examples/cache-read.html

@@ -0,0 +1,36 @@
+<!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 Cache Read Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="cache-read.js"></script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Cache Read Example</h1>
+
+    <div id="tags">
+        mobile, local storage, persistence, cache, html5
+    </div>
+
+    <div id="shortdesc">Caching viewed tiles</div>
+
+    <div id="map" class="smallmap"></div>
+    <div id="status"></div>
+    <br>
+    <div id="docs">
+        <p>This example shows how to use the CacheRead control to fetch cached
+        tiles from the browser's Local Storage. As you pan and zoom the map,
+        you can see how the number of cache hits incrases as you browse regions
+        that are available in the cache.</p>
+        <p>To fill the cache with tiles, switch to the
+        <a href="cache-write.html">cache-write.html</a> example.</p>
+        <p>See <a href="cache-read.js">cache-read.js</a> for the source
+        code.</p>
+    </div>
+  </body>
+</html>

examples/cache-read.js

@@ -0,0 +1,36 @@
+var map, cacheRead;
+function init() {
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: "EPSG:900913",
+        layers: [
+            new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+                layers: "basic"
+            }, {
+                eventListeners: {
+                    tileloaded: updateHits
+                }
+            })
+        ],
+        center: [0, 0],
+        zoom: 1
+    });
+    cacheRead = new OpenLayers.Control.CacheRead();
+    map.addControl(cacheRead);
+
+
+
+    // User interface
+    var status = document.getElementById("status"),
+        hits = 0;
+
+    // update the number of cached tiles and detect local storage support
+    function updateHits(evt) {
+        hits += evt.tile.url.substr(0, 5) === "data:";
+        if (window.localStorage) {
+            status.innerHTML = hits + " cache hits.";
+        } else {
+            status.innerHTML = "Local storage not supported. Try a different browser.";
+        }
+    }
+}

examples/cache-write.html

@@ -0,0 +1,37 @@
+<!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 Cache Write Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="../lib/OpenLayers.js"></script>
+    <script>OpenLayers.Console = window.console || OpenLayers.Console;</script>
+    <script src="cache-write.js"></script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Cache Write Example</h1>
+
+    <div id="tags">
+        mobile, local storage, persistence, cache, html5
+    </div>
+
+    <div id="shortdesc">Caching viewed tiles</div>
+
+    <div id="map" class="smallmap"></div>
+    <div>Cache status: <span id="status"></span></div>
+    <div><button id="clear">Clear cache</button></div>
+    <br>
+    <div id="docs">
+        <p>This example shows how to use the CacheWrite control to cache the
+        tiles. Caching is turned on, and as you pan and zoom the map, every
+        tile that is loaded is also copied to the browsers Local Storage.</p>
+        <p>To use the cached tiles, switch to the
+        <a href="cache-read.html">cache-read.html</a> example.</p>
+        <p>See <a href="cache-write.js">cache-write.js</a> for the source
+        code.</p>
+    </div>
+  </body>
+</html>

examples/cache-write.js

@@ -0,0 +1,48 @@
+// Use proxy to get same origin URLs for tiles that don't support CORS.
+OpenLayers.ProxyHost = "proxy.cgi?url=";
+
+var map, cacheWrite;
+
+function init() {
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: "EPSG:900913",
+        layers: [
+            new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+                layers: "basic"
+            }, {
+                eventListeners: {
+                    tileloaded: updateStatus
+                }
+            })
+        ],
+        center: [0, 0],
+        zoom: 1
+    });
+    cacheWrite = new OpenLayers.Control.CacheWrite({
+        autoActivate: true,
+        imageFormat: "image/jpeg",
+        eventListeners: {
+            cachefull: function() { status.innerHTML = "Cache full."; }
+        }
+    });
+    map.addControl(cacheWrite);
+
+
+
+    // User interface
+    var status = document.getElementById("status");
+    document.getElementById("clear").onclick = function() {
+        OpenLayers.Control.CacheWrite.clearCache();
+        updateStatus();
+    };
+
+    // update the number of cached tiles and detect local storage support
+    function updateStatus() {
+        if (window.localStorage) {
+            status.innerHTML = localStorage.length + " entries in cache.";
+        } else {
+            status.innerHTML = "Local storage not supported. Try a different browser.";
+        }
+    }
+}

examples/click.html

@@ -70,7 +70,7 @@
 
         <div id="tags">
             click control, double, doubleclick, double-click, event, events, 
-            propagation
+            propagation, light
         </div>
 
         <p id="shortdesc">

examples/clientzoom.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css"/>
         <link rel="stylesheet" href="style.css" type="text/css">
         <script src="../lib/Firebug/firebug.js"></script>
-        <script src="../lib/OpenLayers.js"></script>
+		<script src="../lib/OpenLayers.js"></script>
         <script src="clientzoom.js"></script>
         <style>
             .olControlAttribution {

examples/cql-format.js

@@ -37,7 +37,7 @@ var map = new OpenLayers.Map({
 function loadFeatures(data) {
     var features = new OpenLayers.Format.GeoJSON().read(data);
     states.addFeatures(features);
-};
+}
 
 // update filter and redraw when form is submitted
 var cql = document.getElementById("cql");

examples/custom-control.html

@@ -50,7 +50,7 @@
         <h1 id="title">Custom Control Example</h1>
 
         <div id="tags">
-            control, panel, rectangle
+            control, panel, rectangle, light
         </div>
 
         <p id="shortdesc">

examples/example.html

@@ -10,7 +10,7 @@
     </head>
     <body>
         <h1 id="title">OpenLayers Example</h1>
-        <div id="tags">simple, basic</div>
+        <div id="tags">simple, basic, light</div>
         <p id="shortdesc">
             Demonstrate a simple map with an overlay that includes layer switching controls.
         </p>

examples/filter-strategy.js

@@ -20,7 +20,7 @@ function startAnimation() {
             filter.lowerBoundary = currentDate;
             filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000));
             filterStrategy.setFilter(filter);
-            currentDate = new Date(currentDate.getTime() + (step * 1000))
+            currentDate = new Date(currentDate.getTime() + (step * 1000));
         } else {
             stopAnimation(true);
         }

examples/fusiontables.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Example For Reading Features From Google Fusion Tables</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">Reading Features From A Google Fusion Tables Table</h1>
+        <div id="tags">
+            protocol, script, fusion tables
+        </div>
+        <p id="shortdesc">
+            Demonstrates how, with a custom read method, the script protocol and GeoJSON format can be used to read features stored in a table on Google Fusion Tables.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                Google Fusion Tables can be used to store features, and access them using SQL-type commands over HTTP. Tables can be made public, in which case no authorization is needed to read them. Geometries can be stored in Location columns in KML format. The default output is a CSV dump of each table row/column selected. Multi-line CSV files are not easy to parse in Javascript, but by adding a jsonCallback parameter to the HTTP command, the output will be a JSON object with the geometry as GeoJSON. With a custom read method, this example parses the geometry for each row, storing the other columns as feature attributes. You can of course add a 'where' clause to the SQL statement or change the column names to limit the data retrieved. Point geometries can also be stored in Latitude/Longitude columns, and the script could easily be modified to use those instead.
+            </p>
+            <p>
+                View the <a href="fusiontables.js" target="_blank">fusiontables.js</a>
+                source to see how this is done. <a href="https://www.google.com/fusiontables/DataSource?docid=1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8">Table used</a>
+            </p>
+        </div>
+        <script src="fusiontables.js"></script>
+    </body>
+</html>

examples/fusiontables.js

@@ -0,0 +1,46 @@
+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: "https://www.google.com/fusiontables/api/query",
+                params: {sql: "select * from 1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8"},
+                format: new OpenLayers.Format.GeoJSON({
+                    ignoreExtraDims: true,
+                    read: function(json) {
+                        var row, feature, atts = {}, features = [];
+                        var cols = json.table.cols; // column names
+                        for (var i = 0; i < json.table.rows.length; i++) {
+                            row = json.table.rows[i];
+                            feature = new OpenLayers.Feature.Vector();
+                            atts = {};
+                            for (var j = 0; j < row.length; j++) {
+                                // 'location's are json objects, other types are strings
+                                if (typeof row[j] === "object") {
+                                    feature.geometry = this.parseGeometry(row[j]);
+                                } else {
+                                    atts[cols[j]] = row[j];
+                                }
+                            }
+                            feature.attributes = atts;
+                            // if no geometry, not much point in continuing with this row
+                            if (feature.geometry) {
+                                features.push(feature);
+                            }
+                        }
+                        return features;
+                    }
+                }),
+                callbackKey: "jsonCallback"
+            }),
+            eventListeners: {
+                "featuresadded": function () {
+                    this.map.zoomToExtent(this.getDataExtent());
+                }
+            }
+        })
+    ]
+});

examples/geojson.html

@@ -63,7 +63,7 @@
     <h1 id="title">GeoJSON Example</h1>
     
     <div id="tags">
-       JSON, GeoJSON
+       JSON, GeoJSON, light
     </div>
 
       <p id="shortdesc">

examples/google-static.html

@@ -11,7 +11,7 @@
     <body>
         <h1 id="title">Google (Static Maps API) Grid Layer Example</h1>
         <div id="tags">
-            Google, grid, static, GMaps
+            Google, grid, static, GMaps, light
         </div>
         <p id="shortdesc">
             Using the Google Static Maps API with a Grid Layer.

examples/google-static.js

@@ -53,7 +53,7 @@ var map = new OpenLayers.Map({
                     ].join("");
                 }
             }, options)
-        ),
+        )
     ],
     center: new OpenLayers.LonLat(10.2, 48.9).transform("EPSG:4326", "EPSG:3857"),
     zoom: 5

examples/google-v3-alloverlays.html

@@ -15,7 +15,7 @@
     <body onload="init()">
         <h1 id="title">Google (v3) allOverlays Layer Example</h1>
         <div id="tags">
-            Google, overlay
+            Google, overlay, light
         </div>
         <p id="shortdesc">
             Demonstrate use the Google Maps v3 API with allOverlays set to true on the map.

examples/google-v3.html

@@ -15,7 +15,7 @@
     <body onload="init()">
         <h1 id="title">Google (v3) Layer Example</h1>
         <div id="tags">
-            Google, api key, apikey
+            Google, api key, apikey, light
         </div>
         <p id="shortdesc">
             Demonstrate use the Google Maps v3 API.

examples/graphic-name.html

@@ -14,7 +14,7 @@
     <body onload="init();">
         <h1 id="title">Named Graphics Example</h1>
         <div id="tags">
-            vector, named graphic, star, cross, x, square, triangle, circle, style
+            vector, named graphic, star, cross, x, square, triangle, circle, style, light
         </div>
         <p id="shortdesc">
             Shows how to use well-known graphic names.

examples/graticule.html

@@ -23,7 +23,7 @@
             }
         </style>
         <script src="../lib/OpenLayers.js"></script>
-        <script src="http://proj4js.org/lib/proj4js-compressed.js"></script>
+        <script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
         <script type="text/javascript">
             Proj4js.defs["EPSG:42304"]="+title=Atlas of Canada, LCC +proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs";
             
@@ -93,7 +93,7 @@
         <h1 id="title">Graticule Example</h1>
 
         <div id="tags">
-          graticule, grid
+          graticule, grid, projection, proj4js, reproject, transform
         </div>
 
         <p id="shortdesc">

examples/gutter.html

@@ -18,7 +18,7 @@
     <h1 id="title">Gutter Example</h1>
 
     <div id="tags">
-        gutter, quality, tile
+        gutter, quality, tile, light
     </div>
 
     <p id="shortdesc">
@@ -42,12 +42,12 @@
   <script type="text/javascript">
       var map = new OpenLayers.Map('map');
       var states15 = new OpenLayers.Layer.WMS( "States (15px gutter)",
-          "http://demo.opengeo.org/geoserver/wms",
+          "http://suite.opengeo.org/geoserver/wms",
-          {layers: 'topp:states'},
+          {layers: 'usa:states'},
-          {gutter: 15});
+          {gutter: 15, transitionEffect: "resize"});
       var states = new OpenLayers.Layer.WMS( "States (no gutter)",
-          "http://demo.opengeo.org/geoserver/wms",
+          "http://suite.opengeo.org/geoserver/wms",
-          {layers: 'topp:states'});
+          {layers: 'usa:states'});
       map.addLayers([states, states15]);
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);

examples/late-render.html

@@ -29,7 +29,7 @@
     <h1 id="title">Late Rendering</h1>
 
     <div id="tags">
-        creation, render, div
+        creation, render, div, light
     </div>
 
     <p id="shortdesc">

examples/layer-opacity.html

@@ -70,7 +70,7 @@
     <h1 id="title">Layer Opacity Example</h1>
 
     <div id="tags">
-        opacity, transparent, transparency
+        opacity, transparent, transparency, light
     </div>
 
     <p id="shortdesc">

examples/layerLoadMonitoring.html

@@ -112,14 +112,14 @@
       <h1 id="title">Layer Load Monitoring Example</h1>
 
       <div id="tags">
-        monitor, loading
+        monitor, loading, light
       </div>
 
       <p id="shortdesc">
           Demonstrate a method for monitoring tile loading performance.
       </p>
 
-    <div id="map" style="float:left;"></div>
+    <div id="map" class="smallmap" style="float:left;"></div>
 
     <div id="controls">
         <div id="eventsLogID">

examples/layerswitcher.html

@@ -42,7 +42,7 @@
     <h1 id="title">Layer Switcher Example</h1>
 
     <div id="tags">
-        tree, layerswitcher, reposition
+        tree, layerswitcher, reposition, light
     </div>
 
     <p id="shortdesc">

examples/light-basic.html

@@ -0,0 +1,35 @@
+<!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 Light - Basic Popups</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="../OpenLayers.light.debug.js"></script>
+        <script src="light-basic.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">OpenLayers Light - Basic Popups</h1>
+        <div id="tags">
+            light, vector, feature, popup
+        </div>        
+        <p id="shortdesc">
+            A basic use case example using the OpenLayers.light version of the library.<br>
+            Shows popup info bubble when hovering over features on the map
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        
+        <div id="docs">
+            <p>
+                This example uses OpenLayers.light.js to display features and show
+                popup info bubbles when the feature is hovered over.
+            </p>
+                See the <a href="light-basic.js" target="_blank">
+                light-basic.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>

examples/light-basic.js

@@ -0,0 +1,66 @@
+var map;
+
+function init() {
+    map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
+
+    var osm = new OpenLayers.Layer.OSM();
+    var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
+    var center = toMercator({x:-0.05,y:51.5});
+    
+    /**
+     * Create 5 random vector features.  Your features would typically be fetched
+     * from the server. The features are given an attribute named "foo".
+     * The value of this attribute is an integer that ranges from 0 to 100.
+     */   
+    var features = [];    
+    for(var i = 0; i < 5; i++) {
+        features[i] = new OpenLayers.Feature.Vector(
+                toMercator(new OpenLayers.Geometry.Point(
+                    -0.040 - 0.05*Math.random(),
+                    51.49 + 0.02*Math.random())), 
+                {
+                    foo : 100 * Math.random() | 0
+                }, {
+                    fillColor : '#008040',
+                    fillOpacity : 0.8,                    
+                    strokeColor : "#ee9900",
+                    strokeOpacity : 1,
+                    strokeWidth : 1,
+                    pointRadius : 8
+                });
+    }
+        
+    // create the layer with listeners to create and destroy popups
+    var vector = new OpenLayers.Layer.Vector("Points",{
+        eventListeners:{
+            'featureselected':function(evt){
+                var feature = evt.feature;
+                var popup = new OpenLayers.Popup.FramedCloud("popup",
+                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
+                    null,
+                    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: " + feature.attributes.foo+"</div>",
+                    null,
+                    true
+                );
+                feature.popup = popup;
+                map.addPopup(popup);
+            },
+            'featureunselected':function(evt){
+                var feature = evt.feature;
+                map.removePopup(feature.popup);
+                feature.popup.destroy();
+                feature.popup = null;
+            }
+        }
+    });
+    vector.addFeatures(features);
+
+    // create the select feature control
+    var selector = new OpenLayers.Control.SelectFeature(vector,{
+        autoActivate:true
+    }); 
+    
+    map.addLayers([osm, vector]);
+    map.addControl(selector);
+    map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
+}

examples/mapbox.html

@@ -7,49 +7,6 @@
         <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>

examples/mapbox.js

@@ -6,13 +6,14 @@ var streets = new OpenLayers.Layer.XYZ(
         "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> | " + 
+        attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a> | " + 
-            "Data © <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
+            "Data &copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> " +
             "and contributors, CC-BY-SA",
         sphericalMercator: true,
+        wrapDateLine: true,
         transitionEffect: "resize",
         buffer: 1,
-        numZoomLevels: 16
+        numZoomLevels: 17
     }
 );
 
@@ -26,7 +27,7 @@ var map = new OpenLayers.Map({
                 enableKinetic: true
             }
         }),
-        new OpenLayers.Control.ZoomPanel(),
+        new OpenLayers.Control.Zoom(),
         new OpenLayers.Control.Permalink({anchor: true})
     ],
     center: [0, 0],

examples/mobile-drawing.html

@@ -25,36 +25,6 @@
                 bottom: 5px;
                 right: 5px;
             }
-            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;
-            }
             .olControlEditingToolbar .olControlModifyFeatureItemInactive {
                 background-position: -1px -1px;
             }

examples/mobile-drawing.js

@@ -48,7 +48,7 @@ function init() {
                     enableKinetic: true
                 }
             }),
-            new OpenLayers.Control.ZoomPanel(),
+            new OpenLayers.Control.Zoom(),
             toolbar
         ],
         layers: [osm, vector],

examples/mobile-layers.html

@@ -39,42 +39,6 @@
             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;
         }

examples/mobile-layers.js

@@ -32,7 +32,7 @@ function init() {
                     enableKinetic: true
                 }
             }),
-            new OpenLayers.Control.ZoomPanel()
+            new OpenLayers.Control.Zoom()
         ]
     });
 

examples/mobile-navigation.html

@@ -38,7 +38,7 @@
         </p>
 
         <p>
-            The ZoomPanel control provides + and - buttons for zooming in and
+            The Zoom control provides + and - buttons for zooming in and
             out. These buttons should work on any device, and the zoom out
             button is especially needed for devices that don't support
             multi-touch.

examples/mobile-navigation.js

@@ -12,7 +12,7 @@ function init() {
                     enableKinetic: true
                 }
             }),
-            new OpenLayers.Control.ZoomPanel()
+            new OpenLayers.Control.Zoom()
         ],
         layers: [
             new OpenLayers.Layer.OSM("OpenStreetMap", null, {

examples/mobile-sencha.html

@@ -7,8 +7,8 @@
         <title>OpenLayers with Sencha Touch</title>
         <script src="../lib/OpenLayers.js?mobile"></script>
         <link rel="stylesheet" href="style.mobile.css" type="text/css">
-        <link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
+        <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
-        <script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
+        <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
         <script src="mobile-sencha.js"></script>
         <script src="mobile-base.js"></script>
         <style>

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

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, {

examples/multiserver.html

@@ -31,7 +31,7 @@
     <h1 id="title">Multiple Server URLS</h1>
 
   <div id="tags">
-    performance, multiple urls, request
+    performance, multiple urls, request, light
   </div>
   <p id="shortdesc">
       Load your tiles faster by pointing to the same server, but with different urls

examples/navigation-control.html

@@ -26,7 +26,7 @@
     <h1 id="title">Navigation Control</h1>
 
     <div id="tags">
-        drag, move, zoom, navigate
+        drag, move, zoom, navigate, light
     </div>
 
     <div id="shortdesc">Demonstrate Navigation Control features</div>

examples/offline-storage.html

@@ -0,0 +1,44 @@
+<!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 Offline Storage Example</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">
+    .olControlAttribution {
+        bottom: 0;
+    }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script>OpenLayers.Console = window.console || OpenLayers.Console;</script>
+    <script src="offline-storage.js"></script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Offline Storage Example</h1>
+
+    <div id="tags">
+        mobile, local storage, persistence, cache, html5
+    </div>
+
+    <div id="shortdesc">Caching viewed tiles</div>
+
+    <div id="map" class="smallmap"></div>
+    <div>Cache status: <span id="hits"></span> <span id="status"></span></div>
+    <div><input id="read" type="checkbox">Read from cache [<input id="tileloadstart" name="type" type="radio">try cache first] [<input id="tileerror" name="type" type="radio">try online first<sup>1</sup>]</div>
+    <div><input id="write" type="checkbox">Write to cache</div>
+    <div><button id="clear">Clear cached tiles</button><button id="seed">Seed current extent</button>
+    <br>
+    <p><sup>1</sup> <small>Disconnect your device from the network to test - only works for same origin layers.</small></p>
+    <br>
+    <div id="docs">
+        <p>This example shows how to use the CacheWrite control to cache tiles
+        that are being viewed in the browser's local storage, and how to use
+        the CacheRead control to use cached tiles when offline or on a slow
+        connection. See <a href="offline-storage.js">offline-storage.js</a>
+        for the source code.</p>
+    </div>
+  </body>
+</html>

examples/offline-storage.js

@@ -0,0 +1,199 @@
+// Use proxy to get same origin URLs for tiles that don't support CORS.
+OpenLayers.ProxyHost = "proxy.cgi?url=";
+
+var map, cacheWrite, cacheRead1, cacheRead2;
+
+function init() {
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: "EPSG:900913",
+        layers: [
+            new OpenLayers.Layer.OSM("OpenStreetMap (CORS)", null, {
+                eventListeners: {
+                    tileloaded: updateStatus,
+                    loadend: detect
+                }
+            }),
+            new OpenLayers.Layer.WMS("OSGeo (same origin - proxied)", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+                layers: "basic"
+            }, {
+                eventListeners: {
+                    tileloaded: updateStatus
+                }
+            })
+        ],
+        center: [0, 0],
+        zoom: 1
+    });
+    // try cache before loading from remote resource
+    cacheRead1 = new OpenLayers.Control.CacheRead({
+        eventListeners: {
+            activate: function() {
+                cacheRead2.deactivate();
+            }
+        }
+    });
+    // try loading from remote resource and fall back to cache
+    cacheRead2 = new OpenLayers.Control.CacheRead({
+        autoActivate: false,
+        fetchEvent: "tileerror",
+        eventListeners: {
+            activate: function() {
+                cacheRead1.deactivate();
+            }
+        }
+    });
+    cacheWrite = new OpenLayers.Control.CacheWrite({
+        imageFormat: "image/jpeg",
+        eventListeners: {
+            cachefull: function() {
+                if (seeding) {
+                    stopSeeding();
+                }
+                status.innerHTML = "Cache full.";
+            }
+        }
+    });
+    var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
+    map.addControls([cacheRead1, cacheRead2, cacheWrite, layerSwitcher]);
+    layerSwitcher.maximizeControl();
+
+
+    
+    // add UI and behavior
+    var status = document.getElementById("status"),
+        hits = document.getElementById("hits"),
+        cacheHits = 0,
+        seeding = false;
+    var read = document.getElementById("read");
+    read.checked = true;
+    read.onclick = toggleRead;
+    var write = document.getElementById("write");
+    write.checked = false;
+    write.onclick = toggleWrite;
+    document.getElementById("clear").onclick = clearCache;
+    var tileloadstart = document.getElementById("tileloadstart");
+    tileloadstart.checked = "checked";
+    tileloadstart.onclick = setType;
+    document.getElementById("tileerror").onclick = setType;
+    document.getElementById("seed").onclick = startSeeding;
+    
+    // detect what the browser supports
+    function detect(evt) {
+        // detection is only done once, so we remove the listener.
+        evt.object.events.unregister("loadend", null, detect);
+        var tile = map.baseLayer.grid[0][0];
+        try {
+            var canvasContext = tile.getCanvasContext();
+            if (canvasContext) {
+                // will throw an exception if CORS image requests are not supported
+                canvasContext.canvas.toDataURL();
+            } else {
+                status.innerHTML = "Canvas not supported. Try a different browser.";
+            }
+        } catch(e) {
+            // we remove the OSM layer if CORS image requests are not supported.
+            map.setBaseLayer(map.layers[1]);
+            evt.object.destroy();
+            layerSwitcher.destroy();
+        }
+    }
+
+    // update the number of cache hits and detect missing CORS support
+    function updateStatus(evt) {
+        if (window.localStorage) {
+            status.innerHTML = localStorage.length + " entries in cache.";
+        } else {
+            status.innerHTML = "Local storage not supported. Try a different browser.";
+        }
+        if (evt && evt.tile.url.substr(0, 5) === "data:") {
+            cacheHits++;
+        }
+        hits.innerHTML = cacheHits + " cache hits.";
+    }
+    
+    // turn the cacheRead controls on and off
+    function toggleRead() {
+        if (!this.checked) {
+            cacheRead1.deactivate();
+            cacheRead2.deactivate();
+        } else {
+            setType();
+        }
+    }
+    
+    // turn the cacheWrite control on and off
+    function toggleWrite() {
+        cacheWrite[cacheWrite.active ? "deactivate" : "activate"]();
+    }
+    
+    // clear all tiles from the cache
+    function clearCache() {
+        OpenLayers.Control.CacheWrite.clearCache();
+        updateStatus();
+    }
+    
+    // activate the cacheRead control that matches the desired fetch strategy
+    function setType() {
+        if (tileloadstart.checked) {
+            cacheRead1.activate();
+        } else {
+            cacheRead2.activate();
+        }
+    }
+    
+    // start seeding the cache
+    function startSeeding() {
+        var layer = map.baseLayer,
+            zoom = map.getZoom();
+        seeding = {
+            zoom: zoom,
+            extent: map.getExtent(),
+            center: map.getCenter(),
+            cacheWriteActive: cacheWrite.active,
+            buffer: layer.buffer,
+            layer: layer
+        };
+        // make sure the next setCenter triggers a load
+        map.zoomTo(zoom === layer.numZoomLevels-1 ? zoom - 1 : zoom + 1);
+        // turn on cache writing
+        cacheWrite.activate();
+        // turn off cache reading
+        cacheRead1.deactivate();
+        cacheRead2.deactivate();
+        
+        layer.events.register("loadend", null, seed);
+        
+        // start seeding
+        map.setCenter(seeding.center, zoom);
+    }
+    
+    // seed a zoom level based on the extent at the time startSeeding was called
+    function seed() {
+        var layer = seeding.layer;
+        var tileWidth = layer.tileSize.w;
+        var nextZoom = map.getZoom() + 1;
+        var extentWidth = seeding.extent.getWidth() / map.getResolutionForZoom(nextZoom);
+        // adjust the layer's buffer size so we don't have to pan
+        layer.buffer = Math.ceil((extentWidth / tileWidth - map.getSize().w / tileWidth) / 2);
+        map.zoomIn();
+        if (nextZoom === layer.numZoomLevels-1) {
+            stopSeeding();
+        }
+    }
+    
+    // stop seeding (when done or when cache is full)
+    function stopSeeding() {
+        // we're done - restore previous settings
+        seeding.layer.events.unregister("loadend", null, seed);
+        seeding.layer.buffer = seeding.buffer;
+        map.setCenter(seeding.center, seeding.zoom);
+        if (!seeding.cacheWriteActive) {
+            cacheWrite.deactivate();
+        }
+        if (read.checked) {
+            setType();
+        }
+        seeding = false;
+    }
+}

examples/ordering.html

@@ -177,7 +177,7 @@
         <h1 id="title">Z-Index/Y-Order Example</h1>
 
         <div id="tags">
-            stack, stacking, zindex, ordering
+            stack, stacking, zindex, ordering, light
         </div>
 
         <p id="shortdesc">

examples/osm-google.html

@@ -18,7 +18,7 @@
             Demonstrate use of an OSM layer and a Google layer as base layers.
         </p>
         <div id="tags">
-            openstreetmap google
+            openstreetmap google light
         </div>
         <div id="map" class="smallmap"></div>
         <div id="docs">

examples/osm-grayscale.html

@@ -0,0 +1,77 @@
+<!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 Grayscale OSM Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer;
+
+        function init() {
+            if (!OpenLayers.CANVAS_SUPPORTED) {
+                var unsupported = OpenLayers.Util.getElement('unsupported');
+                unsupported.innerHTML = 'Your browser does not support canvas, nothing to see here !';
+            }
+
+            layer = new OpenLayers.Layer.OSM('Simple OSM Map', null, {
+                eventListeners: {
+                    tileloaded: function(evt) {
+                        var ctx = evt.tile.getCanvasContext();
+                        if (ctx) {
+                            var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);
+                            var pix = imgd.data;
+                            for (var i = 0, n = pix.length; i < n; i += 4) {
+                                pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;
+                            }
+                            ctx.putImageData(imgd, 0, 0);
+                            evt.tile.imgDiv.removeAttribute("crossorigin");
+                            evt.tile.imgDiv.src = ctx.canvas.toDataURL();
+                        }
+                    }
+                }
+            });
+
+            // If you get a security error because the tile are not
+            // from the same domain as this page, a simple Apache
+            // proxy can be created to workaround this issue:
+            //
+            // <Proxy *>
+            // Order deny,allow
+            // Allow from localhost
+            // </Proxy>
+            // ProxyPass /osm http://tile.openstreetmap.org/
+            //
+            // Then, in the layer definition above, replace null with '/osm/${z}/${x}/${y}.png'
+
+            map = new OpenLayers.Map('map', {
+                layers: [layer],
+                zoom: 3,
+                center: [-1081125, 6212801]
+            });
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Grayscale OSM Example</h1>
+
+    <div id="tags">
+        openstreetmap canvas grayscale light
+    </div>
+
+    <div id="shortdesc">Show an OSM Map in grayscale</div>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>This example shows an OSM layer where the tiles were
+        converted to grayscale
+        with <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">canvas</a>.</p>
+        <p style="color:red;" id="unsupported"></p>
+    </div>
+
+  </body>
+</html>

examples/osm.html

@@ -27,7 +27,7 @@
     <h1 id="title">Basic OSM Example</h1>
 
     <div id="tags">
-        openstreetmap basic
+        openstreetmap basic light
     </div>
 
     <div id="shortdesc">Show a Simple OSM Map</div>

examples/proxy.cgi

@@ -20,7 +20,7 @@ allowedHosts = ['www.openlayers.org', 'openlayers.org',
                 'prototype.openmnnd.org', 'geo.openplans.org',
                 'sigma.openplans.org', 'demo.opengeo.org',
                 'www.openstreetmap.org', 'sample.azavea.com',
-                'v2.suite.opengeo.org', 'v-swe.uni-muenster.de:8080', 
+                'v2.suite.opengeo.org', 'v-swe.uni-muenster.de:8080',
                 'vmap0.tiles.osgeo.org', 'www.openrouteservice.org',
                 'maps.wien.gv.at']
 

examples/resize-features.html

@@ -85,7 +85,7 @@
   <body onload="init()">
     <h1 id="title">Resize Features Programatically</h1>
     <div id="tags">
-        vector, feature, resizing, resize
+        vector, feature, resizing, resize, light
     </div>    
     <p id="shortdesc">
       Demonstration of how to use the geometry resize methods to

examples/restricted-extent.html

@@ -42,7 +42,7 @@
   <body onload="init()">
     <h1 id="title">OpenLayers Restricted Extent Example</h1>
     <div id="tags">
-        map, restrict, restrictedextent, extent
+        map, restrict, restrictedextent, extent, light
     </div>    
     <p id="shortdesc">
       Don't let users drag outside the map extent: instead, limit dragging such

examples/rotate-features.html

@@ -99,7 +99,7 @@
     <h1 id="title">Rotate vector features</h1>
 
     <div id="tags">
-        vector, feature, rotating, rotation, rotate, advanced
+        vector, feature, rotating, rotation, rotate, advanced, light
     </div>
   <p id="shortdesc">
       Details on how to create and rotate vector features programmatically

examples/select-feature-multilayer.html

@@ -117,7 +117,7 @@
   <body onload="init()">
     <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
     <div id="tags">
-        vector, feature, selecting, selection, advanced
+        vector, feature, selecting, selection, advanced, light
     </div>     
     <p id="shortdesc">
       Select a feature on click with the Control.SelectFeature on multiple 

examples/single-tile.html

@@ -10,7 +10,7 @@
     </head>
     <body>
         <h1 id="title">Single Tile Example</h1>
-        <div id="tags">tile, ratio, singleTile, performance</div>
+        <div id="tags">tile, ratio, singleTile, performance, light</div>
         <p id="shortdesc">
             Use the singleTile option on gridded layers to request a single tile.
         </p>  

examples/spherical-mercator.html

@@ -91,16 +91,11 @@
     // create OSM layers
     var mapnik = new OpenLayers.Layer.OSM();
 
-    var osmarender = new OpenLayers.Layer.OSM(
-        "OpenStreetMap (Tiles@Home)",
-        "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
-    );
-
     // create a vector layer for drawing
     var vector = new OpenLayers.Layer.Vector("Editable Vectors");
 
     map.addLayers([
-        gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, osmarender, vector
+        gphy, gmap, gsat, ghyb, veroad, veaer, vehyb, mapnik, vector
     ]);
     map.addControl(new OpenLayers.Control.LayerSwitcher());
     map.addControl(new OpenLayers.Control.EditingToolbar(vector));

examples/strategy-bbox.html

@@ -10,20 +10,46 @@
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, photos;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+            /**
-        
+             * A specific format for parsing Flickr API JSON responses.
+             */
+            OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
+                read: function(obj) {
+                    if(obj.stat === 'fail') {
+                        throw new Error(
+                            ['Flickr failure response (',
+                             obj.code,
+                             '): ',
+                             obj.message].join(''));
+                    }
+                    if(!obj || !obj.photos ||
+                       !OpenLayers.Util.isArray(obj.photos.photo)) {
+                        throw new Error(
+                            'Unexpected Flickr response');
+                    }
+                    var photos = obj.photos.photo, photo,
+                        x, y, point,
+                        feature, features = [];
+                    for(var i=0,l=photos.length; i<l; i++) {
+                        photo = photos[i];
+                        x = photo.longitude;
+                        y = photo.latitude;
+                        point = new OpenLayers.Geometry.Point(x, y);
+                        feature = new OpenLayers.Feature.Vector(point, {
+                            title: photo.title,
+                            img_url: photo.url_s
+                        });
+                        features.push(feature);
+                    }
+                    return features;
+                }
+            });
+
             function init() {
-                map = new OpenLayers.Map('map', {
+                map = new OpenLayers.Map('map');
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+
-                });
+                var base = new OpenLayers.Layer.OSM();
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
 
                 var style = new OpenLayers.Style({
                     externalGraphic: "${img_url}",
@@ -31,24 +57,28 @@
                 });
 
                 photos = new OpenLayers.Layer.Vector("Photos", {
-                    strategies: [new OpenLayers.Strategy.BBOX()],
+                    projection: "EPSG:4326",
-                    protocol: new OpenLayers.Protocol.HTTP({
+                    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1})],
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                    protocol: new OpenLayers.Protocol.Script({
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
-                            sort: "interestingness-desc",
+                            format: 'json',
-                            service: "WFS",
+                            method: 'flickr.photos.search',
-                            request: "GetFeatures",
+                            extras: 'geo,url_s',
-                            srs: "EPSG:4326",
+                            per_page: 10,
-                            maxfeatures: 10
+                            page: 1
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap(style)
                 });
 
                 map.addLayers([base, photos]);
-                map.setCenter(new OpenLayers.LonLat(-116.45, 35.42), 5);
+                map.setCenter(
+                        new OpenLayers.LonLat(-567468.5392481,
+                                              4950672.5471436), 5);
             }
             
         </script>
@@ -56,7 +86,7 @@
     <body onload="init()">
         <h1 id="title">BBOX Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, bbox, strategy, cleanup
+            vector, feature, stylemap, bbox, strategy, script, flickr
         </div>    
         <p id="shortdesc">
             Uses a BBOX strategy to request features within a bounding box.
@@ -67,6 +97,10 @@
             previously requested data bounds are invalidated (by browsing to
             some area not covered by those bounds), another request for data
             is issued.</p>
+
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
+
         </div>
     </body>
 </html>

examples/strategy-cluster.html

@@ -72,20 +72,45 @@
             var $ = OpenLayers.Util.getElement;
         
             var map, template;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+            /**
+             * A specific format for parsing Flickr API JSON responses.
+             */
+            OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
+                read: function(obj) {
+                    if(obj.stat === 'fail') {
+                        throw new Error(
+                            ['Flickr failure response (',
+                             obj.code,
+                             '): ',
+                             obj.message].join(''));
+                    }
+                    if(!obj || !obj.photos ||
+                       !OpenLayers.Util.isArray(obj.photos.photo)) {
+                        throw new Error(
+                            'Unexpected Flickr response');
+                    }
+                    var photos = obj.photos.photo, photo,
+                        x, y, point,
+                        feature, features = [];
+                    for(var i=0,l=photos.length; i<l; i++) {
+                        photo = photos[i];
+                        x = photo.longitude;
+                        y = photo.latitude;
+                        point = new OpenLayers.Geometry.Point(x, y);
+                        feature = new OpenLayers.Feature.Vector(point, {
+                            title: photo.title,
+                            img_url: photo.url_s
+                        });
+                        features.push(feature);
+                    }
+                    return features;
+                }
+            });
 
             function init() {
-                map = new OpenLayers.Map('map', {
+                map = new OpenLayers.Map('map');
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+                var base = new OpenLayers.Layer.OSM();
-                });
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
 
                 var style = new OpenLayers.Style({
                     pointRadius: "${radius}",
@@ -103,22 +128,24 @@
                 });
 
                 var photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
                     strategies: [
                         new OpenLayers.Strategy.Fixed(),
                         new OpenLayers.Strategy.Cluster()
                     ],
-                    protocol: new OpenLayers.Protocol.HTTP({
+                    protocol: new OpenLayers.Protocol.Script({
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
-                            sort: "interestingness-desc",
+                            format: 'json',
-                            service: "WFS",
+                            method: 'flickr.photos.search',
-                            request: "GetFeatures",
+                            extras: 'geo,url_s',
-                            srs: "EPSG:4326",
+                            per_page: 150,
-                            maxfeatures: 150,
+                            page: 1,
                             bbox: [-180, -90, 180, 90]
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap({
                         "default": style,
@@ -174,7 +201,7 @@
     <body onload="init()">
         <h1 id="title">Cluster Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, cluster, strategy, cleanup
+            vector, feature, stylemap, cluster, strategy, flickr, script
         </div>         
         <p id="shortdesc">
             Uses a cluster strategy to render points representing clusters of features.
@@ -183,6 +210,8 @@
         <div id="docs">
             <p>The Cluster strategy lets you display points representing clusters
             of features within some pixel distance.</p>
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
         </div>
         <div id="photos"></div>
         <p>Hover over a cluster on the map to see the photos it includes.</p>

examples/strategy-paging.html

@@ -10,20 +10,45 @@
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, photos, paging;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
+
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+            /**
+             * A specific format for parsing Flickr API JSON responses.
+             */
+            OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
+                read: function(obj) {
+                    if(obj.stat === 'fail') {
+                        throw new Error(
+                            ['Flickr failure response (',
+                             obj.code,
+                             '): ',
+                             obj.message].join(''));
+                    }
+                    if(!obj || !obj.photos ||
+                       !OpenLayers.Util.isArray(obj.photos.photo)) {
+                        throw new Error(
+                            'Unexpected Flickr response');
+                    }
+                    var photos = obj.photos.photo, photo,
+                        x, y, point,
+                        feature, features = [];
+                    for(var i=0,l=photos.length; i<l; i++) {
+                        photo = photos[i];
+                        x = photo.longitude;
+                        y = photo.latitude;
+                        point = new OpenLayers.Geometry.Point(x, y);
+                        feature = new OpenLayers.Feature.Vector(point, {
+                            title: photo.title,
+                            img_url: photo.url_s
+                        });
+                        features.push(feature);
+                    }
+                    return features;
+                }
+            });
         
             function init() {
-                map = new OpenLayers.Map('map', {
+                map = new OpenLayers.Map('map');
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
+                var base = new OpenLayers.Layer.OSM();
-                });
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
 
                 var style = new OpenLayers.Style({
                     externalGraphic: "${img_url}",
@@ -33,19 +58,21 @@
                 paging = new OpenLayers.Strategy.Paging();
 
                 photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
                     strategies: [new OpenLayers.Strategy.Fixed(), paging],
-                    protocol: new OpenLayers.Protocol.HTTP({
+                    protocol: new OpenLayers.Protocol.Script({
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
-                            sort: "interestingness-desc",
+                            format: 'json',
-                            service: "WFS",
+                            method: 'flickr.photos.search',
-                            request: "GetFeatures",
+                            extras: 'geo,url_s',
-                            srs: "EPSG:4326",
+                            per_page: 100,
-                            maxfeatures: 100,
+                            page: 1,
                             bbox: [-180, -90, 180, 90]
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap(style)
                 });
@@ -66,7 +93,7 @@
     <body onload="init()">
         <h1 id="title">Paging Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, paging, strategy, cleanup
+            vector, feature, stylemap, paging, strategy, flickr, script
         </div>        
         <p id="shortdesc">
             Uses a paging strategy to cache large batches of features and render a page at a time.
@@ -81,6 +108,8 @@
             that do not support paging on the server.  In this case, the protocol requests a
             batch of 100 features, the strategy caches those and supplies a single
             page at a time to the layer.</p>
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
         </div>
     </body>
 </html>

examples/style-rules.html

@@ -13,7 +13,7 @@
     <body onload="init()">
         <h1 id="title">Rule Based Style</h1>
         <div id="tags">
-            vector, feature, stylemap, filter, comparison
+            vector, feature, stylemap, filter, comparison, light
         </div>        
         <p id="shortdesc">
             Use rule based styling to use different symbolizers for different

examples/style.css

@@ -69,6 +69,10 @@ h6 {
     font-weight: bold;
 }
 
+.olControlAttribution {
+    bottom: 5px;
+}
+
 /**
  * Map Examples Specific
  */

examples/style.mobile-jq.css

@@ -55,7 +55,7 @@ body {
     margin: 1em;
 }
 .ui-content .ui-listview {
-    margin: 0px;
+    margin: 0;
 }
 #details-list li{
 	padding:15px 10px;

examples/style.mobile.css

@@ -1,29 +1,49 @@
-div.olControlZoomPanel {
+div.olControlZoom {
-    height: 108px;
-    width: 36px;
     position: absolute;
-    top: 20px;
+    top: 8px;
-    left: 20px;
+    left: 8px;
+    background: rgba(255,255,255,0.4);
+    border-radius: 4px;
+    padding: 2px;
 }
-div.olControlZoomPanel div {
+* {
-    width: 36px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    height: 36px;
-    background-image: url(img/mobile-zoombar.png);
-    left: 0;
 }
-div.olControlZoomPanel .olControlZoomInItemInactive {
+div.olControlZoom a {
-    top: 0;
+    display: block;
-    background-position: 0 0;
+    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: #130085; /* fallback for IE - IE6 requires background shorthand*/
+    background: rgba(0, 60, 136, 0.5);
+    filter: alpha(opacity=80);
 }
-div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+a.olControlZoomIn {
-    top: 36px;
+    border-radius: 4px 4px 0 0;
-    background-position: 0 -36px;
 }
-div.olControlZoomPanel .olControlZoomOutItemInactive {
+a.olControlZoomOut {
-    top: 72px;
+    border-radius: 0 0 4px 4px;
-    background-position: 0 -72px;
 }
-.olTileImage {
+div.olControlZoom 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.olControlZoom a:hover {
+        background: rgba(0, 60, 136, 0.5);
+    }
+}
+.olLayerGrid .olTileImage {
     -webkit-transition: opacity 0.2s linear;
     -moz-transition: opacity 0.2s linear;
     -o-transition: opacity 0.2s linear;

examples/stylemap.html

@@ -73,12 +73,12 @@
     <h1 id="title">StyleMap Example</h1>
 
     <div id="tags">
-        vector, feature, stylemap
+        vector, feature, stylemap, light
     </div>
 
     <p id="shortdesc">
         Shows how to use a StyleMap to style features with rule based styling.
-        A style map references on or more OpenLayers.Style objects.  These
+        A style map references one or more OpenLayers.Style objects.  These
         OpenLayers.Style objects are collections of OpenLayers.Rule objects
         that determine how features are styled.  An OpenLayers.Rule object
         combines an OpenLayers.Filter object with a symbolizer.  A filter is used

examples/styles-context.html

@@ -92,7 +92,7 @@
     <h1 id="title">Feature Styles Example</h1>
 
     <div id="tags">
-        vector, feature, stylemap
+        vector, feature, stylemap, light
     </div>
 
     <p id="shortdesc">

examples/styles-rotation.html

@@ -76,7 +76,7 @@
   <body onload="init()">
     <h1 id="title">Rotation Style Example</h1>
     <div id="tags">
-        vector, feature, stylemap, rotation, cleanup
+        vector, feature, stylemap, rotation, cleanup, light
     </div>    
     <p id="shortdesc">
         Use the rotation property of a point symbolizer to rotate

examples/styles-unique.html

@@ -94,7 +94,7 @@
     <h1 id="title">Unique Value Styles Example</h1>
 
     <div id="tags">
-        vector, feature, stylemap, uniquevalue, cleanup
+        vector, feature, stylemap, uniquevalue, cleanup, light
     </div>
 
     <p id="shortdesc">

examples/symbolizers-fill-stroke-graphic.html

@@ -126,7 +126,7 @@
   <body onload="init()">
     <h1 id="title">OpenLayers Example</h1>
     <div id="tags">
-        vector, feature, symbolizer, filter, comparison, labeling
+        vector, feature, symbolizer, filter, comparison, labeling, light
     </div>
     <p id="shortdesc">
         Demonstrate fill, stroke, and graphic property of symbolizers.

examples/tile-origin.html

@@ -11,7 +11,7 @@
     <body>
         <h1 id="title">Tile Origin</h1>
         <div id="tags">
-            grid, tileOrigin
+            grid, tileOrigin, light
         </div>
         <p id="shortdesc">
             Demonstrates the use of the tileExtent property to differentiate 

examples/transition.html

@@ -46,7 +46,7 @@
   <body onload="init()">
     <h1 id="title">Transition Example</h1>
     <div id="tags">
-        transition, resize, tile, singletile
+        transition, resize, tile, singletile, light
     </div>    
     <p id="shortdesc">
         Demonstrates the use of transition effects in tiled and untiled layers.

examples/using-proj4js.html

@@ -7,7 +7,7 @@
         <title>Using Proj4JS for vector reprojection</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <link rel="stylesheet" href="style.css" type="text/css">
-        <script type="text/javascript" src="http://trac.osgeo.org/proj4js/export/2080/trunk/lib/proj4js-compressed.js"></script>
+        <script type="text/javascript" src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
         <script type="text/javascript" src="http://spatialreference.org/ref/epsg/31467/proj4js/"></script>
         <script type="text/javascript" src="../lib/OpenLayers.js"></script>
         <script type="text/javascript" src="./using-proj4js.js"></script>
@@ -64,7 +64,7 @@
             you would not inlude Proj4JS the way it is done in this example.
             In a production environment you would furthermore have a local copy 
             of the Proj4JS-projection definition that is hotlinked in this 
-            example.
+            example (see Graticule example for how to do this).
         </p>
         <div id="map">
         </div>

examples/utfgrid-geography-class.html

@@ -0,0 +1,51 @@
+<!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 UTFGrid Geography Class</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style>
+        #flag {
+            position: relative;
+            z-index: 999;
+            height: 0px;
+            width: 0px;
+            -moz-transition: all 0.1s linear;
+            -webkit-transition: all 0.1s linear;
+        }
+        #flag img {
+            position: absolute;
+            width: 80px;
+            -moz-box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+            -webkit-box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+            box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
+        }
+        .olControlAttribution {
+            bottom: 5px;
+            font-size: 9px;
+        }
+    </style>
+</head>
+<body>
+    <h1 id="title">OpenLayers UTFGrid Geography Class Example</h1>
+
+    <div id="shortdesc">
+        This page demonstrates the use of the OpenLayers UTFGrid Controls. 
+    </div>
+    <div id="map" class="smallmap">
+        <div id="flag"></div>
+    </div>
+    <p>Point to a country and try to guess the name before it shows up: <strong id="output">&nbsp;</strong>
+    <div id="docs">
+        <p>
+        See the <a href="utfgrid-geography-class.js" target="_blank">utfgrid-geography-class.js</a> source for 
+        detail on using UTFGrids in OpenLayers.
+        </p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="utfgrid-geography-class.js"></script>
+</body>
+</html>

examples/utfgrid-geography-class.js

@@ -0,0 +1,62 @@
+var osm = new OpenLayers.Layer.XYZ(
+    "MapQuest OSM", 
+    [
+        "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+        "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+        "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+        "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
+    ],
+    {transitionEffect: "resize", wrapDateLine: true}
+);
+
+var utfgrid = new OpenLayers.Layer.UTFGrid({
+    url: "utfgrid/geography-class/${z}/${x}/${y}.grid.json",
+    utfgridResolution: 4, // default is 2
+    displayInLayerSwitcher: false
+});
+
+var map = new OpenLayers.Map({
+    div: "map", 
+    projection: "EPSG:900913",
+    numZoomLevels: 3,
+    layers: [osm, utfgrid],
+    controls: [
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.Zoom()
+    ],
+    center: [0, 0],
+    zoom: 1
+});
+
+var output = document.getElementById("output");
+var flag = document.getElementById("flag");
+
+var callback = function(infoLookup, loc, pixel) {
+    var msg = "";
+    if (infoLookup) {
+        var info;
+        for (var idx in infoLookup) {
+            // idx can be used to retrieve layer from map.layers[idx]
+            info = infoLookup[idx];
+            if (info && info.data) {
+                output.innerHTML = info.data.admin;
+                flag.innerHTML = "<img src='data:image/png;base64," + info.data.flag_png + "'>";
+                flag.style.left = (pixel.x + 15) + "px";
+                flag.style.top = (pixel.y + 15) + "px";
+            } else {
+                output.innerHTML = flag.innerHTML = "&nbsp;";
+            }
+        }
+    }
+};
+    
+var control = new OpenLayers.Control.UTFGrid({
+    callback: callback,
+    handlerMode: "move"
+});
+
+map.addControl(control);

examples/utfgrid.html

@@ -0,0 +1,64 @@
+<!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 UTFGrid Demo</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style>
+        #attrs {
+            height: 1.5em;
+        }
+        #controlToggle li { list-style: none; }
+    </style>
+</head>
+<body>
+    <h1 id="title">OpenLayers UTFGrid Demo</h1>
+
+    <div>
+        <div id="shortdesc">
+            This page demonstrates the use of the OpenLayers UTFGrid Controls. 
+        </div>
+        <div id="map" class="smallmap"></div>
+        <p>
+            When the selected event is triggered, the underlying feature 
+            attributes are shown below.
+        </p>
+        <div id="attrs">&nbsp;</div>
+        <ul id="controlToggle">
+            <li>
+                <input type="radio" name="type" value="move" id="moveHandler" 
+                onclick="toggleControl(this);" checked="checked" />
+                <label for="moveHandler">Move</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="hover" id="hoverHandler" 
+                onclick="toggleControl(this);" />
+                <label for="hoverHandler">Hover</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="click" id="clickHandler" 
+                onclick="toggleControl(this);" />
+                <label for="clickHandler">Click</label>
+            </li>
+        </ul>
+    </div>
+    <div id="docs">
+        <p>UTFGrids can be used to output highly optimized feature "hit grids."
+        The UTFGrid encoding scheme encodes interactivity data for a tile in a
+        space efficient manner. It is designed to be used in browsers for
+        interactive features like displaying tooltips without having to hit the
+        server for an "info query."
+        </p>
+        <p>
+        See the <a href="utfgrid.js" target="_blank">utfgrid.js source</a> for 
+        detail on using UTFGrids in OpenLayers.  For more info, view the 
+        <a href="https://github.com/mapbox/utfgrid-spec">UTFGrid Specification</a>.
+        </p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="utfgrid.js"></script>
+</body>
+</html>

examples/utfgrid.js

@@ -0,0 +1,61 @@
+var osm = new OpenLayers.Layer.OSM();
+
+var utfgrid = new OpenLayers.Layer.UTFGrid({
+    url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json",
+    utfgridResolution: 4, // default is 2
+    displayInLayerSwitcher: false
+});
+
+var map = new OpenLayers.Map({
+    div: "map", 
+    projection: "EPSG:900913",
+    controls: [],
+    layers: [osm, utfgrid],
+    center: [0, 0],
+    zoom: 1
+});
+
+var callback = function(infoLookup) {
+    var msg = "";
+    if (infoLookup) {
+        var info;
+        for (var idx in infoLookup) {
+            // idx can be used to retrieve layer from map.layers[idx]
+            info = infoLookup[idx];
+            if (info && info.data) {
+                msg += "[" + info.id + "] <strong>In 2005, " + 
+                    info.data.NAME + " had a population of " +
+                    info.data.POP2005 + " people.</strong> ";
+            }
+        }
+    }
+    document.getElementById("attrs").innerHTML = msg;
+};
+    
+var controls = {
+    move: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "move"
+    }),
+    hover: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "hover"
+    }),
+    click: new OpenLayers.Control.UTFGrid({
+        callback: callback,
+        handlerMode: "click"
+    })
+};
+for (var key in controls) {
+    map.addControl(controls[key]);
+}
+
+function toggleControl(el) {
+    for (var c in controls) {
+        controls[c].deactivate();
+    }
+    controls[el.value].activate();
+}
+
+// activate the control that responds to mousemove
+toggleControl({value: "move"});

examples/utfgrid/bio_utfgrid/1/0/2.json

@@ -0,0 +1 @@
+{"keys": [""], "data": {}, "grid": ["                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                "]}

examples/utfgrid/bio_utfgrid/1/1/2.json

@@ -0,0 +1 @@
+{"keys": [""], "data": {}, "grid": ["                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                "]}

examples/utfgrid/bio_utfgrid/1/2/0.json

@@ -0,0 +1 @@
+{"keys": [""], "data": {}, "grid": ["                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                "]}

examples/utfgrid/bio_utfgrid/1/2/1.json

@@ -0,0 +1 @@
+{"keys": [""], "data": {}, "grid": ["                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                "]}

examples/utfgrid/bio_utfgrid/1/2/2.json

@@ -0,0 +1 @@
+{"keys": [""], "data": {}, "grid": ["                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                ", "                                                                "]}