Tagging the 2.11-rc1 release.

git-svn-id: http://svn.openlayers.org/tags/openlayers/release-2.11-rc1@11997 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

build/README.txt

@@ -1,14 +1,43 @@
+The OpenLayers build tool supports several different
+forms of compressing your javascript code, and a method
+of describing build profiles to create customized 
+OpenLayers builds with only the components you need.
 
-## HowTo: Build & deploy "Shrunk" Single File Library version of OpenLayers ##
+When building a file, you can choose to build with several
+different compression options to the Python-based build.py
+script. The following is an example script:
 
- * Build:
+python build.py -c closure full OpenLayers-closure.js
 
-     cd build
-     ./build.py
-     cd ..
+This script selects the 'closure' compression mechanism,
+uses a config file called 'full.cfg', and writes the output
+to OpenLayers-closure.js.
 
- * Upload the result to the server: e.g.
+The options available for compression are:
 
-  scp build/OpenLayers.js openlayers@openlayers.org:openlayers.org/htdocs/code/
+ * closure
+   This requires you to have a closure-compiler.jar in your
+   tools directory. You can do this by fetching the compiler
+   from:
 
+     http://closure-compiler.googlecode.com/files/compiler-latest.zip
+
+   Then unzipping that file, and placing compiler.jar into tools
+   and renaming it closure-compiler.jar.
+
+ * closure_ws
+   This uses the closure compiler webservice. This will only work
+   for files source Javascript files which are under 1MB. (Note that
+   the default OpenLayers full build is not under 1MB.)
+
+ * jsmin
+   jsmin is the default compiler, and uses the Python-based
+   jsmin script to compress the Javascript. 
+
+ * minimize
+   This is a simple whitespace removing Python script, designed
+   to fill in when other tools are unavailable.
+
+ * none
+   None will leave the Javascript uncompressed.
 

build/build.py

@@ -3,44 +3,62 @@
 import sys
 sys.path.append("../tools")
 import mergejs
+import optparse
 
-def build():
-    have_compressor = None
+def build(config_file = None, output_file = None, options = None):
+    have_compressor = []
     try:
         import jsmin
-        have_compressor = "jsmin"
+        have_compressor.append("jsmin")
     except ImportError:
-        try:
-            import minimize
-            have_compressor = "minimize"
-        except Exception, E:
-            print E
-            pass
+        print "No jsmin"
+    try:
+        import closure
+        have_compressor.append("closure")
+    except Exception, E:
+        print "No closure (%s) % E"
+    try:
+        import closure_ws
+        have_compressor.append("closure_ws")
+    except ImportError:
+        print "No closure_ws"
+    
+    try:
+        import minimize
+        have_compressor.append("minimize")
+    except ImportError:
+        print "No minimize"
+
+    use_compressor = None
+    if options.compressor and options.compressor in have_compressor:
+        use_compressor = options.compressor
 
     sourceDirectory = "../lib"
     configFilename = "full.cfg"
     outputFilename = "OpenLayers.js"
 
-    if len(sys.argv) > 1:
-        configFilename = sys.argv[1]
+    if config_file:
+        configFilename = config_file
         extension = configFilename[-4:]
 
         if extension  != ".cfg":
-            configFilename = sys.argv[1] + ".cfg"
+            configFilename = config_file + ".cfg"
 
-    if len(sys.argv) > 2:
-        outputFilename = sys.argv[2]
+    if output_file:
+        outputFilename = output_file
 
     print "Merging libraries."
     merged = mergejs.run(sourceDirectory, None, configFilename)
-    if have_compressor == "jsmin":
-        print "Compressing using jsmin."
+    print "Compressing using %s" % use_compressor
+    if use_compressor == "jsmin":
         minimized = jsmin.jsmin(merged)
-    elif have_compressor == "minimize":
-        print "Compressing using minimize."
+    elif use_compressor == "minimize":
         minimized = minimize.minimize(merged)
+    elif use_compressor == "closure_ws":
+        minimized = closure_ws.minimize(merged)      
+    elif use_compressor == "closure":
+        minimized = closure.minimize(merged)      
     else: # fallback
-        print "Not compressing."
         minimized = merged 
     print "Adding license file."
     minimized = file("license.txt").read() + minimized
@@ -51,4 +69,14 @@ def build():
     print "Done."
 
 if __name__ == '__main__':
-  build()
+  opt = optparse.OptionParser(usage="%s [options] [config_file] [output_file]\n  Default config_file is 'full.cfg', Default output_file is 'OpenLayers.js'")
+  opt.add_option("-c", "--compressor", dest="compressor", help="compression method: one of 'jsmin', 'minimize', or 'none'", default="jsmin")
+  (options, args) = opt.parse_args()
+  if not len(args):
+    build(options=options)
+  elif len(args) == 1:
+    build(args[0], options=options)
+  elif len(args) == 2:
+    build(args[0], args[1], options=options)
+  else:
+    print "Wrong number of arguments"

build/full.cfg

@@ -2,31 +2,12 @@
 # like Renderers and Formats.
 
 [first]
-OpenLayers/SingleFile.js
-OpenLayers.js
-OpenLayers/BaseTypes.js
-OpenLayers/BaseTypes/Class.js
-OpenLayers/Util.js
-Rico/Corner.js
 
 [last]
 
 [include]
 
 [exclude]
-Firebug/firebug.js
-Firebug/firebugx.js
-OpenLayers/Lang/ca.js
-OpenLayers/Lang/cs-CZ.js
-OpenLayers/Lang/da-DK.js
-OpenLayers/Lang/de.js
-OpenLayers/Lang/en-CA.js
-OpenLayers/Lang/es.js
-OpenLayers/Lang/fr.js
-OpenLayers/Lang/it.js
-OpenLayers/Lang/nb.js
-OpenLayers/Lang/nl.js
-OpenLayers/Lang/pt-BR.js
-OpenLayers/Lang/sv-SE.js
-OpenLayers/Lang/zh-TW.js
-OpenLayers/Lang/zh-CN.js
+Firebug
+OpenLayers.js
+OpenLayers/Lang

build/library.cfg

@@ -1,22 +1,15 @@
 # This file includes the OpenLayers code to create a build for everything that 
-# does not require vector support. build.py uses this profile if no other one
-# is specified.
+# does not require vector support.
 
 [first]
-OpenLayers/SingleFile.js
-OpenLayers.js
-OpenLayers/BaseTypes.js
-OpenLayers/BaseTypes/Class.js
-OpenLayers/Util.js
-Rico/Corner.js
 
 [last]
 
 [include]
 
 [exclude]
-Firebug/firebug.js
-Firebug/firebugx.js
+Firebug
+OpenLayers.js
 OpenLayers/Format/GeoRSS.js
 OpenLayers/Format/GML.js
 OpenLayers/Format/WKT.js
@@ -50,19 +43,6 @@ OpenLayers/Renderer/Elements.js
 OpenLayers/Renderer/SVG.js
 OpenLayers/Renderer/VML.js
 OpenLayers/Renderer.js
-OpenLayers/Lang/ca.js
-OpenLayers/Lang/cs-CZ.js
-OpenLayers/Lang/da-DK.js
-OpenLayers/Lang/de.js
-OpenLayers/Lang/en-CA.js
-OpenLayers/Lang/es.js
-OpenLayers/Lang/fr.js
-OpenLayers/Lang/it.js
-OpenLayers/Lang/nb.js
-OpenLayers/Lang/nl.js
-OpenLayers/Lang/pt-BR.js
-OpenLayers/Lang/sv-SE.js
-OpenLayers/Lang/zh-TW.js
-OpenLayers/Lang/zh-CN.js
+OpenLayers/Lang
 
 

build/license.txt

@@ -2,7 +2,7 @@
 
   OpenLayers.js -- OpenLayers Map Viewer Library
 
-  Copyright 2005-2010 OpenLayers Contributors, released under the Clear BSD
+  Copyright 2005-2011 OpenLayers Contributors, released under the FreeBSD
   license. Please see http://svn.openlayers.org/trunk/openlayers/license.txt
   for the full text of the license.
 
@@ -90,3 +90,36 @@
  * issues. Applications that use the code below will continue to work seamlessly
  * when that happens.
  */
+
+/**
+ * OpenLayers.Util.pagePosition is based on Yahoo's getXY method, which is
+ * Copyright (c) 2006, Yahoo! Inc.
+ * All rights reserved.
+ * 
+ * Redistribution and use of this software in source and binary forms, with or
+ * without modification, are permitted provided that the following conditions
+ * are met:
+ * 
+ * * Redistributions of source code must retain the above copyright notice,
+ *   this list of conditions and the following disclaimer.
+ * 
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ * 
+ * * Neither the name of Yahoo! Inc. nor the names of its contributors may be
+ *   used to endorse or promote products derived from this software without
+ *   specific prior written permission of Yahoo! Inc.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 
+ * POSSIBILITY OF SUCH DAMAGE.
+ */

build/lite.cfg

@@ -5,11 +5,6 @@
 # Web Mapping BOF.
 
 [first]
-OpenLayers/SingleFile.js
-OpenLayers.js
-OpenLayers/BaseTypes.js
-OpenLayers/BaseTypes/Class.js
-OpenLayers/Util.js
 
 [last]
 

build/mobile.cfg

@@ -0,0 +1,36 @@
+[first]
+
+[last]
+
+[include]
+OpenLayers/Map.js
+OpenLayers/Kinetic.js
+OpenLayers/Projection.js
+OpenLayers/Layer/SphericalMercator.js
+OpenLayers/Layer/XYZ.js
+OpenLayers/Layer/Bing.js
+OpenLayers/Layer/WMS.js
+OpenLayers/Control/TouchNavigation.js
+OpenLayers/Control/Geolocate.js
+OpenLayers/Control/ZoomPanel.js
+OpenLayers/Control/Attribution.js
+OpenLayers/Control/SelectFeature.js
+OpenLayers/Control/DrawFeature.js
+OpenLayers/Control/ModifyFeature.js
+OpenLayers/Control/Panel.js
+OpenLayers/Handler/Point.js
+OpenLayers/Handler/Path.js
+OpenLayers/Handler/Polygon.js
+OpenLayers/Layer/Vector.js
+OpenLayers/Renderer/SVG.js
+OpenLayers/Renderer/Canvas.js
+OpenLayers/Format/GeoJSON.js
+OpenLayers/Format/KML.js
+OpenLayers/Protocol/HTTP.js
+OpenLayers/Protocol/WFS.js
+OpenLayers/Protocol/WFS/v1_0_0.js
+OpenLayers/Strategy/Fixed.js
+
+[exclude]
+
+

build/tests.cfg

@@ -0,0 +1,10 @@
+# This build config is supposed to be used for the units tests with "mode=build"
+
+[first]
+
+[last]
+
+[include]
+
+[exclude]
+OpenLayers.js

doc/authors.txt

@@ -1,8 +1,11 @@
 OpenLayers contributors:
 
+Antoine Abt
 Mike Adair
 Jeff Adams
 Seb Benthall
+Bruno Binet
+Stéphane Brunner
 Howard Butler
 Bertil Chaupis                                                               
 John Cole
@@ -15,8 +18,11 @@ Christian López Espínola
 John Frank
 Sean Gilles
 Pierre Giraud
+Ivan Grcic
 Andreas Hocevar
+Marc Jansen
 Ian Johnson
+Frédéric Junod
 Eric Lemoine
 Philip Lindsay
 Martijn van Oosterhout

examples/GMLParser.html

@@ -1,43 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers GML Parser</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">
-        function parseData(req) {
-          g =  new OpenLayers.Format.GML();
-          html = ""
-          features = g.read(req.responseText);
-          for(var feat in features) {
-            html += "Feature: Geometry: "+ features[feat].geometry+",";
-                html += "<ul>";
-            for (var j in features[feat].attributes) {
-                html += "<li>"+j+":"+features[feat].attributes[j]+"</li>";
-            }
-                html += "</ul>"
-          }
-          document.getElementById('output').innerHTML = html;
-        }
-        function load() {
-            OpenLayers.loadURL("gml/owls.xml", "", null, parseData);
-        }
-    </script>
-  </head>
-  <body onload="load()">
-      <h1 id="title">GML Parser Example</h1>
-
-      <div id="tags"></div>
-
-      <p id="shortdesc">
-          Demonstrate the operation of the GML parser.
-      </p>
-
-      <div id="output"></div>
-
-      <div id="docs">
-          This script reads data from a GML file and parses out the coordinates, appending them to a HTML string with markup tags.
-          This markup is dumped to an element in the page.
-    </div>
-  </body>
-</html>

examples/KMLParser.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 KML Parser Example</title>
     <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
@@ -31,7 +33,9 @@
   <body onload="load()">
       <h1 id="title">KML Parser Example</h1>
 
-      <div id="tags"></div>
+      <div id="tags">
+        KML, parsing, format
+      </div>
 
       <p id="shortdesc">
           Demonstrate the operation of the KML parser.

examples/SLDSelect.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 SLD based selection control</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -130,7 +132,9 @@
   <body onload="init()">
     <h1 id="title">SLD based selection on WMS layers</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        sld, sldselect, styling, style
+    </div>
 
     <div id="shortdesc">Using Styled Layer Descriptors to make a selection on WMS layers</div>
 

examples/WMSDescribeLayerParser.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 WMSDescribeLayer Parser Example</title>
     <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
@@ -25,7 +27,9 @@
   <body onload="load()">
       <h1 id="title">WMSDescribeLayer Parser Example</h1>
 
-      <div id="tags"></div>
+      <div id="tags">
+          wmsdescribelayer, parser, cleanup
+      </div>
 
       <p id="shortdesc">
           Demonstrate the operation of the WMSDescribeLayer parser.

examples/WMSPost.html

@@ -1,175 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers Basic WMS Example via HTTP-POST protocol</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;
-
-        function init(){
-            var sld = '<StyledLayerDescriptor version="1.0.0">';
-                sld+= '<NamedLayer>';
-                sld+= '<Name>topp:tasmania_roads</Name>';
-                sld+= '<UserStyle>';
-                sld+= '<IsDefault>1</IsDefault>';
-                sld+= '<FeatureTypeStyle>';
-                sld+= '<Rule>';
-                sld+= '<LineSymbolizer>';
-                sld+= '<Stroke>';
-                sld+= '<CssParameter name="stroke">';
-                sld+= '<Literal>#787878</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '<CssParameter name="stroke-width">';
-                sld+= '<Literal>2</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Stroke>';
-                sld+= '</LineSymbolizer>';
-                sld+= '</Rule>';
-                sld+= '</FeatureTypeStyle>';
-                sld+= '</UserStyle>';
-                sld+= '</NamedLayer>';
-
-                sld+= '<NamedLayer>';
-                sld+= '<Name>topp:tasmania_water_bodies</Name>';
-                sld+= '<UserStyle>';
-                sld+= '<IsDefault>1</IsDefault>';
-                sld+= '<FeatureTypeStyle>';
-                sld+= '<Rule>';
-                sld+= '<LineSymbolizer>';
-                sld+= '<Stroke>';
-                sld+= '<CssParameter name="stroke">';
-                sld+= '<Literal>#4F94CD</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '<CssParameter name="stroke-width">';
-                sld+= '<Literal>3</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Stroke>';
-                sld+= '</LineSymbolizer>';
-                sld+= '<PolygonSymbolizer>';
-                sld+= '<Fill>';
-                sld+= '<CssParameter name="fill">';
-                sld+= '<Literal>#63B8FF</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Fill>';
-                sld+= '</PolygonSymbolizer>';
-                sld+= '</Rule>';
-                sld+= '</FeatureTypeStyle>';
-                sld+= '</UserStyle>';
-                sld+= '</NamedLayer>';
-
-                sld+= '<NamedLayer>';
-                sld+= '<Name>topp:tasmania_cities</Name>';
-                sld+= '<UserStyle>';
-                sld+= '<IsDefault>1</IsDefault>';
-                sld+= '<FeatureTypeStyle>';
-                sld+= '<Rule>';
-                sld+= '<PointSymbolizer>';
-                sld+= '<Graphic>';
-                sld+= '<Mark>';
-                sld+= '<WellKnownName>cross</WellKnownName>';
-                sld+= '<Fill>';
-                sld+= '<CssParameter name="fill">';
-                sld+= '<Literal>#00FF00</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Fill>';
-                sld+= '</Mark>';
-                sld+= '<Size>15</Size>';
-                sld+= '</Graphic>';
-                sld+= '</PointSymbolizer>';
-                sld+= '<TextSymbolizer>';
-                sld+= '<Label><PropertyName>CITY_NAME</PropertyName></Label>';
-                sld+= '<Font>';
-                sld+= '<SvgParameter name="font-size">15</SvgParameter>';
-                sld+= '</Font>';
-                sld+= '</TextSymbolizer>';
-                sld+= '</Rule>';
-                sld+= '</FeatureTypeStyle>';
-                sld+= '</UserStyle>';
-                sld+= '</NamedLayer>';
-
-                sld+= '<NamedLayer>';
-                sld+= '<Name>topp:tasmania_state_boundaries</Name>';
-                sld+= '<UserStyle>';
-                sld+= '<IsDefault>1</IsDefault>';
-                sld+= '<FeatureTypeStyle>';
-                sld+= '<Rule>';
-                sld+= '<PolygonSymbolizer>';
-                sld+= '<Fill>';
-                sld+= '<CssParameter name="fill">';
-                sld+= '<Literal>#8B8989</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '<CssParameter name="fill-opacity">';
-                sld+= '<Literal>0.2</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Fill>';
-                sld+= '<Stroke>';
-                sld+= '<CssParameter name="stroke">';
-                sld+= '<Literal>#FF4040</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '<CssParameter name="stroke-width">';
-                sld+= '<Literal>2</Literal>';
-                sld+= '</CssParameter>';
-                sld+= '</Stroke>';
-                sld+= '</PolygonSymbolizer>';
-                sld+= '</Rule>';
-                sld+= '</FeatureTypeStyle>';
-                sld+= '</UserStyle>';
-                sld+= '</NamedLayer>';
-
-                sld+= '</StyledLayerDescriptor>';
-
-            map = new OpenLayers.Map('map');
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-
-            var layer = new OpenLayers.Layer.WMS(
-                "OpenLayers WMS",
-                "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                {
-                    layers: 'basic'
-                }
-            );
-
-            var rcbw = new OpenLayers.Layer.WMS.Post("Roads, Cities, Boundaries, Water",
-                "http://demo.opengeo.org/geoserver/wms", 
-                {
-                    'layers': 'topp:tasmania_roads,topp:tasmania_water_bodies,topp:tasmania_state_boundaries,topp:tasmania_cities',
-                    transparent: true,
-                    format: 'image/jpeg',
-                    sld_body: sld
-                },
-                {
-                    isBaseLayer: false,
-                    unsupportedBrowsers: []
-                }
-            );
-            map.addLayers([layer, rcbw]);
-            map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7);
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">Basic WMS Example via HTTP-POST protocol with a large SLD
-    included</h1>
-
-    <div id="tags"></div>
-
-    <div id="shortdesc">Creating a WMS layer with a large SLD in the sld_body</div>
-
-    <div id="map" style="width: 512; height: 256; border: 1px solid red;"></div>
-
-    <div id="docs">
-        This example uses a large SLD created on the client side to style a WMS
-        layer.  This example uses a WMS.Post layer which transfers data via the
-        HTTP-POST protocol. <br>
-        NOTE: Opera is not able to display transparent tiles with this layer,
-        and in some Firefox browsers can appear ugly viewport-shaking effects
-        while dragging arround. Use the 'unsupportedBrowsers' property to
-        control which browsers should use plain image tiles (like Layer.WMS)
-        instead. The default setting (["mozilla", "firefox", "opera"])
-        excludes problematic browsers without removing the ability to use long
-        request parameters, because all these browsers support long urls via
-        GET.
-    </div>
-  </body>
-</html>

examples/accelerometer.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <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 Accelerometer Usage</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="browser.js"></script>
+
+    <style type="text/css">
+        .olControlAttribution {
+            bottom: 5px;
+        }
+    </style>
+    <script type="text/javascript">
+        function init() {
+            if (isEventSupported('deviceorientation', window) || isEventSupported('mozorientation', window) || isEventSupported('devicemotion', window)) {
+                if (window.DeviceOrientationEvent) {
+                    window.addEventListener("deviceorientation", function (event) {
+                        document.getElementById('resultDeviceOrientation').innerHTML = '';
+                        if (typeof(event.alpha) != 'undefined') {
+                            document.getElementById('resultDeviceOrientation').innerHTML = document.getElementById('resultDeviceOrientation').innerHTML + "Alpha: " + event.alpha + "<br>";
+                            document.getElementById('resultDeviceOrientation').innerHTML = document.getElementById('resultDeviceOrientation').innerHTML + "Beta: " + event.beta + "<br>";
+                            document.getElementById('resultDeviceOrientation').innerHTML = document.getElementById('resultDeviceOrientation').innerHTML + "Gamma: " + event.gamma + "<br>";
+                        }
+                        if (typeof(event.absolute) != 'undefined') {
+                            document.getElementById('resultDeviceOrientation').innerHTML = document.getElementById('resultDeviceOrientation').innerHTML + "Gamma: " + event.absolute + "<br>";
+                        }
+                        if (typeof(event.compassCalibrate) != 'undefined') {
+                            document.getElementById('resultDeviceOrientation').innerHTML = document.getElementById('resultDeviceOrientation').innerHTML + "Gamma: " + event.compassCalibrated + "<br>";
+                        }
+                    }, true);
+                }
+                if (window.DeviceMotionEvent) {
+                    window.addEventListener('devicemotion', function (event) {
+                        document.getElementById('resultDeviceMotion').innerHTML = '';
+                        if (typeof(event.accelerationIncludingGravity) != 'undefined') {
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "accelerationIncludingGravity.x: " + event.accelerationIncludingGravity.x + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "accelerationIncludingGravity.y: " + event.accelerationIncludingGravity.y + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "accelerationIncludingGravity.z: " + event.accelerationIncludingGravity.z + "<br>";
+                        }
+                        if (typeof(event.acceleration) != 'undefined') {
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "acceleration.x: " + event.acceleration.x + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "acceleration.y: " + event.acceleration.y + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "acceleration.z: " + event.acceleration.z + "<br>";
+                        }
+                        if (typeof(event.rotationRate) != 'undefined') {
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "rotationRate.alpha: " + event.rotationRate.alpha + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "rotationRate.beta: " + event.rotationRate.beta + "<br>";
+                            document.getElementById('resultDeviceMotion').innerHTML = document.getElementById('resultDeviceMotion').innerHTML + "rotationRate.gamma: " + event.rotationRate.gamma + "<br>";
+                        }
+                    }, true);
+                }
+                if (window.MozOrientation) {
+                    window.addEventListener("MozOrientation", function (orientation) {
+                        document.getElementById('resultMozOrientation').innerHTML = "orientation.x: " + orientation.x + "<br>";
+                        document.getElementById('resultMozOrientation').innerHTML = document.getElementById('resultMozOrientation').innerHTML + "orientation.y: " + orientation.y + "<br>";
+                        document.getElementById('resultMozOrientation').innerHTML = document.getElementById('resultMozOrientation').innerHTML + "orientation.z: " + orientation.z + "<br>";
+                    }, true);
+                }
+            } else {
+                alert("Unfortunately, your brower doesn't support the orientation usage");
+            }
+
+        }
+    </script>
+</head>
+<body onload="init()">
+<h1 id="title">Accelerometer</h1>
+
+<p id="shortdesc">
+    The goal of this script is to demonstrate the usage of accelerometer.
+</p>
+<p>
+  The orientation specification can be found <a href="http://dev.w3.org/geo/api/spec-source-orientation.html">here</a>.
+</p>
+
+<div id="tags">
+  browser, vendor, mobile, orientation 
+</div>  
+
+<h1>Device motion</h1>
+
+<div id="resultDeviceMotion">
+
+</div>
+<h1>Device orientation</h1>
+
+<div id="resultDeviceOrientation">
+
+</div>
+<h1>MOZ orientation</h1>
+
+<div id="resultMozOrientation">
+
+</div>
+</body>
+</html>

examples/accessible.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Accessible Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -50,6 +52,7 @@
         <h1 id="title">Accessible Example</h1>
 
         <div id="tags">
+            keyboard, pan, panning, zoom, zooming, accesskey
         </div>        
 
         <p id="shortdesc">

examples/all-overlays-google.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
+    <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 All Overlays with Google and OSM</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
@@ -11,6 +13,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">All Overlays with Google and OSM</h1>
+        <div id="tags">
+            overlay, baselayer, google, osm, openstreetmap
+        </div>
         <p id="shortdesc">
             Using the Google and OSM layers as overlays.
         </p>

examples/all-overlays.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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>All Overlays Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -56,6 +58,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">OpenLayers Overlays Only Example</h1>
+        <div id="tags">
+            overlay, baselayer
+        </div> 
         <p id="shortdesc">
             Demonstrates a map with overlays only.
         </p>

examples/anchor-permalink.html

@@ -0,0 +1,27 @@
+<html>
+    <head>
+        <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" />
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <title>AnchorPermalink Example</title>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="anchor-permalink.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">AnchorPermalink Example</h1>
+        <div id="tags">
+            anchor, permalink
+        </div>
+        <p id="shortdesc">
+            Place a permalink in the anchor of the url. 
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                See the <a href="anchor-permalink.js" target="_blank">anchor-permalink.js
+                source</a> to see how this is done.
+            </p> 
+        </div>
+    </body>
+</html>

examples/anchor-permalink.js

@@ -0,0 +1,13 @@
+function init() {
+    var map = new OpenLayers.Map({
+        div: "map",
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        displayProjection: new OpenLayers.Projection("EPSG:4326"),
+        layers: [
+            new OpenLayers.Layer.OSM()
+        ]
+    });
+    if (!map.getCenter()) map.zoomToMaxExtent();
+
+    map.addControl(new OpenLayers.Control.Permalink({anchor: true}));
+}

examples/animated_panning.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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>Animated Panning of the Map via map.panTo</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -73,7 +75,9 @@
   </head>
   <body onload="init()">
     <h1 id="title">map.panTo Example</h1>
-    <div id="tags">map.panTo</div>
+    <div id="tags">
+        panning, animation, effect, smooth, panMethod
+    </div>
     <div id="shortdesc">Show animated panning effects in the map</div>
     <div id="map" class="smallmap"></div>
     <div id="docs">

examples/arcgis93rest.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <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>
@@ -41,6 +43,7 @@
     <h1 id="title">ArcGIS Server 9.3 Rest API Example</h1>
 
     <div id="tags">
+        ESRI, ArcGIS, REST, filter
     </div>
     <p id="shortdesc">
         Shows the basic use of openlayers using an ArcGIS Server 9.3 Rest API layer

examples/arcgiscache_ags.html

@@ -0,0 +1,219 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers ArcGIS Cache Example (MapServer Access)</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        var map, 
+            cacheLayer,
+            testLayer,
+            //This layer requires meta data about the ArcGIS service.  Typically you should use a 
+            //JSONP call to get this dynamically.  For this example, we are just going to hard-code
+            //an example that we got from here (yes, it's very big):
+            //    http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json&pretty=true
+            layerInfo = {
+                  "currentVersion" : 10.01, 
+                  "serviceDescription" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, and a number of countries in Europe and elsewhere. This comprehensive street map includes highways, major roads, minor roads, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The street map was developed by ESRI using ESRI basemap data, AND road data, USGS elevation data, and UNEP-WCMC parks and protected areas for the world, and Tele Atlas Dynamap<61> and Multinet<65> street data for North America and Europe. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Northern Ireland (Belfast only), Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico (Mexico City only), Russia (Moscow and St. Petersburg only), South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us \u003ca href=\"http://goto.arcgisonline.com/maps/World_Street_Map \" target=\"_new\"\u003eonline\u003c/a\u003e.", 
+                  "mapName" : "Layers", 
+                  "description" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, most countries in Europe, and several other countries. This comprehensive street map includes highways, major roads, minor roads, one-way arrow indicators, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The map also includes building footprints for selected areas in the United States and Europe and parcel boundaries for much of the lower 48 states.\n\nThe street map was developed by ESRI using ESRI basemap data, DeLorme base map layers, AND road data, USGS elevation data, UNEP-WCMC parks and protected areas for the world, Tele Atlas Dynamap<61> and Multinet<65> street data for North America and Europe, and First American parcel data for the United States. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico, Russia, South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us online at http://goto.arcgisonline.com/maps/World_Street_Map\n", 
+                  "copyrightText" : "Sources: ESRI, DeLorme, AND, Tele Atlas, First American, ESRI Japan, UNEP-WCMC, USGS, METI, ESRI Hong Kong, ESRI Thailand, Procalculo Prosis", 
+                  "layers" : [
+                    {
+                      "id" : 0, 
+                      "name" : "World Street Map", 
+                      "parentLayerId" : -1, 
+                      "defaultVisibility" : true, 
+                      "subLayerIds" : null, 
+                      "minScale" : 0, 
+                      "maxScale" : 0
+                    }
+                  ], 
+                  "tables" : [
+                    
+                  ], 
+                  "spatialReference" : {
+                    "wkid" : 102100
+                  }, 
+                  "singleFusedMapCache" : true, 
+                  "tileInfo" : {
+                    "rows" : 256, 
+                    "cols" : 256, 
+                    "dpi" : 96, 
+                    "format" : "JPEG", 
+                    "compressionQuality" : 90, 
+                    "origin" : {
+                      "x" : -20037508.342787, 
+                      "y" : 20037508.342787
+                    }, 
+                    "spatialReference" : {
+                      "wkid" : 102100
+                    }, 
+                    "lods" : [
+                      {"level" : 0, "resolution" : 156543.033928, "scale" : 591657527.591555}, 
+                      {"level" : 1, "resolution" : 78271.5169639999, "scale" : 295828763.795777}, 
+                      {"level" : 2, "resolution" : 39135.7584820001, "scale" : 147914381.897889}, 
+                      {"level" : 3, "resolution" : 19567.8792409999, "scale" : 73957190.948944}, 
+                      {"level" : 4, "resolution" : 9783.93962049996, "scale" : 36978595.474472}, 
+                      {"level" : 5, "resolution" : 4891.96981024998, "scale" : 18489297.737236}, 
+                      {"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618}, 
+                      {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309}, 
+                      {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
+                      {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
+                      {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
+                      {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
+                      {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
+                      {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
+                      {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}, 
+                      {"level" : 15, "resolution" : 4.77731426794937, "scale" : 18055.954822}, 
+                      {"level" : 16, "resolution" : 2.38865713397468, "scale" : 9027.977411}, 
+                      {"level" : 17, "resolution" : 1.19432856685505, "scale" : 4513.988705}
+                    ]
+                  }, 
+                  "initialExtent" : {
+                    "xmin" : -20037507.0671618, 
+                    "ymin" : -20037507.0671618, 
+                    "xmax" : 20037507.0671618, 
+                    "ymax" : 20037507.0671619, 
+                    "spatialReference" : {
+                      "wkid" : 102100
+                    }
+                  }, 
+                  "fullExtent" : {
+                    "xmin" : -20037507.0671618, 
+                    "ymin" : -19971868.8804086, 
+                    "xmax" : 20037507.0671618, 
+                    "ymax" : 19971868.8804086, 
+                    "spatialReference" : {
+                      "wkid" : 102100
+                    }
+                  }, 
+                  "units" : "esriMeters", 
+                  "supportedImageFormatTypes" : "PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP", 
+                  "documentInfo" : {
+                    "Title" : "World Street Map", 
+                    "Author" : "ESRI", 
+                    "Comments" : "", 
+                    "Subject" : "streets, highways, major roads, railways, water features, administrative boundaries, cities, parks, protected areas, landmarks ", 
+                    "Category" : "transportation(Transportation Networks) ", 
+                    "Keywords" : "World, Global, 2009, Japan, UNEP-WCMC", 
+                    "Credits" : ""
+                  }, 
+                  "capabilities" : "Map"
+                };
+
+        function init(){
+            //The max extent for spherical mercator
+            var maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
+            
+            //Max extent from layerInfo above            
+            var layerMaxExtent = new OpenLayers.Bounds(
+                layerInfo.fullExtent.xmin, 
+                layerInfo.fullExtent.ymin, 
+                layerInfo.fullExtent.xmax, 
+                layerInfo.fullExtent.ymax  
+            );
+            
+            var resolutions = [];
+            for (var i=0; i<layerInfo.tileInfo.lods.length; i++) {
+                resolutions.push(layerInfo.tileInfo.lods[i].resolution);
+            }
+            
+            map = new OpenLayers.Map('map', {
+                maxExtent: maxExtent,
+                StartBounds: layerMaxExtent,
+                units: (layerInfo.units == "esriFeet") ? 'ft' : 'm',
+                resolutions: resolutions,
+                tileSize: new OpenLayers.Size(layerInfo.tileInfo.width, layerInfo.tileInfo.height),                
+                projection: 'EPSG:' + layerInfo.spatialReference.wkid
+            });
+            
+            
+            
+            cacheLayer = new OpenLayers.Layer.ArcGISCache( "AGSCache",
+                    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
+                        isBaseLayer: true,
+
+                        //From layerInfo above                        
+                        resolutions: resolutions,                        
+                        tileSize: new OpenLayers.Size(layerInfo.tileInfo.cols, layerInfo.tileInfo.rows),                        
+                        tileOrigin: new OpenLayers.LonLat(layerInfo.tileInfo.origin.x , layerInfo.tileInfo.origin.y),                        
+                        maxExtent: layerMaxExtent,                        
+                        projection: 'EPSG:' + layerInfo.spatialReference.wkid
+                    });
+
+            
+            // create Google Mercator layers
+            testLayer = new OpenLayers.Layer.Google(
+                "Google Streets",
+                {'sphericalMercator': true}
+            );
+            
+            map.addLayers([testLayer, cacheLayer]);
+            
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl( new OpenLayers.Control.MousePosition() );
+            
+            map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
+        }
+    </script>
+  </head>
+  <body onload="init()">
+      <h1 id="title">OpenLayers ArcGIS Cache Example (MapServer Access)</h1>
+
+    <div id="tags">
+        arcgis, arcgiscache, cache, tms
+    </div>
+
+    <p id="shortdesc">
+        Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt configuration, and standard tile access.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>This example demonstrates using the ArcGISCache layer for 
+        accessing ESRI's ArcGIS Server (AGS) Map Cache tiles through 
+        an AGS MapServer.  Toggle the visibility of the AGS layer to
+        demonstrate how the two maps are lined up correctly.</p>
+        
+         <h2>Notes on this layer</h2>
+        <p>A few attempts have been made at this kind of layer before. See 
+        <a href="http://trac.osgeo.org/openlayers/ticket/1967">here</a> and 
+        <a href="http://trac.osgeo.org/openlayers/browser/sandbox/tschaub/arcgiscache/lib/OpenLayers/Layer/ArcGISCache.js">here</a>.
+        A problem the users encounter is that the tiles seem to "jump around".
+        This is due to the fact that the max extent for the cached layer actually
+        changes at each zoom level due to the way these caches are constructed.
+        We have attempted to use the resolutions, tile size, and tile origin
+        from the cache meta data to make the appropriate changes to the max extent
+        of the tile to compensate for this behavior.</p>
+        You will need to know:
+        <ul>
+            <li>Max Extent: The max extent of the layer</li>
+            <li>Resolutions: An array of resolutions, one for each zoom level</li>
+            <li>Tile Origin: The location of the tile origin for the cache in the upper left.</li>
+            <li>Tile Size: The size of each tile in the cache. Commonly 256 x 256</li>
+        </ul>
+        <p>It's important that you set the correct values in your layer, and these
+        values will differ from layer to layer. You can find these values for your 
+        layer in a metadata page in ArcGIS Server. 
+        (ie. <a href="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer">http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer</a>)</p>
+        <ul>
+            <li>Max Extent: Full Extent</li>
+            <li>Resolutions: Tile Info -> Levels of Detail -> Resolution</li>
+            <li>Tile Origin: Origin -> X,Y</li>
+            <li>Tile Size: Tile Info -> Height,Width</li>
+        </ul>
+        
+        <h2> Other Examples </h2>
+        <p>This is one of three examples for this layer.  You can also configure this
+        layer to use <a href="arcgiscache_direct.html">prebuilt tiles in a file store
+         (not a live server).</a> It is also  possible to let this
+          <a href="arcgiscache_jsonp.html">layer 'auto-configure' itself using the
+          capabilities json object from the server itself when using a live ArcGIS server.</a>
+        </p>
+    </div>
+  </body>
+</html>

examples/arcgiscache_direct.html

@@ -0,0 +1,106 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>ArcGIS Server Map Cache Example (Direct Access)</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" type="text/javascript"></script>
+        <script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
+        <script type="text/javascript">
+        /* First 4 variables extracted from conf.xml file */
+        
+            /* Tile layers & map MUST have same projection */
+            var proj='EPSG:26915';
+        
+        
+            /* Layer can also accept serverResolutions array
+             * to deal with situation in which layer resolution array & map resolution
+             * array are out of sync*/
+            var mapResolutions = [33.0729828126323,16.9333672000677,8.46668360003387,4.23334180001693,2.11667090000847,1.05833545000423];
+
+            /* For this example this next line is not really needed, 256x256 is default.
+             * However, you would need to change this if your layer had different tile sizes */
+            var tileSize = new OpenLayers.Size(256,256);
+            
+            /* Tile Origin is required unless it is the same as the implicit map origin
+             * which can be affected by several variables including maxExtent for map or base layer */
+            var agsTileOrigin = new OpenLayers.LonLat(-5120900,9998100);
+            
+            /* This can really be any valid bounds that the map would reasonably be within */
+            /*  var mapExtent = new OpenLayers.Bounds(293449.454286,4307691.661132,314827.830376,4323381.484178); */
+            var mapExtent = new OpenLayers.Bounds(289310.8204,4300021.937,314710.8712,4325421.988);
+            
+            var aerialsUrl = 'http://serverx.esri.com/arcgiscache/dgaerials/Layers/_alllayers';
+            var roadsUrl = 'http://serverx.esri.com/arcgiscache/DG_County_roads_yesA_backgroundDark/Layers/_alllayers';
+            
+            var map;
+            function init(){
+                map = new OpenLayers.Map('map', {
+                    maxExtent:mapExtent,
+                    controls: [
+                        new OpenLayers.Control.Navigation(),
+                        new OpenLayers.Control.LayerSwitcher(), 
+                        new OpenLayers.Control.PanZoomBar(),
+                        new OpenLayers.Control.MousePosition()]
+                });
+                
+                var baseLayer = new OpenLayers.Layer.ArcGISCache('Aerials', aerialsUrl, {
+                    tileOrigin: agsTileOrigin,
+                    resolutions: mapResolutions,
+                    sphericalMercator: true,
+                    maxExtent: mapExtent,
+                    useArcGISServer: false,
+                    isBaseLayer: true,
+                    type: 'jpg',
+                    projection: proj
+                });
+                var overlayLayer = new OpenLayers.Layer.ArcGISCache('Roads', roadsUrl, {
+                    tileOrigin: agsTileOrigin,
+                    resolutions: mapResolutions,
+                    sphericalMercator: true,
+                    maxExtent: mapExtent,
+                    useArcGISServer: false,
+                    isBaseLayer: false,
+                    projection: proj
+                });
+                map.addLayers([baseLayer, overlayLayer]);
+                
+                //map.zoomToExtent(new OpenLayers.Bounds(295892.34, 4308521.69, 312825.71, 4316988.37));
+                map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">ArcGIS Server Map Cache Example (Direct Access)</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrates the basic initialization of the ArcGIS Cache layer using a prebuilt configuration, and direct tile access from a file store.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+        
+        <div id="docs">
+            <p>This example demonstrates using the ArcGISCache layer for 
+            accessing ESRI's ArcGIS Server (AGS) Map Cache tiles directly 
+            via the folder structure and HTTP.  Toggle the visibility of the AGS layer to
+            demonstrate how the two maps are lined up correctly.</p>
+
+            <h2>Notes on this Layer</h2>
+            <p>It's important that you set the correct values in your layer, and these
+            values will differ between tile sets. You can find these values for your 
+            layer in conf.xml at the root of your cache. 
+            (ie. <a href="http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml">http://serverx.esri.com/arcgiscache/dgaerials/Layers/conf.xml</a>)</p>
+
+            <p>For fused map caches this is often http:<i>ServerName</i>/arcgiscache/<i>MapServiceName</i>/Layers <br />
+            For individual layer caches this is often  http:<i>ServerName</i>/arcgiscache/<i>LayerName</i>/Layers </p>
+            
+            <h2> Other Examples </h2>
+            <p>This is one of three examples for this layer.  You can also configure this
+            layer to use <a href="arcgiscache_ags.html">prebuilt tiles from a live server.</a> It is also
+            possible to let this <a href="arcgiscache_jsonp.html">layer 'auto-configure' itself using the capabilities json object from the server itself when using a live ArcGIS server.</a>
+            </p>
+        </div>
+    </body>
+</html>

examples/arcgiscache_jsonp.html

@@ -0,0 +1,108 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</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="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
+    
+    <!-- This is to simplify making the JSONP request for this example -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    
+    <script type="text/javascript">
+        var map,
+            layerURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
+        
+        function init() {
+            var jsonp_url = layerURL + '?f=json&pretty=true&callback=?';
+            $.getJSON(jsonp_url, function(data) {                
+                initMap(data);
+            });
+        }
+
+        function initMap(layerInfo){
+            /*
+             * The initialize function in this layer has the ability to automatically configure
+             * itself if given the JSON capabilities object from the ArcGIS map server.
+             * This hugely simplifies setting up a new layer, and switching basemaps when using this technique.
+             *
+             * see the 'initialize' function in ArcGISCache.js, or 
+             * see the other two ArcGISCache.js examples for direct manual configuration options
+             *
+             */
+            var baseLayer = new OpenLayers.Layer.ArcGISCache("AGSCache", layerURL, {
+                layerInfo: layerInfo
+            });
+            
+            /*
+             * Make sure our baselayer and our map are synced up
+             */
+            map = new OpenLayers.Map('map', { 
+                maxExtent: baseLayer.maxExtent,
+                units: baseLayer.units,
+                resolutions: baseLayer.resolutions,
+                numZoomLevels: baseLayer.numZoomLevels,
+                tileSize: baseLayer.tileSize,
+                displayProjection: baseLayer.displayProjection,
+                StartBounds: baseLayer.initialExtent                
+            });
+            map.addLayers([baseLayer]);
+            
+            
+            //overlay test layer
+            //http://openlayers.org/dev/examples/web-mercator.html
+            var wms = new OpenLayers.Layer.WMS("Highways",
+                "http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StateCityHighway_USA/MapServer/WMSServer", 
+                {layers: "2", format: "image/gif", transparent: "true"}, 
+                { isBaseLayer: false, wrapDateLine: false } 
+            );
+            map.addLayers([wms]);
+
+            
+            
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.MousePosition() );            
+            //map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
+            map.zoomToExtent(new OpenLayers.Bounds(-8725663.6225564, 4683718.6735907, -8099491.4868444, 4996804.7414467));
+        }
+    </script>
+  </head>
+  <body onload="init()">
+      <h1 id="title">OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</h1>
+
+    <div id="tags">
+        arcgis, arcgiscache, cache, tms, jsonp
+    </div>
+
+    <p id="shortdesc">
+        Demonstrates the basic initialization of the ArcGIS Cache layer by using the server capabilities object.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>This example demonstrates using the ArcGISCache layer for 
+        accessing ESRI's ArcGIS Server (AGS) Map Cache tiles normally through 
+        a live AGS MapServer.  Toggle the visibility of the overlay to
+        demonstrate how the two layers are lined up correctly.</p>
+        
+        <h2>Notes on this Layer</h2>
+        <p>
+        This method automatically configures the layer using the capabilities object 
+        generated by the server itself.  This page shows how to construct the url for the server capabilities object,
+        retrieve it using JSONP (and jQuery), and pass it in during construction.  Note that in this case, 
+        the layer is constructed before the map.  This approach greatly simplifies the
+        configuration of your map, and works best when all your tiles / overlays are similarly laid out.
+        If you are using a live AGS map server for your layer, it can be helpful to check your
+        server configuration using this technique before trying one of the other examples for this layer.  
+        </p>
+        
+        <h2> Other Examples </h2>
+        <p>This is one of three examples for this layer.  You can also configure this
+        layer to use <a href="arcgiscache_direct.html">prebuilt tiles in a file store (not a live server).</a>  
+        As well a retrieve <a href="arcgiscache_ags.html">tiles from a live server.</a> 
+        </p>
+    </div>
+  </body>
+</html>

examples/arcims-thematic.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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>ArcIMS Thematic Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -58,6 +60,7 @@
     <h1 id="title">ArcIMS Thematic Example</h1>
 
     <div id="tags">
+        ESRI, ArcIMS, ArcXML, style, thematic, chloropleth, representation
     </div>
     <p id="shortdesc">
         Shows the advanced use of OpenLayers using a thematic ArcIMS layer

examples/arcims.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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>ArcIMS Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -33,6 +35,7 @@
     <h1 id="title">ArcIMS Example</h1>
 
     <div id="tags">
+        ESRI, ArcIMS
     </div>
     <p id="shortdesc">
         Shows the basic use of OpenLayers using an ArcIMS layer

examples/attribution.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Attribution Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -34,7 +36,7 @@
         <h1 id="title">Attribution Example</h1>
 
         <div id="tags">
-            copyright watermark logo attribution
+            copyright, watermark, logo, attribution
         </div>
 
         <p id="shortdesc">
@@ -47,7 +49,7 @@
             This is an example of how to add an attribution block to the OpenLayers window.  In order to use an
             attribution block, an attribution parameter must be set in each layer that requires attribution. In
             addition, an attribution control must be added to the map, though one is added to all OpenLayers Maps by default. 
-            Be aware that this is a layer *option*: the options hash goes in
+            Be aware that this is a layer <strong>option</strong>: the options hash goes in
             different places depending on the layer type you are using.  
         </div>
     </body>

examples/baseLayers.html

@@ -1,96 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <title>OpenLayers Base Layers 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">
-            #controls
-            {
-                width: 512px;
-            }
-        </style>
-
-        <!-- this gmaps key generated for http://openlayers.org/dev/ -->
-        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
-        <!-- Localhost key -->
-        <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
-        <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
-        <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
-        <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
-        <script src="../lib/OpenLayers.js"></script>
-        <script type="text/javascript">
-            var lon = 5;
-            var lat = 40;
-            var zoom = 5;
-            var map, markers;
-            var barcelona = new OpenLayers.LonLat(2.13134765625,
-                                                  41.37062534198901);
-            var madrid = new OpenLayers.LonLat(-3.6968994140625,
-                                              40.428314208984375);
-
-            function init(){
-                map = new OpenLayers.Map( 'map' );
-
-                var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                          "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                          {layers: 'basic'} );
-                var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });
-                var ve = new OpenLayers.Layer.VirtualEarth( "VE");
-                var yahoo = new OpenLayers.Layer.Yahoo( "Yahoo");
-                var mm = new OpenLayers.Layer.MultiMap( "MultiMap");
-
-
-                map.addLayers([wms, google, ve, yahoo, mm]);
-
-                markers = new OpenLayers.Layer.Markers("markers");
-                map.addLayer(markers);
-
-                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
-                map.addControl( new OpenLayers.Control.LayerSwitcher() );
-                map.addControl( new OpenLayers.Control.MousePosition() );
-
-            }
-
-            function add() {
-                var url = 'http://www.openlayers.org/dev/img/marker.png';
-                var sz = new OpenLayers.Size(21, 25);
-                var calculateOffset = function(size) {
-                                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
-                                 };
-                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
-                marker = new OpenLayers.Marker(barcelona, icon);
-                markers.addMarker(marker);
-
-                marker = new OpenLayers.Marker(madrid, icon.clone());
-                markers.addMarker(marker);
-
-            }
-
-            function remove() {
-                markers.removeMarker(marker);
-            }
-
-        </script>
-    </head>
-    <body onload="init()">
-        <h1 id="title">Base Layers Example</h1>
-
-        <div id="tags">
-        </div>
-
-        <p id="shortdesc">
-           This example shows the use base layers from multiple commercial map image providers.
-        </p>
-
-        <div id="controls">
-            <div id="map" class="smallmap"></div>
-
-            <div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
-            <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
-        </div>
-        
-        <div id="docs">
-       </div>
-    </body>
-</html>

examples/behavior-fixed-http-gml.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Vector Behavior Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -31,6 +33,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">Vector Behavior Example (Fixed/HTTP/GML)</h1>
+        <div id="tags">
+            vector, strategy, strategies, protocoll, advanced, gml, http, fixed
+        </div>
         <p id="shortdesc">
             Vector layer with a Fixed strategy, HTTP protocol, and GML format.
         </p>

examples/bing-tiles.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <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 Bing Tiles 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 {
+        left: 5px;
+        right: inherit;
+        bottom: 5px; 
+    }
+    </style>
+  </head>
+  <body>
+    <h1 id="title">Basic Bing Tiles Example</h1>
+
+    <div id="tags">
+        bing tiles
+    </div>
+
+    <div id="shortdesc">Use Bing with direct tile access</div>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>This example shows a very simple map with Bing layers that use
+        direct tile access through Bing Maps REST Services.</p><p>See
+        <a target="_blank" href="bing-tiles.js">bing-tiles.js</a> for the
+        source code.</p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="bing-tiles.js"></script>
+  </body>
+</html>

examples/bing-tiles.js

@@ -0,0 +1,29 @@
+// API key for http://openlayers.org. Please get your own at
+// http://bingmapsportal.com/ and use that instead.
+var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+
+var map = new OpenLayers.Map( 'map');
+
+var road = new OpenLayers.Layer.Bing({
+    key: apiKey,
+    type: "Road",
+    // custom metadata parameter to request the new map style - only useful
+    // before May 1st, 2011
+    metadataParams: {mapVersion: "v1"}
+});
+var aerial = new OpenLayers.Layer.Bing({
+    key: apiKey,
+    type: "Aerial"
+});
+var hybrid = new OpenLayers.Layer.Bing({
+    key: apiKey,
+    type: "AerialWithLabels",
+    name: "Bing Aerial With Labels"
+});
+
+map.addLayers([road, aerial, hybrid]);
+map.addControl(new OpenLayers.Control.LayerSwitcher());
+map.setCenter(new OpenLayers.LonLat(-71.147, 42.472).transform(
+    new OpenLayers.Projection("EPSG:4326"),
+    map.getProjectionObject()
+), 12);

examples/bing.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 Bing Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -12,7 +14,14 @@
         var map;
  
         function init(){
+            // setting restrictedExtent so that we can use the 
+            // VirtualEarth-layers, see e.g. 
+            // http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/VirtualEarth-js.html
+            var restrictedExtent = new OpenLayers.Bounds(-180, -90, 
+                180, 90);
+            
             map = new OpenLayers.Map("map");
+            
             map.addControl(new OpenLayers.Control.LayerSwitcher());
 
             var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
@@ -35,7 +44,9 @@
   <body onload="init()">
     <h1 id="title">Bing Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        Bing, Microsoft, Virtual Earth
+    </div>
 
     <p id="shortdesc">
         Demonstrates the use of Bing layers.

examples/boxes-vector.html

@@ -1,6 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-        <title>OpenLayers Boxes Example</title>
+    <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 Boxes Vector 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>
@@ -38,9 +40,10 @@
         </script>
     </head>
     <body onload="init()">
-        <h1 id="title">Boxes Example</h1>
+        <h1 id="title">Boxes Example Vector</h1>
 
         <div id="tags">
+            box, vector, annotation
         </div>
 
         <p id="shortdesc">

examples/boxes.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Boxes Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -40,6 +42,7 @@
         <h1 id="title">Boxes Example</h1>
 
         <div id="tags">
+            box, annotation
         </div>
 
         <p id="shortdesc">

examples/browser-name.html

@@ -1,89 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers 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">
-        // making this a global variable so that it is accessible for
-        // debugging/inspecting in Firebug
-        var map = null;
-
-        function init(){
-
-            //set title name to include Browser Detection
-            // this is the only way to test the functionality
-            // of the getBrowserName() function
-            //
-            var header = OpenLayers.Util.getElement("browserHeader");
-            header.innerHTML = "(browser: ";
-            var browserCode = OpenLayers.Util.getBrowserName();
-            switch (browserCode) {
-                case "opera":
-                    browserName = "Opera";
-                    break;
-                case "msie":
-                    browserName = "Internet Explorer";
-                    break;
-                case "safari":
-                    browserName = "Safari";
-                    break;
-                case "firefox":
-                    browserName = "FireFox";
-                    break;
-                case "mozilla":
-                    browserName = "Mozilla";
-                    break;
-                default:
-                    browserName = "detection error"
-                    break;
-            }
-            header.innerHTML += browserName + ")";
-
-            map = new OpenLayers.Map('map');
-
-            var options = {
-                            resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
-            };
-
-            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'},
-                options);
-
-            var options2 = {
-                            resolutions: [0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101]
-            };
-            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"}, options2);
-
-            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
-                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
-                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
-                         "prov_bound,fedlimit,rail,road,popplace",
-                 transparent: "true", format: "image/png"},
-                 {minResolution: 0.17578125,
-                  maxResolution: 0.703125});
-
-            map.addLayers([ol_wms, jpl_wms, dm_wms]);
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-            map.zoomToMaxExtent();
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title" style="display:inline;">Example Showing Browser Name</h1>
-    <h3 id="browserHeader" style="display:inline;"></h3>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Demonstrate a simple map that shows the browser name.
-    </p>
-
-    <div id="map" class="smallmap"></div>
-
-    <div id="docs"></div>
-  </body>
-</html>

examples/browser.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <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 Browser Detection</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="browser.js"></script>
+    <style type="text/css">
+        .olControlAttribution {
+            bottom: 5px;
+        }
+
+        .tester {
+            margin: 3px;
+        }
+    </style>
+    <script type="text/javascript">
+        function init() {
+            var result = document.getElementById('result');
+            result.innerHTML = result.innerHTML + "Browser CodeName: " + navigator.appCodeName + '<br>';
+            result.innerHTML = result.innerHTML + "Browser Name: " + navigator.appName + '<br>';
+            result.innerHTML = result.innerHTML + "Browser Version: " + navigator.appVersion + '<br>';
+            result.innerHTML = result.innerHTML + "Cookies Enabled: " + navigator.cookieEnabled + '<br>';
+            result.innerHTML = result.innerHTML + "Platform: " + navigator.platform + '<br>';
+            result.innerHTML = result.innerHTML + 'User agent: ' + navigator.userAgent + '<br>';
+            divResult('mouse', 'click', null, result);
+            divResult('mouse', 'dblclick', null, result);
+            divResult('mouse', 'mousedown', null, result);
+            divResult('mouse', 'mouseup', null, result);
+            divResult('mouse', 'mouseover', null, result);
+            divResult('mouse', 'mousemove', null, result);
+            divResult('mouse', 'mouseout', null, result);
+
+            divResult('key', 'keypress', null, result);
+            divResult('key', 'keydown', null, result);
+            divResult('key', 'keyup', null, result);
+
+            divResult('HTML', 'load', null, result);
+            divResult('HTML', 'unload', window, result);
+            divResult('HTML', 'abort', null, result);
+            divResult('HTML', 'error', null, result);
+
+            divResult('view', 'resize', window, result);
+            divResult('view', 'scroll', null, result);
+
+            divResult('form', 'submit', null, result);
+            divResult('form', 'reset', null, result);
+
+            divResult('form control', 'select', null, result);
+            divResult('form control', 'change', null, result);
+
+            divResult('activation', 'focus', null, result);
+            divResult('activation', 'blur', null, result);
+
+            divResult('touch', 'touchstart', null, result);
+            divResult('touch', 'touchend', null, result);
+            divResult('touch', 'touchmove', null, result);
+            divResult('touch', 'touchcancel', null, result);
+
+            divResult('gesture', 'gesturestart', null, result);
+            divResult('gesture', 'gesturechange', null, result);
+            divResult('gesture', 'gestureend', null, result);
+
+            divResult('HTML5', 'hashchange', document.body, result);
+            divResult('HTML5', 'online', document.body, result);
+            divResult('HTML5', 'offline', document.body, result);
+            divResult('HTML5', 'message', window, result);
+            divResult('HTML5', 'undo', document.body, result);
+            divResult('HTML5', 'redo', document.body, result);
+            divResult('HTML5', 'storage', window, result);
+            divResult('HTML5', 'popstate', window, result);
+            divResult('HTML5', 'canplay', document.createElement('video'), result);
+            divResult('HTML5', 'seeking', document.createElement('video'), result);
+            divResult('HTML5', 'seekend', document.createElement('video'), result);
+
+            divResult('orientation', 'deviceorientation', window, result);
+            divResult('orientation', 'mozorientation', window, result);
+            divResult('orientation', 'devicemotion', window, result);
+        }
+    </script>
+</head>
+<body onload="init()">
+<h1 id="title">Browser detection</h1>
+
+<div id="tags">
+    browser, vendor, mobile, events, HTML5, gesture, touch
+</div>
+
+<p id="shortdesc">
+    The goal of this script is to inform about the capacity of the browser used by the user.
+</p>
+
+<div id="docs">
+    <p>
+        See the <a href="browser.js" target="_blank">
+        browser.js source</a> to see how this is done.
+    </p>
+</div>
+
+<h1>Your browser information</h1>
+
+<div id="result">
+</div>
+
+<h1>Click or touch the red square to get information about the selected events</h1>
+
+<div>
+    <div class="tester">
+        <INPUT TYPE=CHECKBOX ID="clickID" checked>click<BR>
+        <INPUT TYPE=CHECKBOX ID="dblclickID">dblclick<BR>
+        <INPUT TYPE=CHECKBOX ID="mousedownID">mousedown<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseupID">mouseup<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseoverID">mouseover<BR>
+        <INPUT TYPE=CHECKBOX ID="mousemoveID">mousemove<BR>
+        <INPUT TYPE=CHECKBOX ID="mouseoutID">mouseout<BR>
+        <INPUT TYPE=CHECKBOX ID="touchstartID">touchstart<BR>
+        <INPUT TYPE=CHECKBOX ID="touchendID">touchend<BR>
+        <INPUT TYPE=CHECKBOX ID="touchmoveID">touchmove<BR>
+        <INPUT TYPE=CHECKBOX ID="touchcancelID">touchcancel<BR>
+        <INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
+        <INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
+        <INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
+    </div>
+
+    <div style="height: 200px;width: 200px;" class="tester">
+        <div id="box" style="height: 200px; width: 200px; background: none repeat scroll 0% 0% red; "
+             onclick="click(event)"
+             ondblclick="dblclick(event)"
+             onmousedown="mousedown(event)"
+             onmouseup="mouseup(event)"
+             onmouseover="mouseover(event)"
+             onmousemove="mousemove(event)"
+             onmouseout="mouseout(event)"
+             ontouchstart="touchstart(event)"
+             ontouchend="touchend(event)"
+             ontouchmove="touchmove(event)"
+             ontouchcancel="touchcancel(event)"
+             ongesturestart="gesturestart(event)"
+             ongesturechange="gesturechange(event)"
+             ongestureend="gestureend(event)">
+        </div>
+    </div>
+
+    <div id="log" class="tester"></div>
+</div>
+
+
+</body>
+</html>

examples/browser.js

@@ -0,0 +1,241 @@
+var isEventSupported = (function(undef) {
+
+    var TAGNAMES = {
+        'select':'input',
+        'change':'input',
+        'submit':'form',
+        'reset':'form',
+        'error':'img',
+        'load':'img',
+        'abort':'img'
+    };
+
+    function isEventSupported(eventName, element) {
+        element = element || document.createElement(TAGNAMES[eventName] || 'div');
+        eventName = 'on' + eventName;
+
+        var isSupported = (eventName in element);
+
+        if (!isSupported) {
+            // if it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
+            if (!element.setAttribute) {
+                element = document.createElement('div');
+            }
+            if (element.setAttribute && element.removeAttribute) {
+                element.setAttribute(eventName, '');
+                isSupported = typeof element[eventName] == 'function';
+
+                // if property was created, "remove it" (by setting value to `undefined`)
+                if (typeof element[eventName] != 'undefined') {
+                    element[eventName] = undef;
+                }
+                element.removeAttribute(eventName);
+            }
+        }
+
+        element = null;
+        return isSupported;
+    }
+
+    return isEventSupported;
+})();
+
+function divResult(category, name, element, div) {
+    div.innerHTML = div.innerHTML + category + " " + name + ": ";
+    div.innerHTML = div.innerHTML + (
+            isEventSupported(name, element)
+                    ? '<span style="background-color:green;color:white;">true</span></td>'
+                    : '<span style="background-color:red;color:white;">false</span></td>'
+            );
+    div.innerHTML = div.innerHTML + "<br>";
+}
+var counter = 1;
+
+function log(title, detail) {
+    var logDiv = document.getElementById("log");
+    idString = "'id" + counter + "'";
+    var newlink = document.createElement('a');
+    newlink.setAttribute('href', "javascript:toggle_visibility(" + idString + ")");
+    newlink.innerHTML = counter + ". " + title;
+    var br1 = document.createElement('br');
+    logDiv.appendChild(newlink);
+    logDiv.appendChild(br1);
+
+    var childDiv = document.createElement('div');
+    childDiv.setAttribute("id", idString.replace("'", "").replace("'", ""));
+    childDiv.setAttribute("style", 'display: none; margin-left : 5px;');
+    childDiv.innerHTML = detail;
+    var br2 = document.createElement('br');
+    logDiv.appendChild(childDiv);
+
+    counter = counter + 1;
+}
+
+function inspect(obj) {
+    if (typeof obj === "undefined") {
+        return "undefined";
+    }
+    var _props = [];
+
+    for (var i in obj) {
+        _props.push(i + " : " + obj[i]);
+    }
+    return " {" + _props.join(",<br>") + "} ";
+}
+
+function click(e) {
+    if (document.getElementById("clickID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function dblclick(e) {
+    if (document.getElementById("dblclickID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mousedown(e) {
+    if (document.getElementById("mousedownID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseup(e) {
+    if (document.getElementById("mouseupID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseover(e) {
+    if (document.getElementById("mouseoverID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mousemove(e) {
+    if (document.getElementById("mousemoveID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function mouseout(e) {
+    if (document.getElementById("mouseoutID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchstart(e) {
+    if (document.getElementById("touchstartID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchend(e) {
+    if (document.getElementById("touchendID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchmove(e) {
+    if (document.getElementById("touchmoveID").checked) {
+        var targetEvent = e.touches.item(0);
+        var box = document.getElementById("box");
+        box.style.left = targetEvent.clientX + "px";
+        box.style.top = targetEvent.clientY + "px";
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function touchcancel(e) {
+    if (document.getElementById("touchcancelID").checked) {
+        var box = document.getElementById("box");
+        var result = inspect(e);
+        for (var i = 0; i < e.touches.length; i++) {
+            result = result + "<br> Touches nr." + i + " <br>" + inspect(e.touches[i]);
+        }
+        log(e.type, result);
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gesturestart(e) {
+    if (document.getElementById("gesturestartID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gesturechange(e) {
+    if (document.getElementById("gesturechangeID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function gestureend(e) {
+    if (document.getElementById("gestureendID").checked) {
+        var box = document.getElementById("box");
+        log(e.type, inspect(e));
+        if (e.preventDefault) e.preventDefault();
+    }
+    return false;
+}
+
+function toggle_visibility(id) {
+    var e = document.getElementById(id);
+    if (e.style.display == 'block') {
+        e.style.display = 'none';
+    } else {
+        e.style.display = 'block';
+    }
+}
+
+
+

examples/buffer.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Buffer Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -33,6 +35,7 @@
         <h1 id="title">Buffer Example</h1>
 
         <div id="tags">
+            buffer, performance, tile
         </div>
 
         <p id="shortdesc">

examples/canvas-hit-detection.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Canvas Hit Detection Example</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <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>
+    </head>
+    <body>
+        <h1 id="title">Feature Hit Detection with Canvas</h1>
+        <p id="shortdesc">
+            Demonstrates detection of feature hits with the canvas renderer.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                Click on the features above to see them selected.  This example 
+                uses the Canvas renderer so it only works on browsers where 
+                canvas is supported.
+            </p>
+            <p>
+                View the <a href="canvas-hit-detection.js" target="_blank">canvas-hit-detection.js</a>
+                source to see how this is done.
+            </p>
+        </div>
+        <script src="canvas-hit-detection.js"></script>
+    </body>
+</html>

examples/canvas-hit-detection.js

@@ -0,0 +1,88 @@
+
+// create some sample features
+var Feature = OpenLayers.Feature.Vector;
+var Geometry = OpenLayers.Geometry;
+var features = [
+    new Feature(new Geometry.Point(-90, 45)),
+    new Feature(
+        new Geometry.Point(0, 45),
+        {cls: "one"}
+    ),
+    new Feature(
+        new Geometry.Point(90, 45),
+        {cls: "two"}
+    ),
+    new Feature(
+        Geometry.fromWKT("LINESTRING(-110 -60, -80 -40, -50 -60, -20 -40)")
+    ),
+    new Feature(
+        Geometry.fromWKT("POLYGON((20 -20, 110 -20, 110 -80, 20 -80, 20 -20), (40 -40, 90 -40, 90 -60, 40 -60, 40 -40))")
+    )    
+];
+
+// create rule based styles
+var Rule = OpenLayers.Rule;
+var Filter = OpenLayers.Filter;
+var style = new OpenLayers.Style({
+    pointRadius: 10,
+    strokeWidth: 3,
+    strokeOpacity: 0.7,
+    strokeColor: "navy",
+    fillColor: "#ffcc66",
+    fillOpacity: 1
+}, {
+    rules: [
+        new Rule({
+            filter: new Filter.Comparison({
+                type: "==",
+                property: "cls",
+                value: "one"
+            }),
+            symbolizer: {
+                externalGraphic: "../img/marker-blue.png"
+            }
+        }),
+        new Rule({
+            filter: new Filter.Comparison({
+                type: "==",
+                property: "cls",
+                value: "two"
+            }),
+            symbolizer: {
+                externalGraphic: "../img/marker-green.png"
+            }
+        }),
+        new Rule({
+            elseFilter: true,
+            symbolizer: {
+                graphicName: "circle"
+            }
+        })
+    ]
+});
+
+var layer = new OpenLayers.Layer.Vector(null, {
+    styleMap: new OpenLayers.StyleMap({
+        "default": style,
+        select: {
+            fillColor: "red",
+            pointRadius: 13,
+            strokeColor: "yellow",
+            strokeWidth: 3
+        }
+    }),
+    isBaseLayer: true,
+    renderers: ["Canvas"]
+});
+layer.addFeatures(features);
+
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [layer],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 0
+});
+
+var select = new OpenLayers.Control.SelectFeature(layer);
+map.addControl(select);
+select.activate();

examples/canvas-inspector.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Canvas Inspector</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="Jugl.js"></script>
+        <style>
+            #template {
+                display: none;
+            }
+            #inspector table {
+                border-right: 1px solid #666;
+                border-bottom: 1px solid #666;
+            }
+            #inspector table td {
+                font-size: 9px;
+                text-align: center;
+                width: 60px;
+                height: 60px;
+                border-top: 1px solid #666;
+                border-left: 1px solid #666;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Canvas Inspector</h1>
+        <p id="shortdesc">
+            Displays pixel values for canvas context.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                View the <a href="canvas-inspector.js" target="_blank">canvas-inspector.js</a>
+                source to see how this is done.
+            </p>
+        </div>
+        <div id="inspector">
+        </div>
+        <table id="template">
+            <tr jugl:repeat="row new Array(rows)">
+                <td jugl:repeat="col new Array(cols)" 
+                    jugl:attributes="id 'c' + repeat.col.index + 'r' + repeat.row.index">
+                    &nbsp;
+                </td>
+            </tr>
+        </table>
+        <script src="canvas-inspector.js"></script>
+    </body>
+</html>

examples/canvas-inspector.js

@@ -0,0 +1,91 @@
+
+var features = [
+
+    new OpenLayers.Feature.Vector(
+        OpenLayers.Geometry.fromWKT(
+            "LINESTRING(-90 90, 90 -90)"
+        ),
+        {color: "#0f0000"}
+    ),
+    
+    new OpenLayers.Feature.Vector(
+        OpenLayers.Geometry.fromWKT(
+            "LINESTRING(100 50, -100 -50)"
+        ),
+        {color: "#00ff00"}
+    )
+
+];
+
+var layer = new OpenLayers.Layer.Vector(null, {
+    styleMap: new OpenLayers.StyleMap({
+        strokeWidth: 3,
+        strokeColor: "${color}"
+    }),
+    isBaseLayer: true,
+    renderers: ["Canvas"],
+    rendererOptions: {hitDetection: true}
+});
+layer.addFeatures(features);
+
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [layer],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 0
+});
+
+var xOff = 2, yOff = 2;
+
+var rows = 1 + (2 * yOff);
+var cols = 1 + (2 * xOff);
+
+var template = new jugl.Template("template");
+template.process({
+    clone: true,
+    parent: "inspector",
+    context: {
+        rows: rows,
+        cols: cols
+    }
+});
+
+function isDark(r, g, b, a) {
+    a = a / 255;
+    var da = 1 - a;
+    // convert color values to decimal (assume white background)
+    r = (a * r / 255) + da;
+    g = (a * g / 255) + da;
+    b = (a * b / 255) + da;
+    // use w3C brightness measure
+    var brightness = (r * 0.299) + (g * 0.587) + (b * 0.144);
+    return brightness < 0.5;
+}
+
+var context = layer.renderer.canvas; //layer.renderer.hitContext;
+var size = map.getSize();
+map.events.on({
+    mousemove: function(event) {
+        var x = event.xy.x - 1; // TODO: fix this elsewhere
+        var y = event.xy.y;
+        if ((x >= xOff) && (x < size.w - xOff) && (y >= yOff) && (y < size.h - yOff)) {
+            var data = context.getImageData(x - xOff, y - yOff, rows, cols).data;
+            var offset, red, green, blue, alpha, cell;
+            for (var i=0; i<cols; ++i) {
+                for (var j=0; j<rows; ++j) {
+                    offset = (i * 4) + (j * 4 * cols);
+                    red = data[offset];
+                    green = data[offset + 1];
+                    blue = data[offset + 2];
+                    alpha = data[offset + 3];
+                    cell = document.getElementById("c" + i + "r" + j);
+                    cell.innerHTML = "R: " + red + "<br>G: " + green + "<br>B: " + blue + "<br>A: " + alpha;
+                    cell.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha / 255) + ")";
+                    cell.style.color = isDark(red, green, blue, alpha) ? "#ffffff" : "#000000";
+                }
+            }
+        }
+    }
+});
+
+

examples/canvas.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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>Canvas Renderer Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -9,6 +11,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">Canvas Renderer Example</h1>
+        <div id="tags">
+            canvas, renderer, advanced,
+        </div>
         <p id="shortdesc">
             Demonstrates the use of the canvas renderer with a vector layer.
         </p>

examples/canvas.js

@@ -43,9 +43,9 @@ function init() {
         protocol: new OpenLayers.Protocol.WFS({
             version: "1.1.0",
             srsName: "EPSG:900913",
-            url:  "http://demo.opengeo.org/geoserver/wfs",
+            url:  "http://v2.suite.opengeo.org/geoserver/wfs",
             featureType: "states",
-            featureNS: "http://www.openplans.org/topp"
+            featureNS: "http://usa.opengeo.org"
         }),
         styleMap: styleMap,
         renderers: ["Canvas", "SVG", "VML"]

examples/click-handler.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Click Handler Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -16,7 +18,7 @@
             #east {
                 position: absolute;
                 left: 370px;
-                top: 3em;
+                top: 4em;
             }
 
             table td {
@@ -156,6 +158,7 @@
         <div id="west">
     
             <div id="tags">
+                event, events, propagation,  advanced
             </div>
     
             <p id="shortdesc">

examples/click.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Click Event Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -65,17 +67,23 @@
         <h1 id="title">Click Event Example</h1>
 
         <div id="tags">
+            click control, double, doubleclick, double-click, event, events, 
+            propagation
         </div>
 
         <p id="shortdesc">
-            This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click. 
-
+            This example shows the use of the click handler and 
+            getLonLatFromViewPortPx functions to trigger events on mouse click. 
         </p>
 
         <div id="map" class="smallmap"></div>
     
         <div id="docs">
-            Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get two alerts.) This example click control shows you how to use it. 
+            Using the Click handler allows you to (for example) catch clicks 
+            without catching double clicks, something that standard browser 
+            events don't do for you. (Try double clicking: you'll zoom in, 
+            whereas using the browser click event, you would just get two 
+            alerts.) This example click control shows you how to use it. 
         </div>
     </body>
 </html>

examples/controls.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Map Controls Example</title>
 
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -24,24 +26,32 @@
                     
                 });
 
-
-                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                var ol_wms = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS",
                     "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                    {layers: 'basic'} );
-                var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                    "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                    {layers: "landsat7"});
-                var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
+                    {layers: 'basic'} 
+                );
+
+                var gwc = new OpenLayers.Layer.WMS(
+                    "Global Imagery",
+                    "http://maps.opengeo.org/geowebcache/service/wms",
+                    {layers: "bluemarble"},
+                    {tileOrigin: new OpenLayers.LonLat(-180, -90)}
+                );
+                var dm_wms = new OpenLayers.Layer.WMS(
+                    "DM Solutions Demo",
                     "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
                     {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                              "prov_bound,fedlimit,rail,road,popplace",
-                     transparent: "true", format: "image/png" });
+                     transparent: "true", format: "image/png"},
+                    {visibility: false}
+                );
 
-                jpl_wms.setVisibility(false);
-                dm_wms.setVisibility(false);
+                map.addLayers([ol_wms, gwc, dm_wms]);
 
-                map.addLayers([ol_wms, jpl_wms, dm_wms]);
-                if (!map.getCenter()) map.zoomToMaxExtent();
+                if (!map.getCenter()) {
+                    map.zoomToMaxExtent();
+                }
             }
         </script>
     </head>
@@ -49,14 +59,15 @@
         <h1 id="title">Map Controls Example</h1>
 
         <div id="tags">
+            control, basic
         </div>
 
         <p id="shortdesc">
             Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
         </p>
 
-        <a style="float:right" href="" id="permalink">Permalink</a>
         <div id="map" class="smallmap"></div>
+        <a href="#" id="permalink">Permalink</a>
 
         <div id="docs"></div>
     </body>

examples/cql-format.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+    <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 CQL Example
+        </title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            #cql {
+                width: 400px;
+            }
+            #output {
+                padding-top: 1em;
+                width: 512px;
+                height: 60px;
+                border: none;
+                color: #ff3333;
+            }
+        </style>
+        <script src="../lib/OpenLayers.js"></script>
+    </head>
+    <body>
+        <h1 id="title">CQL Filter Example</h1>
+        <div id="tags">
+            CQL, filter
+        </div>
+        <p id="shortdesc">
+            Demonstrate use the CQL filter.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                Enter text for a CQL filter to update the features displayed.
+                <br>
+                <form name="cql_form" id="cql_form">
+                    <label for="cql">CQL</label>
+                    <input id="cql" type="text" value="STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'">
+                    <input type="submit" value="update">
+                    <input type="reset" value="reset">
+                </form>
+                <textarea id="output"></textarea>
+            </p><p>
+                View the <a href="cql-format.js" target="_blank">cql-format.js source</a> 
+                to see how this is done.
+            </p>
+        </div>
+        <script src="cql-format.js"></script>
+        <script src="http://demo.opengeo.org/geoserver/wfs?service=WFS&amp;version=1.0.0&amp;request=GetFeature&amp;typename=topp:states&amp;outputFormat=json&amp;format_options=callback:loadFeatures" type="text/javascript"></script>
+    </body>
+</html>

examples/cql-format.js

@@ -0,0 +1,61 @@
+
+// use a CQL parser for easy filter creation
+var format = new OpenLayers.Format.CQL();
+
+// this rule will get a filter from the CQL text in the form
+var rule = new OpenLayers.Rule({
+    // We could also set a filter here.  E.g.
+    // filter: format.read("STATE_ABBR >= 'B' AND STATE_ABBR <= 'O'"),
+    symbolizer: {
+        fillColor: "#ff0000",
+        strokeColor: "#ffcccc",
+        fillOpacity: "0.5"
+    }    
+});
+
+var states = new OpenLayers.Layer.Vector("States", {
+    styleMap: new OpenLayers.StyleMap({
+        "default": new OpenLayers.Style(null, {rules: [rule]})
+    })
+});
+
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.WMS(
+            "OpenLayers WMS",
+            "http://maps.opengeo.org/geowebcache/service/wms",
+            {layers: "openstreetmap", format: "image/png"}
+        ),
+        states
+    ],
+    center: new OpenLayers.LonLat(-101, 39),
+    zoom: 3
+});
+
+// called when features are fetched
+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");
+var output = document.getElementById("output");
+function updateFilter() {
+    var filter;
+    try {
+        filter = format.read(cql.value);
+    } catch (err) {
+        output.value = err.message;
+    }
+    if (filter) {
+        output.value = "";
+        rule.filter = filter;
+        states.redraw();
+    }
+    return false;
+}
+updateFilter();
+var form = document.getElementById("cql_form");
+form.onsubmit = updateFilter;

examples/cross-origin.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Script Protocol Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <script src="../lib/OpenLayers.js"></script>
+    </head>
+    <body>
+        <h1 id="title">Script Protocol</h1>
+        <div id="tags">
+            protocol, script, cross origin, advanced
+        </div>
+        <p id="shortdesc">
+            Demonstrates the use of a script protocol for making feature requests 
+            cross origin.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>
+                In cases where a service returns serialized features and accepts
+                a named callback (e.g. http://example.com/features.json?callback=foo),
+                the script protocol can be used to read features without being
+                restricted by the same origin policy.
+            </p>
+            <p>
+                View the <a href="cross-origin.js" target="_blank">cross-origin.js</a>
+                source to see how this is done
+            </p>
+        </div>
+        <script src="cross-origin.js"></script>
+    </body>
+</html>

examples/cross-origin.js

@@ -0,0 +1,39 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.WMS(
+            "World Map",
+            "http://maps.opengeo.org/geowebcache/service/wms",
+            {layers: "bluemarble"}
+        ),
+        new OpenLayers.Layer.Vector("States", {
+            strategies: [new OpenLayers.Strategy.BBOX()],
+            protocol: new OpenLayers.Protocol.Script({
+                url: "http://suite.opengeo.org/geoserver/wfs",
+                callbackKey: "format_options",
+                callbackPrefix: "callback:",
+                params: {
+                    service: "WFS",
+                    version: "1.1.0",
+                    srsName: "EPSG:4326",
+                    request: "GetFeature",
+                    typeName: "world:cities",
+                    outputFormat: "json"
+                },
+                filterToParams: function(filter, params) {
+                    // example to demonstrate BBOX serialization
+                    if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
+                        params.bbox = filter.value.toArray();
+                        if (filter.projection) {
+                            params.bbox.push(filter.projection.getCode());
+                        }
+                    }
+                    return params;
+                }
+            })
+        })
+    ],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 1
+});
+

examples/custom-control-point.html

@@ -1,56 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers Custom Control Point Examle</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 lon = 5;
-        var lat = 40;
-        var zoom = 5;
-        var map, layer;
-
-        function init(){
-            map = new OpenLayers.Map( $('map') );
-
-            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
-
-            var control = new OpenLayers.Control();
-            OpenLayers.Util.extend(control, {
-                draw: function () {
-                    // this Handler.Point will intercept the shift-mousedown
-                    // before Control.MouseDefault gets to see it
-                    this.point = new OpenLayers.Handler.Point( control,
-                        {"done": this.notice},
-                        {keyMask: OpenLayers.Handler.MOD_SHIFT});
-                    this.point.activate();
-                },
-
-                notice: function (bounds) {
-                    document.getElementById('bounds').innerHTML = bounds;
-                }
-            });
-
-            map.addLayer(layer);
-            map.addControl(control);
-            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
-        }
-    </script>
-  </head>
-  <body onload="init()">
-      <h1 id="title">Custom Control Point Example</h1>
-
-      <div id="tags">
-      </div>
-
-      <p id="shortdesc">
-          Demonstrate the addition of a point reporting control to the OpenLayers window.
-      </p>
-
-    <div id="map" class="smallmap"></div>
-    <div id="bounds"></div>
-
-    <div id="docs"></div>
-  </body>
-</html>

examples/custom-control.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
         <title>Custom Control Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -45,15 +47,20 @@
     <body onload="init()">
         <h1 id="title">Custom Control Example</h1>
 
-          <div id="tags">
+        <div id="tags">
+            control, panel, rectangle
         </div>
 
         <p id="shortdesc">
-            Demonstrate the addition of a draggable rectangle to the OpenLayers window.
+            Demonstrate the addition of a rectangle to the OpenLayers window.
         </p>
       
         <div id="map" class="smallmap"></div>
 
-        <div id="docs"></div>
+        <div id="docs">
+            The control allows you to draw a rectangle, that reports its coordinates
+            after creation. Hold down the shift key on your keyboard and draw a 
+            rectangle with the mouse.
+        </div>
     </body>
 </html>

examples/custom-style.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
         <title>Custom Style Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -10,7 +12,7 @@
             }
             div.olControlMousePosition {
                 font-family: Verdana;
-                font-size: 0.5em;
+                font-size: 2em;
                 color: red;
             }
         </style>
@@ -37,6 +39,7 @@
         <h1 id="title">Custom Style Example</h1>
 
         <div id="tags">
+            styling, css, stylesheet, theming, theme
         </div>
 
         <p id="shortdesc">

examples/debug.html

@@ -2,6 +2,8 @@
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Debug Example</title>
         <link rel="stylesheet" href="style.css" type="text/css" />        
         <script src="../lib/Firebug/firebug.js"></script>
@@ -27,7 +29,9 @@
     <body>
         <h1 id="title">Debug Example</h1>
 
-        <div id="tags"></div>
+        <div id="tags">
+            debugging, error, fix, fixing, console, firebug, developers, advanced
+        </div>
 
         <p id="shortdesc">
             Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.

examples/document-drag.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 Document Drag Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -24,7 +26,9 @@
   <body onload="init()">
     <h1 id="title">OpenLayers Document Drag Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        drag
+    </div>
 
     <div id="shortdesc">Keep on dragging even when the mouse cursor moves outside of the map</div>
 

examples/donut.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <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 Polygon Hole Digitizing</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            #controlToggle li {
+                list-style: none;
+            }
+            .olControlAttribution {
+                font-size: 9px;
+                bottom: 2px;
+            }
+            #output {
+                margin: 1em;
+                font-size: 0.9em;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Drawing Holes in Polygons</h1>
+        <div id="tags">
+            draw polygon hole
+        </div>         
+        <p id="shortdesc">
+            The DrawFeature control can be used to digitize donut polygons.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        <ul id="controlToggle">
+            <li>
+                <input type="radio" name="type" value="none" id="noneToggle"
+                       onclick="toggleControl(this);" checked="checked">
+                <label for="noneToggle">navigate</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);">
+                <label for="polygonToggle">draw polygon</label>
+            </li>
+        </ul>
+        <div id="output"></div>
+        <div id="docs">
+            <p>
+                To digitize holes in polygons, hold down the <code>Alt</code> 
+                key and draw over an existing polygon.  By default, the 
+                <code>Shift</code> key triggers freehand drawing.  Use a 
+                combination of the <code>Shift</code> and <code>Alt</code> keys
+                to digitize holes in freehand mode.
+            </p>
+            <p>
+                See the <a href="donut.js" target="_blank">
+                donut.js source</a> for details on how this is done.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="donut.js"></script>
+    </body>
+</html>

examples/donut.js

@@ -0,0 +1,44 @@
+// allow testing of specific renderers via "?renderer=Canvas", etc
+var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.OSM(),
+        new OpenLayers.Layer.Vector("Vector Layer", {
+            renderers: renderer
+        })
+    ],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 1
+});
+
+var draw = new OpenLayers.Control.DrawFeature(
+    map.layers[1],
+    OpenLayers.Handler.Polygon,
+    {handlerOptions: {holeModifier: "altKey"}}
+);
+map.addControl(draw);
+
+// optionally listen for sketch events on the layer
+var output = document.getElementById("output");
+function updateOutput(event) {
+    window.setTimeout(function() {
+        output.innerHTML = event.type + " " + event.feature.id;
+    }, 100);
+}
+map.layers[1].events.on({
+    sketchmodified: updateOutput,
+    sketchcomplete: updateOutput
+})
+
+// add behavior to UI elements
+function toggleControl(element) {
+    if (element.value === "polygon" && element.checked) {
+        draw.activate();
+    } else {
+        draw.deactivate();
+    }
+}
+document.getElementById("noneToggle").checked = true;

examples/doubleSetCenter.html

@@ -1,5 +1,7 @@
 <html>
     <head>
+    <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 Double Set Center Example</title>
        
         <script src="../lib/OpenLayers.js"></script>
@@ -9,7 +11,9 @@
     <body>
         <h1 id="title">Double Set Center Example</h1>
 
-        <div id="tags"></div>
+        <div id="tags">
+            center, centering, cleanup
+        </div>
 
         <p id="shortdesc">
             Demonstrate the behavior of two calls to set the center after instatiating the layer object.

examples/drag-feature.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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>Drag Feature Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -23,7 +25,13 @@
                 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                     "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
     
-                vectors = new OpenLayers.Layer.Vector("Vector Layer");
+                // allow testing of specific renderers via "?renderer=Canvas", etc
+                var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+                renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+                vectors = new OpenLayers.Layer.Vector("Vector Layer", {
+                    renderers: renderer
+                });
 
                 map.addLayers([wms, vectors]);
                 map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -62,7 +70,9 @@
     <body onload="init()">
         <h1 id="title">Drag Feature Example</h1>
 
-        <div id="tags"></div>
+        <div id="tags">
+            point, line, linestring, polygon, digitizing, geometry, draw, drag
+        </div>
 
         <p id="shortdesc">
             Demonstrates point, line and polygon creation and editing.

examples/draw-feature.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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>Draw Feature Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -62,12 +64,22 @@
                     }
                 }
             }
+
+            function allowPan(element) {
+                var stop = !element.checked;
+                for(var key in drawControls) {
+                    drawControls[key].handler.stopDown = stop;
+                    drawControls[key].handler.stopUp = stop;
+                }
+            }
         </script>
     </head>
     <body onload="init()">
         <h1 id="title">OpenLayers Draw Feature Example</h1>
 
-        <div id="tags"></div>
+        <div id="tags">
+            point, line, linestring, polygon, digitizing, geometry, draw, drag
+        </div>
 
         <p id="shortdesc">
             Demonstrate on-screen digitizing tools for point, line, and polygon creation.
@@ -93,15 +105,20 @@
                 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                 <label for="polygonToggle">draw polygon</label>
             </li>
+            <li>
+                <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" />
+                <label for="allowPanCheckbox">allow pan while drawing</label>
+            </li>
         </ul>
 
         <div id="docs">
-            <p>With the point drawing control active, click on the map to add a point.  You can drag the point
-            before letting the mouse up if you want to adjust the position.</p>
+            <p>With the point drawing control active, click on the map to add a point.</p>
             <p>With the line drawing control active, click on the map to add the points that make up your line.
             Double-click to finish drawing.</p>
             <p>With the polygon drawing control active, click on the map to add the points that make up your
             polygon.  Double-click to finish drawing.</p>
+            <p>With any drawing control active, paning the map can still be achieved.  Drag the map as
+            usual for that.</p>
             <p>Hold down the shift key while drawing to activate freehand mode.  While drawing lines or polygons
             in freehand mode, hold the mouse down and a point will be added with every mouse movement.<p>
         </div>

examples/dynamic-text-layer.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Vector Behavior Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
@@ -39,7 +41,13 @@
             // Needed only for interaction, not for the display.
             function onPopupClose(evt) {
                 // 'this' is the popup.
-                selectControl.unselect(this.feature);
+                var feature = this.feature;
+                if (feature.layer) { // The feature is not destroyed
+                    selectControl.unselect(feature);
+                } else { // After "moveend" or "refresh" events on POIs layer all 
+                         //     features have been destroyed by the Strategy.BBOX
+                    this.destroy();
+                }
             }
             function onFeatureSelect(evt) {
                 feature = evt.feature;
@@ -51,7 +59,7 @@
                                          null, true, onPopupClose);
                 feature.popup = popup;
                 popup.feature = feature;
-                map.addPopup(popup);
+                map.addPopup(popup, true);
             }
             function onFeatureUnselect(evt) {
                 feature = evt.feature;
@@ -66,6 +74,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">Dynamic POIs via a Text Layer</h1>
+        <div id="tags">
+            poi, dynamic data, text, format, strategy, popup, select, selection
+        </div>
         <p id="shortdesc">
            Loading dynamic data from a text file. 
         </p>

examples/editingtoolbar-outside.html

@@ -1,15 +1,15 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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: Custom Editing Toolbar</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">
         .olControlEditingToolbar  {
             float:left;
-            right: 0px;
-            height: 30px; 
-            width: 150px;
+            width: 116px;
         }
     </style>
     <script src="../lib/Firebug/firebug.js"></script>
@@ -43,6 +43,9 @@
   </head>
   <body onload="init()">
     <h1 id="title">OpenLayers EditingToolbar Outside Viewport</h1>
+    <div id="tags">
+        digitizing, point, line, linestring, polygon, editing, positioning, style
+    </div>
     <p id="shortdesc">
         Display an editing toolbar panel outside the map viewport.
     </p>

examples/editingtoolbar.html

@@ -1,9 +1,14 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Editing Toolbar Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <!--[if lte IE 6]>
+            <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
+        <![endif]-->
         <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script src="../lib/Firebug/debug.js"></script>
@@ -33,7 +38,9 @@
     <body onload="init()">
         <h1 id="title">Editing Toolbar Example</h1>
 
-        <div id="tags"></div>
+        <div id="tags">
+            digitizing, point, line, linestring, polygon, editing
+        </div>
 
         <p id="shortdesc">
             Demonstrate polygon, polyline and point creation and editing tools.

examples/events.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Event Handling</title>
         <link rel="stylesheet" href="style.css" type="text/css" />
         <style type="text/css">
@@ -18,7 +20,7 @@
             #output {
                 position: absolute;
                 left: 550px;
-                top: 40px;
+                top: 4em;
                 width: 350px;
                 height: 400px;
             }
@@ -136,6 +138,7 @@
         <h1 id="title">Event Handling</h1>
 
         <div id="tags">
+            event, events, handler, listener, cleanup
         </div>
 
         <p id="shortdesc">

examples/example-list.html

@@ -1,6 +1,8 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
 <html>
     <head>
+    <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" />
         <!-- This is the example list source: if you are trying to look at the 
         source of an example, YOU ARE IN THE WRONG PLACE. If you want to view
         the source of just one example, you can typically choose 
@@ -12,14 +14,24 @@
         <link rel="stylesheet" href="style.css" type="text/css" />
         <style type="text/css">
             html, body {
-                height: 100%;
-                overflow: hidden;
                 margin: 0;
                 padding: 0;
                 line-height: 1.25em;
             }
+            #logo {
+                text-shadow: 2px 2px 3px gray;
+                color: white;
+                vertical-align: middle;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+                font-size: 34px;
+                font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
+            }
+            #logo img {
+                vertical-align: middle;
+            }
             .ex_container{
-                border-bottom: 1px solid #cccccc;
             }
             .ex_container a {
                 text-decoration: none;
@@ -34,6 +46,12 @@
                 font-weight: bold;
                 color: #333;
             }
+            .ex_tags{
+                display: inline;
+                font-size: smaller;
+                font-style: italic;
+                color: #333;
+            }
             .ex_filename {
                 font-weight: normal;
                 font-size: 0.8em;
@@ -49,20 +67,18 @@
                 display: none;
             }
             #toc {
-                width: 30%;
+                width: 100%;
                 height: 100%;
             }
             #filter {
+                position: fixed;
+                text-align: center;
                 top: 0px;
-                height: 50px;
-                padding: 10px 1em 10px 1em;
+                background: #9D9FA1;
+                width: 100%;
+                padding: 1.3em 0;
             }
             #examples {
-                border-top: 1px solid #cccccc;
-                position: absolute;
-                width: 30%;
-                top: 70px;
-                bottom: 0px;
                 overflow: auto;
                 list-style: none;
                 margin: 0;
@@ -72,11 +88,20 @@
                 list-style: none;
                 margin: 0;
                 padding: 0;
+                margin-top: 4em;
             }
             #examples ul li {
-                display: block;
-                margin: 0;
+                display: inline;
+                float: left;
+                width: 350px;
+                margin: 10px 0 0 10px;
                 padding: 0;
+                border: 1px solid #ddd;
+                border-radius: 3px;
+            }
+            #examples .mainlink {
+                height: 8em;
+                overflow: auto;
             }
             #exwin {
                 position: absolute;
@@ -88,12 +113,30 @@
                 border-left: 1px solid #cccccc;
                 margin: 0;
             }
+            @media only screen and (max-width: 600px) {
+                #examples ul {
+                    margin-top: 100px;
+                }
+                #filter {
+                    padding-top: 50px;
+                }
+                #examples ul li {
+                    margin-left: 0;
+                    border-radius: 0;
+                    border-width: 1px 0;
+                    width: 100%;
+                }
+                #examples .mainlink {
+                    height: auto;
+                }
+                #examples .ex_tags, #examples .ex_filename {
+                    display: none;
+                }
+            }
         </style>
         <script type="text/javascript" src="Jugl.js"></script>
         <script type="text/javascript" src="example-list.js"></script>
         <script type="text/javascript">
-            // import
-            var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
             var template, target;
 
             function listExamples(examples) {
@@ -127,7 +170,7 @@
                     for(var i=0; i<words.length; ++i) {
                         var word = words[i].toLowerCase()
                         var dict = info.index[word];
-                        if(dict) {
+                        var updateScores = function() {
                             for(exIndex in dict) {
                                 var count = dict[exIndex];
                                 if(scores[exIndex]) {
@@ -142,6 +185,18 @@
                                 }
                             }
                         }
+                        if(dict) {
+                            updateScores();
+                        } else {
+                            var r;
+                            for (idx in info.index) {
+                               r = new RegExp(word);
+                               if (r.test(idx)) {
+                                    dict = info.index[idx];
+                                    updateScores();
+                               }
+                            }
+                        }
                     }
                     examples = [];
                     for(var j in scores) {
@@ -195,10 +250,10 @@
                 }
             }
             window.onload = function() {
-                template = new Jugl.Template("template");
+                //document.getElementById('keywords').focus();
+                template = new jugl.Template("template");
                 target = document.getElementById("examples");
                 listExamples(info.examples);
-                document.getElementById("exwin").src = "../examples/example.html";
                 document.getElementById("keywords").onkeyup = inputChange
                 parseQuery();
             };
@@ -207,20 +262,24 @@
     <body>
         <div id="toc">
             <div id="filter">
+                <div id="logo">
+                <img src="http://www.openlayers.org/images/OpenLayers.trac.png"
+                 />
+                 OpenLayers
+             </div>
                 <p>
-                    <label for="keywords">Filter by keywords</label><br />
-                    <input type="text" id="keywords" />
-                    <span id="count"></span><br />
+                    <input autofocus placeholder="filter by keywords..." type="text" id="keywords" />
+                    <span id="count"></span>
                     <a href="javascript:void showAll();">show all</a>
                 </p>
             </div>
             <div id="examples"></div>
         </div>
-        <iframe id="exwin" name="exwin" frameborder="0"></iframe>        
         <div style="display: none;">
             <ul id="template">
                 <li class="ex_container" jugl:repeat="example examples">
-                    <a jugl:attributes="href example.link" target="exwin">
+                <a jugl:attributes="href example.link" class="mainlink"
+                    target="_blank">
                         <h5 class="ex_title">
                             <span jugl:replace="example.title">title</span><br />
                             <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
@@ -231,6 +290,9 @@
                         <p class="ex_classes" jugl:content="example.classes">
                             Related Classes go here
                         </p>
+                        <div class="ex_tags" jugl:content="'...tagged with ' + example.tags">
+                            
+                        </div>
                     </a>
                 </li>
             </ul>

examples/example.html

@@ -1,55 +1,24 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers 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">
-        // making this a global variable so that it is accessible for
-        // debugging/inspecting in Firebug
-        var map = null;
-
-        function init(){
-
-            map = new OpenLayers.Map('map');
-
-            var ol_wms = new OpenLayers.Layer.WMS(
-                "OpenLayers WMS",
-                "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                {layers: 'basic'}
-            );
-
-            var jpl_wms = new OpenLayers.Layer.WMS(
-                "NASA Global Mosaic",
-                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"}
-            );
-
-            var dm_wms = new OpenLayers.Layer.WMS(
-                "Canadian Data",
-                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
-                {
-                    layers: "bathymetry,land_fn,park,drain_fn,drainage," +
-                            "prov_bound,fedlimit,rail,road,popplace",
-                    transparent: "true",
-                    format: "image/png"
-                },
-                {isBaseLayer: false, visibility: false}
-            );
-
-            map.addLayers([ol_wms, jpl_wms, dm_wms]);
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            map.zoomToMaxExtent();
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">OpenLayers Example</h1>
-    <div id="tags"></div>
-    <p id="shortdesc">
-        Demonstrate a simple map with an overlay that includes layer switching controls.
-    </p>
-    <div id="map" class="smallmap"></div>
-    <div id="docs"></div>
-  </body>
+<!DOCTYPE html>
+<html>
+    <head>
+    <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 Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+    </head>
+    <body>
+        <h1 id="title">OpenLayers Example</h1>
+        <div id="tags">simple, basic</div>
+        <p id="shortdesc">
+            Demonstrate a simple map with an overlay that includes layer switching controls.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>This is a basic example demonstrating the use of a map with two layers and a few controls.</p>
+            <p>View the <a href="example.js" target="_blank">example.js</a> source to see how this is done.</p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="example.js"></script>
+    </body>
 </html>

examples/example.js

@@ -0,0 +1,23 @@
+var map = new OpenLayers.Map("map");
+
+var ol_wms = new OpenLayers.Layer.WMS(
+    "OpenLayers WMS",
+    "http://vmap0.tiles.osgeo.org/wms/vmap0",
+    {layers: "basic"}
+);
+
+var dm_wms = new OpenLayers.Layer.WMS(
+    "Canadian Data",
+    "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
+    {
+        layers: "bathymetry,land_fn,park,drain_fn,drainage," +
+                "prov_bound,fedlimit,rail,road,popplace",
+        transparent: "true",
+        format: "image/png"
+    },
+    {isBaseLayer: false, visibility: false}
+);
+
+map.addLayers([ol_wms, dm_wms]);
+map.addControl(new OpenLayers.Control.LayerSwitcher());
+map.zoomToMaxExtent();

examples/filter-strategy.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
     <head>
+    <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 Filter Strategy Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
         <link rel="stylesheet" href="style.css" type="text/css">
         <script src="../lib/OpenLayers.js"></script>
         <script>OpenLayers.ImgPath = "../img/";</script>
-        <script src="filter-strategy.js"></script>
         <style>
             .olControlAttribution {
                 font-size: 9px;
@@ -15,8 +16,11 @@
             }
         </style>
     </head>
-    <body onload="init()">
+    <body>
         <h1 id="title">Filter Strategy</h1>
+        <div id="tags">
+            filter, strategy, strategies, kml, advanced
+        </div>
         <p id="shortdesc">
             Demonstrates the filter strategy for limiting features passed to the layer.
         </p>
@@ -44,5 +48,6 @@
                 source to see how this is done
             </p>
         </div>
+        <script src="filter-strategy.js"></script>
     </body>
 </html>

examples/filter-strategy.js

@@ -1,62 +1,11 @@
 var map, filter, filterStrategy;
-
+var animationTimer;
+var currentDate;
 var startDate = new Date(1272736800000); // lower bound of when values
 var endDate = new Date(1272737100000); // upper value of when values
 var step = 8; // sencods to advance each interval
 var interval = 0.125; // seconds between each step in the animation
 
-function init() {
-
-    // add behavior to elements
-    document.getElementById("start").onclick = startAnimation;
-    document.getElementById("stop").onclick = stopAnimation;
-    var spanEl = document.getElementById("span");
-
-    var mercator = new OpenLayers.Projection("EPSG:900913");
-    var geographic = new OpenLayers.Projection("EPSG:4326");
-    map = new OpenLayers.Map("map");
-    
-    var osm = new OpenLayers.Layer.OSM();
-    
-    filter = new OpenLayers.Filter.Comparison({
-        type: OpenLayers.Filter.Comparison.BETWEEN,
-        property: "when",
-        lowerBoundary: startDate,
-        upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
-    });
-
-    filterStrategy = new OpenLayers.Strategy.Filter({filter: filter});
-
-    var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
-        projection: geographic,
-        strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
-        protocol: new OpenLayers.Protocol.HTTP({
-            url: "kml-track.kml",
-            format: new OpenLayers.Format.KML({
-                extractTracks: true
-                //,extractStyles: true // use style from KML instead of styleMap below
-            })
-        }),
-        styleMap: new OpenLayers.StyleMap({
-            "default": new OpenLayers.Style({
-                graphicName: "circle",
-                pointRadius: 3,
-                fillOpacity: 0.25,
-                fillColor: "#ffcc66",
-                strokeColor: "#ff9933",
-                strokeWidth: 1
-            })
-        }),
-        renderers: ["Canvas", "SVG", "VML"]
-    });
-    
-    map.addLayers([osm, flights]);
-    map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8);
-    
-};
-
-var animationTimer;
-var currentDate;
 function startAnimation() {
     if (animationTimer) {
         stopAnimation(true);
@@ -87,3 +36,49 @@ function stopAnimation(reset) {
     }
 }
 
+// add behavior to elements
+document.getElementById("start").onclick = startAnimation;
+document.getElementById("stop").onclick = stopAnimation;
+var spanEl = document.getElementById("span");
+
+var mercator = new OpenLayers.Projection("EPSG:900913");
+var geographic = new OpenLayers.Projection("EPSG:4326");
+map = new OpenLayers.Map("map");
+
+var osm = new OpenLayers.Layer.OSM();
+
+filter = new OpenLayers.Filter.Comparison({
+    type: OpenLayers.Filter.Comparison.BETWEEN,
+    property: "when",
+    lowerBoundary: startDate,
+    upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
+});
+
+filterStrategy = new OpenLayers.Strategy.Filter({filter: filter});
+
+var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
+    projection: geographic,
+    strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
+    protocol: new OpenLayers.Protocol.HTTP({
+        url: "kml-track.kml",
+        format: new OpenLayers.Format.KML({
+            extractTracks: true
+            //,extractStyles: true // use style from KML instead of styleMap below
+        })
+    }),
+    styleMap: new OpenLayers.StyleMap({
+        "default": new OpenLayers.Style({
+            graphicName: "circle",
+            pointRadius: 3,
+            fillOpacity: 0.25,
+            fillColor: "#ffcc66",
+            strokeColor: "#ff9933",
+            strokeWidth: 1
+        })
+    }),
+    renderers: ["Canvas", "SVG", "VML"]
+});
+
+map.addLayers([osm, flights]);
+map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8);
+

examples/filter.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <style>
@@ -63,6 +65,10 @@
   </head>
   <body>
     <h1 id="title">Filter Encoding</h1>
+    <div id="tags">
+        filter, format, comparison, filter encoding, fe, logical, attribute,
+        attributive, spatial, advanced
+    </div>
     <p id="shortdesc">
         Using the filter format write out filter objects.
     </p>

examples/fractional-zoom.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <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>
@@ -40,6 +42,7 @@
     <h1 id="title">Fractional Zoom Example</h1>
 
     <div id="tags">
+        zoomlevel, unlimited zoom, scale
     </div>
     <p id="shortdesc">
             Shows the use of a map with fractional (or non-discrete) zoom levels.

examples/fullScreen.html

@@ -1,13 +1,14 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
     <head>
+    <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>Full Screen 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">
-            body {
+            html, body, #map {
                 margin: 0;
-            }
-            #map {
                 width: 100%;
                 height: 100%;
             }
@@ -17,33 +18,13 @@
                 bottom: 1em;
                 left: 1em;
                 width: 512px;
+                z-index: 20000;
+                background-color: white;
+                padding: 0 0.5em 0.5em 0.5em;
             }
         </style>
         <script src="../lib/OpenLayers.js"></script>
-        <script type="text/javascript">
-            var map;
-            function init(){
-                map = new OpenLayers.Map('map');
-
-            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                    {layers: 'basic'} );
-            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"});
-
-                var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
-                    "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
-                    {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
-                             "prov_bound,fedlimit,rail,road,popplace",
-                     transparent: "true", format: "image/png" });
-
-                map.addLayers([ol_wms, jpl_wms, dm_wms]);
-                map.addControl(new OpenLayers.Control.LayerSwitcher());
-                // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-                map.zoomToMaxExtent();
-            }
-        </script>
+        <script src="fullScreen.js"></script>
     </head>
     <body onload="init()">
         <div id="map"></div>
@@ -51,15 +32,20 @@
           <div id="text">
               <h1 id="title">Full Screen Example</h1>
 
-              <div id="tags"></div>
+              <div id="tags">
+                css, style, fullscreen, window, margin, padding, scrollbar
+              </div>
 
               <p id="shortdesc">
                 Demonstrate a map that fill the entire browser window.
             </p>
 
             <div id="docs">
-                This example uses CSS to define the dimensions of the map element in order to fill the screen.
-                When the user resizes the window, the map size changes correspondingly. No scroll bars!
+                <p>This example uses CSS to define the dimensions of the map element in order to fill the screen.
+                When the user resizes the window, the map size changes correspondingly. No scroll bars!</p>
+                <p>See the 
+                <a href="fullScreen.js" target="_blank">fullScreen.js source</a> 
+                to see how this is done.</p>
             </div>
         </div>
     </body>

examples/fullScreen.js

@@ -0,0 +1,15 @@
+var map;
+function init(){
+    map = new OpenLayers.Map('map');
+
+    var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+        "http://vmap0.tiles.osgeo.org/wms/vmap0",
+        {layers: 'basic'} );
+        var ol_wms_nobuffer = new OpenLayers.Layer.WMS( "OpenLayers WMS (no tile buffer)",
+        "http://vmap0.tiles.osgeo.org/wms/vmap0",
+        {layers: 'basic'}, {buffer: 0});
+
+    map.addLayers([ol_wms, ol_wms_nobuffer]);
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+    map.setCenter(new OpenLayers.LonLat(0, 0), 6);
+}

examples/game-accel-ball.html

@@ -0,0 +1,80 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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 Game: Bounce Ball</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?mobile"></script>
+    <style type="text/css">
+      html, body { height: 100%; }
+      #shortdesc { display: none; }
+      #tags { display: none; }
+    </style>  
+
+    <script type="text/javascript">
+        var map, vlayer;
+        function adjustLocation(delta, feature) {
+            feature.geometry.move(delta.x, delta.y);
+            var me = map.maxExtent; 
+            var rad = 6;
+            if (feature.geometry.x > (me.right - rad)) { 
+                feature.geometry.x = me.right - rad;
+            } else if (feature.geometry.x < (me.left+rad)) {
+                feature.geometry.x = me.left+rad;
+            } 
+            if (feature.geometry.y > (me.top-rad)) {
+                feature.geometry.y = me.top-rad;
+            } else if (feature.geometry.y < (me.bottom+rad)) {
+                feature.geometry.y = me.bottom+rad;
+            }    
+            vlayer.drawFeature(feature);
+        }
+        function init() {
+            map = new OpenLayers.Map( 'map', 
+                {
+                 'maxExtent': new OpenLayers.Bounds(0, 0, $("map").clientWidth, $("map").clientHeight), 
+                 controls: [], 
+                 maxResolution: 'auto'} 
+            );
+            var layer = new OpenLayers.Layer("",
+                    {isBaseLayer: true} );
+            map.addLayer(layer);
+            map.zoomToMaxExtent();
+            vlayer = new OpenLayers.Layer.Vector();
+            var feature = new OpenLayers.Feature.Vector(
+                new OpenLayers.Geometry.Point(map.getCenter().lon, map.getCenter().lat));
+            vlayer.addFeatures(feature);    
+            map.addLayer(vlayer);
+            if (window.DeviceMotionEvent) {
+                window.addEventListener('devicemotion', function (evt) {
+                    var delta = null;
+                    if (typeof(evt.accelerationIncludingGravity) != 'undefined') {
+                        delta = {
+                            'x': evt.accelerationIncludingGravity.x * 3,
+                            'y': evt.accelerationIncludingGravity.y * 3,
+                            'z': evt.accelerationIncludingGravity.z
+                        }    
+                    }
+                    adjustLocation(delta, feature);
+                }, true);    
+            } else {
+                alert("This demo does not work on your browser.");
+            }    
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Accelerometer Example</h1>
+    <div id="tags">
+      mobile, game
+    </div>  
+    <div id="shortdesc">Simple acceleration demo; roll a vector feature around
+    on a map. (Only tested on iOS 4.)</div>
+
+    <div id="map" width="100%" height="100%" style="background-color: grey"></div>
+    <div id="docs">
+      Demo works best when device is locked in portrait mode. 
+    </div>
+  </body>
+</html>

examples/geojson.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <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>
@@ -57,6 +59,17 @@
   </head>
   <body onload="init()">
     <h1 id="title">GeoJSON Example</h1>
+    
+    <div id="tags">
+       JSON, GeoJSON
+    </div>
+
+      <p id="shortdesc">
+        Demonstrate the use of the GeoJSON format.
+    </p>
     <div id="map" class="smallmap"></div>
+    <div id="docs">
+        This example uses the GeoJSON format.
+    </div>
   </body>
 </html>

examples/geolocation.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <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 Geolocation</title>
+
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            .olControlAttribution {
+                bottom: 3px;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Geolocation Example</h1>
+
+        <div id="tags">
+            geolocation, geolocate, mobile
+        </div>
+
+        <p id="shortdesc">
+            Track  current position and display it with its accuracy.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+        <button id="locate">Locate me!</button>
+        <input type="checkbox" name="track" id="track">
+        <label for="track">Track my position</label>
+        <div id="docs">
+            <p>
+                View the <a href="geolocation.js" target="_blank">geolocation.js source</a>
+                to see how this is done.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="geolocation.js"></script>
+    </body>
+</html>

examples/geolocation.js

@@ -0,0 +1,105 @@
+var style = {
+    fillColor: '#000',
+    fillOpacity: 0.1,
+    strokeWidth: 0
+};
+
+var map = new OpenLayers.Map('map');
+var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
+var vector = new OpenLayers.Layer.Vector('vector');
+map.addLayers([layer, vector]);
+
+map.setCenter(
+    new OpenLayers.LonLat(-71.147, 42.472).transform(
+        new OpenLayers.Projection("EPSG:4326"),
+        map.getProjectionObject()
+    ), 12
+);
+
+var pulsate = function(feature) {
+    var point = feature.geometry.getCentroid(),
+        bounds = feature.geometry.getBounds(),
+        radius = Math.abs((bounds.right - bounds.left)/2),
+        count = 0,
+        grow = 'up';
+
+    var resize = function(){
+        if (count>16) {
+            clearInterval(window.resizeInterval);
+        }
+        var interval = radius * 0.03;
+        var ratio = interval/radius;
+        switch(count) {
+            case 4:
+            case 12:
+                grow = 'down'; break;
+            case 8:
+                grow = 'up'; break;
+        }
+        if (grow!=='up') {
+            ratio = - Math.abs(ratio);
+        }
+        feature.geometry.resize(1+ratio, point);
+        vector.drawFeature(feature);
+        count++;
+    };
+    window.resizeInterval = window.setInterval(resize, 50, point, radius);
+};
+
+var geolocate = new OpenLayers.Control.Geolocate({
+    geolocationOptions: {
+        enableHighAccuracy: false,
+        maximumAge: 0,
+        timeout: 7000
+    }
+});
+map.addControl(geolocate);
+geolocate.events.register("locationupdated",this,function(e) {
+    vector.removeAllFeatures();
+    var circle = new OpenLayers.Feature.Vector(
+        OpenLayers.Geometry.Polygon.createRegularPolygon(
+            new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+            e.position.coords.accuracy/2,
+            40,
+            0
+        ),
+        {},
+        style
+    );
+    vector.addFeatures([
+        new OpenLayers.Feature.Vector(
+            e.point,
+            {},
+            {
+                graphicName: 'cross',
+                strokeColor: '#f00',
+                strokeWidth: 2,
+                fillOpacity: 0,
+                pointRadius: 10
+            }
+        ),
+        circle
+    ]);
+    map.zoomToExtent(vector.getDataExtent());
+    pulsate(circle);
+});
+geolocate.events.register("locationfailed",this,function() {
+    OpenLayers.Console.log('Location detection failed');
+});
+
+$('locate').onclick = function() {
+    vector.removeAllFeatures();
+    geolocate.deactivate();
+    $('track').checked = false;
+    geolocate.watch = false;
+    geolocate.activate();
+};
+$('track').onclick = function() {
+    vector.removeAllFeatures();
+    geolocate.deactivate();
+    if (this.checked) {
+        geolocate.watch = true;
+        geolocate.activate();
+    }
+};
+$('track').checked = false;

examples/georss-flickr.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
@@ -94,7 +96,23 @@
   </head>
   <body onload="init()">
     <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
-    <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</tt> property for each item. An extended <tt>createFeatureFromItem()</tt> function is used to add this attribute to the attributes hash of each feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is configured with a style to render each item with its thumbnail image. Also, to show how rules work, we defined a rule that if the title of an rss item contains "powder", it will be rendered larger than the others.</p>
+    <div id="tags">
+        georss, style, styling, marker, flickr, thumbnail, image, rule
+    </div>
+
+    <p id="shortdesc">
+        Display a flickr-feed on top of the map
+    </p>
+    
     <div id="map" class="smallmap"></div>
+    <div id="docs">
+    <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</tt> 
+    property for each item. An extended <tt>createFeatureFromItem()</tt> 
+    function is used to add this attribute to the attributes hash of each 
+    feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is 
+    configured with a style to render each item with its thumbnail image. 
+    Also, to show how rules work, we defined a rule that if the title of an 
+    rss item contains "powder", it will be rendered larger than the others.</p>
+    </div>
   </body>
 </html>

examples/georss-markers.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 GeoRSS Marker Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -17,7 +19,7 @@
             map.addControl(new OpenLayers.Control.LayerSwitcher());
             var newl = new OpenLayers.Layer.GeoRSS( 'GeoRSS', 'georss.xml');
             map.addLayer(newl);
-            var yelp = new OpenLayers.Icon("http://openlayers.org/~crschmidt/yelp.png", new OpenLayers.Size(20,29));
+            var yelp = new OpenLayers.Icon("http://www.openlayers.org/images/OpenLayers.trac.png", new OpenLayers.Size(49,44));
             var newl = new OpenLayers.Layer.GeoRSS( 'Yelp GeoRSS', 'yelp-georss.xml', {'icon':yelp});
             map.addLayer(newl);
         }
@@ -26,7 +28,9 @@
   <body onload="init()">
     <h1 id="title">GeoRSS Marker Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        georss, style, styling, marker, flickr, image
+    </div>
 
     <p id="shortdesc">
         Demonstrate loading a GeoRSS feed using the GeoRSS parser.

examples/georss.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 GeoRSS Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -29,7 +31,9 @@
   <body onload="init()">
     <h1 id="title">GeoRSS Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        georss, style, styling, marker
+    </div>
 
     <p id="shortdesc">
         Display a couple of locally cached georss feeds on an a basemap.
@@ -48,9 +52,9 @@
                <input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
         </form>
 
-        <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
+        <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page &mdash;
         for example, entering 'georss.xml' will work by default, because there is a local file in the directory called
-        georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any
+        georss.xml &mdash; or, with a properly set up ProxyHost variable (as is used here), it will be able to load any
         HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
     </div>
   </body>

examples/getfeature-wfs.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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" />
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <title>WFS: GetFeature Example (GeoServer)</title>
@@ -18,8 +20,8 @@
             });
             layer = new OpenLayers.Layer.WMS(
                 "States WMS/WFS",
-                "http://demo.opengeo.org/geoserver/ows",
-                {layers: 'topp:states', format: 'image/gif'}
+                "http://v2.suite.opengeo.org/geoserver/ows",
+                {layers: 'usa:states', format: 'image/gif'}
             );
             select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
                 new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
@@ -57,6 +59,7 @@
 <h1 id="title">WFS GetFeature Example (GeoServer)</h1>
 
 <div id="tags">
+WFS, GetFeature
 </div>
 
 <p id="shortdesc">

examples/getfeatureinfo-control.html

@@ -1,5 +1,7 @@
 <html>
   <head>
+    <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 WMS Feature Info Example (GeoServer)</title>
     <script src="../lib/OpenLayers.js"></script>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -160,7 +162,9 @@
   <body onload="load()">
       <h1 id="title">Feature Info Example</h1>
 
-      <div id="tags"></div>
+      <div id="tags">
+        WMS, GetFeatureInfo
+      </div>
 
       <p id="shortdesc">
         Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).

examples/getfeatureinfo-popup.html

@@ -1,5 +1,7 @@
 <html>
   <head>
+    <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>GetFeatureInfo Popup</title>
     <script src="../lib/OpenLayers.js"></script>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -75,7 +77,9 @@
   <body onload="load()">
       <h1 id="title">Feature Info in Popup</h1>
 
-      <div id="tags"></div>
+      <div id="tags">
+        WMS, GetFeatureInfo, popup
+      </div>
 
       <p id="shortdesc">
         Demonstrates the WMSGetFeatureInfo control for fetching information

examples/getfeatureinfo.html

@@ -1,62 +0,0 @@
-<html>
-  <head>
-    <title>OpenLayers Feature Info Example</title>
-    <script src="../lib/OpenLayers.js"></script>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <link rel="stylesheet" href="style.css" type="text/css" />
-    <style type="text/css">
-        ul, li { padding-left: 0px; margin-left: 0px; }
-    </style>
-  </head>
-  <body>
-      <h1 id="title">Feature Info Example</h1>
-
-      <div id="tags"></div>
-
-      <p id="shortdesc">
-        Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV.
-      </p>
-
-    <a id="permalink" href="">Permalink</a><br />
-
-    <div style="float:right;width:28%">
-        <h1 style="font-size:1.3em;">CIA Factbook</h1>
-        <p style="font-size:.8em;">Click a country to see statistics about the country below.</p>
-        <div id="nodeList">
-        </div>
-    </div>
-      <div id="map" class="smallmap"></div>
-
-  <script defer="defer" type="text/javascript">
-    OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
-    var map = new OpenLayers.Map('map', {'maxResolution':'auto'});
-
-    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-        "http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} );
-    map.addLayer(wms);
-    map.addControl(new OpenLayers.Control.Permalink('permalink'));
-    map.zoomToMaxExtent();
-    map.events.register('click', map, function (e) {
-            OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
-            var url =  wms.getFullRequestString({
-                            REQUEST: "GetFeatureInfo",
-                            EXCEPTIONS: "application/vnd.ogc.se_xml",
-                            BBOX: wms.map.getExtent().toBBOX(),
-                            X: e.xy.x,
-                            Y: e.xy.y,
-                            INFO_FORMAT: 'text/html',
-                            QUERY_LAYERS: wms.params.LAYERS,
-                            WIDTH: wms.map.size.w,
-                            HEIGHT: wms.map.size.h});
-            OpenLayers.loadURL(url, '', this, setHTML);
-            OpenLayers.Event.stop(e);
-      });
-    function setHTML(response) {
-        OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
-    }
-  </script>
-
-    <div id="docs">
-    </div>
-  </body>
-</html>

examples/gml-layer.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 GML Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -23,7 +25,9 @@
   <body onload="init()">
       <h1 id="title">GML Layer Example</h1>
 
-      <div id="tags"></div>
+      <div id="tags">
+        GML
+      </div>
 
       <p id="shortdesc">
           Loads locally stored GML vector data on a basemap. Includes GML example file.

examples/google-reproject.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 Google with Overlay Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -37,7 +39,9 @@
   <body onload="init()">
     <h1 id="title">Google with Overlay Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        Google, overlay, mercator, reproject, cleanup
+    </div>
 
     <p id="shortdesc">
         Demonstrate a Google basemap used with boundary overlay layer.

examples/google-v3-alloverlays.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
+    <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 Google (v3) Layer Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
@@ -11,6 +13,9 @@
     </head>
     <body onload="init()">
         <h1 id="title">Google (v3) allOverlays Layer Example</h1>
+        <div id="tags">
+            Google, overlay
+        </div>
         <p id="shortdesc">
             Demonstrate use the Google Maps v3 API with allOverlays set to true on the map.
         </p>

examples/google-v3.html

@@ -1,21 +1,28 @@
 <!DOCTYPE html>
 <html>
     <head>
+    <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 Google (v3) Layer Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
         <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
         <link rel="stylesheet" href="style.css" type="text/css">
-        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
         <script src="../lib/OpenLayers.js"></script>
         <script src="google-v3.js"></script>
     </head>
     <body onload="init()">
         <h1 id="title">Google (v3) Layer Example</h1>
+        <div id="tags">
+            Google, api key, apikey
+        </div>
         <p id="shortdesc">
             Demonstrate use the Google Maps v3 API.
         </p>
         <div id="map" class="smallmap"></div>
         <div id="docs">
+            <p><input id="animate" type="checkbox" checked="checked">Animated
+                zoom (if supported by GMaps on your device)</input></p>
             <p>
                 If you use the Google Maps v3 API with a Google layer, you don't
                 need to include an API key.  This layer only works in the 

examples/google-v3.js

@@ -29,4 +29,12 @@ function init() {
         new OpenLayers.Projection("EPSG:4326"),
         map.getProjectionObject()
     ), 5);
+    
+    // add behavior to html
+    var animate = document.getElementById("animate");
+    animate.onclick = function() {
+        for (var i=map.layers.length-1; i>=0; --i) {
+            map.layers[i].animationEnabled = this.checked;
+        }
+    };
 }

examples/google.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 Google Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="../theme/default/google.css" type="text/css" />
@@ -41,7 +43,9 @@
   <body onload="init()">
     <h1 id="title">Google Layer Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        Google
+    </div>
 
     <p id="shortdesc">
         Demonstrate use of the various types of Google layers.

examples/graphic-name.html

@@ -1,89 +1,41 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>OpenLayers Graphic Names</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">
-        // user custom graphicname
-        
-        OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
-        OpenLayers.Renderer.symbol.rectangle = [0,0, 4,0, 4,10, 0,10, 0,0];
-            
-        var map;
-
-        function init() {
-            map = new OpenLayers.Map('map');
-
-            // list of well-known graphic names
-            var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
-            
-            // Create one feature for each well known graphic.
-            // Give features a type attribute with the graphic name.
-            var num = graphics.length;
-            var slot = map.maxExtent.getWidth() / num;
-            var features = Array(num);
-            for(var i=0; i<graphics.length; ++i) {
-                lon = map.maxExtent.left + (i * slot) + (slot / 2);
-                features[i] = new OpenLayers.Feature.Vector(
-                    new OpenLayers.Geometry.Point(
-                        map.maxExtent.left + (i * slot) + (slot / 2), 0
-                    ), {
-                        type: graphics[i]
-                    }
-                );
-            }
-            
-            // Create a style map for painting the features.
-            // The graphicName property of the symbolizer is evaluated using
-            // the type attribute on each feature (set above).
-            var styles = new OpenLayers.StyleMap({
-                "default": {
-                    graphicName: "${type}",
-                    pointRadius: 10,
-                    strokeColor: "fuchsia",
-                    strokeWidth: 2,
-                    fillColor: "lime",
-                    fillOpacity: 0.6
-                },
-                "select": {
-                    pointRadius: 20,
-                    fillOpacity: 1,
-                    rotation: 45
-                }
-            });
-
-            // Create a vector layer and give it your style map.
-            var layer = new OpenLayers.Layer.Vector(
-                "Graphics", {styleMap: styles, isBaseLayer: true}
-            );
-            layer.addFeatures(features);
-            map.addLayer(layer);
-            
-            // Create a select feature control and add it to the map.
-            var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
-            map.addControl(select);
-            select.activate();
-            
-            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1 id="title">Named Graphics Example</h1>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Shows how to use well-known graphic names.
-    </p>
-
-    <div id="map" class="smallmap"></div>
-
-    <div id="docs">
-        OpenLayers supports well-known names for a few graphics.  You can use
-        the names "star", "cross", "x", "square", "triangle", and "circle" as
-        the value for the graphicName property of a symbolizer.
-    </div>
-  </body>
+<!DOCTYPE html>
+<html>
+    <head>
+    <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" />
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title>OpenLayers Graphic Names</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" type="text/javascript"></script>
+        <script src="./graphic-name.js" type="text/javascript"></script>
+    </head>
+    <body onload="init();">
+        <h1 id="title">Named Graphics Example</h1>
+        <div id="tags">
+            vector, named graphic, star, cross, x, square, triangle, circle, style
+        </div>
+        <p id="shortdesc">
+            Shows how to use well-known graphic names.
+        </p>
+        <div id="map" class="smallmap">
+        </div>
+        <div id="docs">
+            <p>
+                OpenLayers supports well-known names for a few graphics.  You 
+                can use the names &quot;star&quot;, &quot;cross&quot;, 
+                &quot;x&quot;, &quot;square&quot;, &quot;triangle&quot;, and 
+                &quot;circle&quot; as value for the graphicName property of a 
+                symbolizer.
+            </p>
+            <p>
+                The named symbols &quot;lightning&quot;, &quot;rectangle&quot; 
+                and &quot;church&quot; are user defined.
+            </p>
+            <p>
+                See <a href="./graphic-name.js">graphic-name.js</a>
+                for the source code of this example.
+            </p>
+        </div>
+    </body>
 </html>

examples/graphic-name.js

@@ -0,0 +1,62 @@
+// user custom graphicname
+OpenLayers.Renderer.symbol.lightning = [0, 0, 4, 2, 6, 0, 10, 5, 6, 3, 4, 5, 0, 0];
+OpenLayers.Renderer.symbol.rectangle = [0, 0, 4, 0, 4, 10, 0, 10, 0, 0];
+OpenLayers.Renderer.symbol.church = [4, 0, 6, 0, 6, 4, 10, 4, 10, 6, 6, 6, 6, 14, 4, 14, 4, 6, 0, 6, 0, 4, 4, 4, 4, 0];
+var map;
+
+function init(){
+    map = new OpenLayers.Map('map', {
+        controls: []
+    });
+    
+    // list of well-known graphic names
+    var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle", "church"];
+    
+    // Create one feature for each well known graphic.
+    // Give features a type attribute with the graphic name.
+    var num = graphics.length;
+    var slot = map.maxExtent.getWidth() / num;
+    var features = Array(num);
+    for (var i = 0; i < graphics.length; ++i) {
+        lon = map.maxExtent.left + (i * slot) + (slot / 2);
+        features[i] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(map.maxExtent.left + (i * slot) + (slot / 2), 0), {
+            type: graphics[i]
+        });
+    }
+    
+    // Create a style map for painting the features.
+    // The graphicName property of the symbolizer is evaluated using
+    // the type attribute on each feature (set above).
+    var styles = new OpenLayers.StyleMap({
+        "default": {
+            graphicName: "${type}",
+            pointRadius: 10,
+            strokeColor: "fuchsia",
+            strokeWidth: 2,
+            fillColor: "lime",
+            fillOpacity: 0.6
+        },
+        "select": {
+            pointRadius: 20,
+            fillOpacity: 1,
+            rotation: 45
+        }
+    });
+    
+    // Create a vector layer and give it your style map.
+    var layer = new OpenLayers.Layer.Vector("Graphics", {
+        styleMap: styles,
+        isBaseLayer: true
+    });
+    layer.addFeatures(features);
+    map.addLayer(layer);
+    
+    // Create a select feature control and add it to the map.
+    var select = new OpenLayers.Control.SelectFeature(layer, {
+        hover: true
+    });
+    map.addControl(select);
+    select.activate();
+    
+    map.zoomToMaxExtent();
+}

examples/graticule.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Graticule Example</title>
 
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -89,6 +91,7 @@
         <h1 id="title">Graticule Example</h1>
 
         <div id="tags">
+          graticule, grid
         </div>
 
         <p id="shortdesc">

examples/gutter.html

@@ -1,5 +1,7 @@
 <html>
   <head>
+    <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 Gutter Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -33,7 +35,9 @@
   <body>
     <h1 id="title">Gutter Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        gutter, quality, tile
+    </div>
 
     <p id="shortdesc">
         Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.

examples/highlight-feature.html

@@ -1,7 +1,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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>SelectFeature Control for Select and Highlight</title> 
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <!--[if lte IE 6]>
+        <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
+    <![endif]-->
     <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
         #controlToggle li {
@@ -70,6 +75,9 @@
   </head>
   <body onload="init()">
     <h1 id="title">OpenLayers Select and Highlight Feature Example</h1>
+    <div id="tags">
+        select, highlight, hover, onmouseover, click, vector
+    </div>
     <p id="shortdesc">
       Select features on click, highlight features on hover.
     </p>  

examples/hover-handler.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+    <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 Hover Handler Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />        
@@ -143,6 +145,7 @@
         <div id="west">
     
             <div id="tags">
+                hover, onmouseover, handler, listener, event, events
             </div>
     
             <p id="shortdesc">

examples/image-layer.html

@@ -1,5 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <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 Image Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
@@ -47,7 +49,9 @@
   <body onload="init()">
     <h1 id="title">Image Layer Example</h1>
 
-    <div id="tags"></div>
+    <div id="tags">
+        image, imagelayer
+    </div>
 
     <p id="shortdesc">
         Demonstrate a single non-tiled image as a selectable base layer.