Tagging the 2.7 rc3 Release

git-svn-id: http://svn.openlayers.org/tags/openlayers/release-2.7-rc3@8039 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

apidoc_config/Languages.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 # This is the Natural Docs languages file for this project.  If you change
 # anything here, it will apply to THIS PROJECT ONLY.  If you'd like to change

apidoc_config/Menu.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 
 Title: OpenLayers
@@ -8,6 +8,22 @@ SubTitle: JavaScript Mapping Library
 # Footer: [text]
 # If you want to add a copyright notice, this would be the place to do it.
 
+# You can add a timestamp to your documentation like one of these:
+# Timestamp: Generated on month day, year
+# Timestamp: Updated mm/dd/yyyy
+# Timestamp: Last updated mon day
+#
+#   m     - One or two digit month.  January is "1"
+#   mm    - Always two digit month.  January is "01"
+#   mon   - Short month word.  January is "Jan"
+#   month - Long month word.  January is "January"
+#   d     - One or two digit day.  1 is "1"
+#   dd    - Always two digit day.  1 is "01"
+#   day   - Day with letter extension.  1 is "1st"
+#   yy    - Two digit year.  2006 is "06"
+#   yyyy  - Four digit year.  2006 is "2006"
+#   year  - Four digit year.  2006 is "2006"
+
 
 # --------------------------------------------------------------------------
 # 
@@ -29,10 +45,9 @@ SubTitle: JavaScript Mapping Library
 # --------------------------------------------------------------------------
 
 
-File: OpenLayers  (OpenLayers.js)
-
 Group: OpenLayers  {
 
+   File: OpenLayers  (no auto-title, OpenLayers.js)
    File: Ajax  (no auto-title, OpenLayers/Ajax.js)
 
    Group: BaseTypes  {
@@ -52,26 +67,37 @@ Group: OpenLayers  {
 
       File: Control  (no auto-title, OpenLayers/Control.js)
       File: ArgParser  (no auto-title, OpenLayers/Control/ArgParser.js)
-      File: ZoomToMaxExtent  (no auto-title, OpenLayers/Control/ZoomToMaxExtent.js)
-      File: OverviewMap  (no auto-title, OpenLayers/Control/OverviewMap.js)
+      File: Attribution  (no auto-title, OpenLayers/Control/Attribution.js)
+      File: Button  (no auto-title, OpenLayers/Control/Button.js)
       File: DragFeature  (no auto-title, OpenLayers/Control/DragFeature.js)
       File: DragPan  (no auto-title, OpenLayers/Control/DragPan.js)
       File: DrawFeature  (no auto-title, OpenLayers/Control/DrawFeature.js)
       File: EditingToolbar  (no auto-title, OpenLayers/Control/EditingToolbar.js)
       File: KeyboardDefaults  (no auto-title, OpenLayers/Control/KeyboardDefaults.js)
       File: LayerSwitcher  (no auto-title, OpenLayers/Control/LayerSwitcher.js)
+      File: Measure  (no auto-title, OpenLayers/Control/Measure.js)
+      File: ModifyFeature  (no auto-title, OpenLayers/Control/ModifyFeature.js)
       File: MouseDefaults  (no auto-title, OpenLayers/Control/MouseDefaults.js)
       File: MousePosition  (no auto-title, OpenLayers/Control/MousePosition.js)
       File: MouseToolbar  (no auto-title, OpenLayers/Control/MouseToolbar.js)
       File: Navigation  (no auto-title, OpenLayers/Control/Navigation.js)
+      File: NavigationHistory  (no auto-title, OpenLayers/Control/NavigationHistory.js)
       File: NavToolbar  (no auto-title, OpenLayers/Control/NavToolbar.js)
+      File: OverviewMap  (no auto-title, OpenLayers/Control/OverviewMap.js)
+      File: Pan  (no auto-title, OpenLayers/Control/Pan.js)
       File: Panel  (no auto-title, OpenLayers/Control/Panel.js)
+      File: PanPanel  (no auto-title, OpenLayers/Control/PanPanel.js)
+      File: PanZoom  (no auto-title, OpenLayers/Control/PanZoom.js)
       File: PanZoomBar  (no auto-title, OpenLayers/Control/PanZoomBar.js)
       File: Permalink  (no auto-title, OpenLayers/Control/Permalink.js)
       File: Scale  (no auto-title, OpenLayers/Control/Scale.js)
+      File: ScaleLine  (no auto-title, OpenLayers/Control/ScaleLine.js)
       File: SelectFeature  (no auto-title, OpenLayers/Control/SelectFeature.js)
       File: ZoomBox  (no auto-title, OpenLayers/Control/ZoomBox.js)
-      File: PanZoom  (OpenLayers/Control/PanZoom.js)
+      File: ZoomIn  (no auto-title, OpenLayers/Control/ZoomIn.js)
+      File: ZoomOut  (no auto-title, OpenLayers/Control/ZoomOut.js)
+      File: ZoomPanel  (no auto-title, OpenLayers/Control/ZoomPanel.js)
+      File: ZoomToMaxExtent  (no auto-title, OpenLayers/Control/ZoomToMaxExtent.js)
       }  # Group: Control
 
    File: Events  (no auto-title, OpenLayers/Events.js)
@@ -79,26 +105,70 @@ Group: OpenLayers  {
    Group: Feature  {
 
       File: Feature  (no auto-title, OpenLayers/Feature.js)
-      File: WFS  (no auto-title, OpenLayers/Feature/WFS.js)
       File: Vector  (no auto-title, OpenLayers/Feature/Vector.js)
+      File: WFS  (no auto-title, OpenLayers/Feature/WFS.js)
       }  # Group: Feature
 
+   Group: Filter  {
+
+      File: Filter  (no auto-title, OpenLayers/Filter.js)
+      File: Comparison  (no auto-title, OpenLayers/Filter/Comparison.js)
+      File: FeatureId  (no auto-title, OpenLayers/Filter/FeatureId.js)
+      File: Logical  (no auto-title, OpenLayers/Filter/Logical.js)
+      File: Spatial  (no auto-title, OpenLayers/Filter/Spatial.js)
+      }  # Group: Filter
+
    Group: Format  {
 
-      File: Format  (OpenLayers/Format.js)
+      File: Format  (no auto-title, OpenLayers/Format.js)
+
+      Group: Filter  {
+
+         File: Filter  (no auto-title, OpenLayers/Format/Filter.js)
+         File: v1  (no auto-title, OpenLayers/Format/Filter/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/Filter/v1_0_0.js)
+         }  # Group: Filter
+
       File: GeoJSON  (no auto-title, OpenLayers/Format/GeoJSON.js)
       File: GeoRSS  (no auto-title, OpenLayers/Format/GeoRSS.js)
+
+      Group: GML  {
+
          File: GML  (no auto-title, OpenLayers/Format/GML.js)
+         File: Base  (no auto-title, OpenLayers/Format/GML/Base.js)
+         File: v2  (no auto-title, OpenLayers/Format/GML/v2.js)
+         File: v3  (no auto-title, OpenLayers/Format/GML/v3.js)
+         }  # Group: GML
+
+      File: GPX  (no auto-title, OpenLayers/Format/GPX.js)
       File: JSON  (no auto-title, OpenLayers/Format/JSON.js)
       File: KML  (no auto-title, OpenLayers/Format/KML.js)
+      File: OSM  (no auto-title, OpenLayers/Format/OSM.js)
+      File: Text  (no auto-title, OpenLayers/Format/Text.js)
       File: WFS  (no auto-title, OpenLayers/Format/WFS.js)
       File: WKT  (no auto-title, OpenLayers/Format/WKT.js)
       File: XML  (no auto-title, OpenLayers/Format/XML.js)
+
+      Group: SLD  {
+
+         File: SLD  (no auto-title, OpenLayers/Format/SLD.js)
+         File: v1  (no auto-title, OpenLayers/Format/SLD/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
+         }  # Group: SLD
+
+      Group: WMC  {
+
+         File: WMC  (no auto-title, OpenLayers/Format/WMC.js)
+         File: v1  (no auto-title, OpenLayers/Format/WMC/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/WMC/v1_0_0.js)
+         File: v1_1_0  (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
+         }  # Group: WMC
+
       }  # Group: Format
 
    Group: Geometry  {
 
-      File: Geometry  (OpenLayers/Geometry.js)
+      File: Geometry  (no auto-title, OpenLayers/Geometry.js)
       File: Collection  (no auto-title, OpenLayers/Geometry/Collection.js)
       File: Curve  (no auto-title, OpenLayers/Geometry/Curve.js)
       File: LinearRing  (no auto-title, OpenLayers/Geometry/LinearRing.js)
@@ -109,15 +179,16 @@ Group: OpenLayers  {
       File: Point  (no auto-title, OpenLayers/Geometry/Point.js)
       File: Polygon  (no auto-title, OpenLayers/Geometry/Polygon.js)
       File: Rectangle  (no auto-title, OpenLayers/Geometry/Rectangle.js)
-      File: Surface  (no auto-title, OpenLayers/Geometry/Surface.js)
       }  # Group: Geometry
 
    Group: Handler  {
 
-      File: Handler  (OpenLayers/Handler.js)
+      File: Handler  (no auto-title, OpenLayers/Handler.js)
       File: Box  (no auto-title, OpenLayers/Handler/Box.js)
+      File: Click  (no auto-title, OpenLayers/Handler/Click.js)
       File: Drag  (no auto-title, OpenLayers/Handler/Drag.js)
       File: Feature  (no auto-title, OpenLayers/Handler/Feature.js)
+      File: Hover  (no auto-title, OpenLayers/Handler/Hover.js)
       File: Keyboard  (no auto-title, OpenLayers/Handler/Keyboard.js)
       File: MouseWheel  (no auto-title, OpenLayers/Handler/MouseWheel.js)
       File: Path  (no auto-title, OpenLayers/Handler/Path.js)
@@ -128,9 +199,26 @@ Group: OpenLayers  {
 
    File: Icon  (no auto-title, OpenLayers/Icon.js)
 
+   Group: Lang  {
+
+      File: Lang  (no auto-title, OpenLayers/Lang.js)
+      File: cs-CZ  (no auto-title, OpenLayers/Lang/cs-CZ.js)
+      File: de  (no auto-title, OpenLayers/Lang/de.js)
+      File: en  (no auto-title, OpenLayers/Lang/en.js)
+      File: en-CA  (no auto-title, OpenLayers/Lang/en-CA.js)
+      File: fr  (no auto-title, OpenLayers/Lang/fr.js)
+      File: it  (no auto-title, OpenLayers/Lang/it.js)
+      File: nb  (no auto-title, OpenLayers/Lang/nb.js)
+      File: nl  (no auto-title, OpenLayers/Lang/nl.js)
+      File: pt-BR  (no auto-title, OpenLayers/Lang/pt-BR.js)
+      File: sv-SE  (no auto-title, OpenLayers/Lang/sv-SE.js)
+      File: zh-CN  (no auto-title, OpenLayers/Lang/zh-CN.js)
+      File: zh-TW  (no auto-title, OpenLayers/Lang/zh-TW.js)
+      }  # Group: Lang
+
    Group: Layer  {
 
-      File: Layer  (OpenLayers/Layer.js)
+      File: Layer  (no auto-title, OpenLayers/Layer.js)
       File: Boxes  (no auto-title, OpenLayers/Layer/Boxes.js)
       File: EventPane  (no auto-title, OpenLayers/Layer/EventPane.js)
       File: FixedZoomLevels  (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
@@ -141,10 +229,13 @@ Group: OpenLayers  {
       File: HTTPRequest  (no auto-title, OpenLayers/Layer/HTTPRequest.js)
       File: Image  (no auto-title, OpenLayers/Layer/Image.js)
       File: KaMap  (no auto-title, OpenLayers/Layer/KaMap.js)
+      File: KaMapCache  (no auto-title, OpenLayers/Layer/KaMapCache.js)
+      File: MapGuide  (no auto-title, OpenLayers/Layer/MapGuide.js)
       File: MapServer  (no auto-title, OpenLayers/Layer/MapServer.js)
       File: MapServer.Untiled  (no auto-title, OpenLayers/Layer/MapServer/Untiled.js)
       File: Markers  (no auto-title, OpenLayers/Layer/Markers.js)
       File: MultiMap  (no auto-title, OpenLayers/Layer/MultiMap.js)
+      File: PointTrack  (no auto-title, OpenLayers/Layer/PointTrack.js)
       File: SphericalMercator  (no auto-title, OpenLayers/Layer/SphericalMercator.js)
       File: Text  (no auto-title, OpenLayers/Layer/Text.js)
       File: TileCache  (no auto-title, OpenLayers/Layer/TileCache.js)
@@ -162,33 +253,72 @@ Group: OpenLayers  {
 
    Group: Marker  {
 
-      File: Marker  (OpenLayers/Marker.js)
+      File: Marker  (no auto-title, OpenLayers/Marker.js)
       File: Box  (no auto-title, OpenLayers/Marker/Box.js)
       }  # Group: Marker
 
    Group: Popup  {
 
-      File: Popup  (OpenLayers/Popup.js)
+      File: Popup  (no auto-title, OpenLayers/Popup.js)
       File: Anchored  (no auto-title, OpenLayers/Popup/Anchored.js)
       File: AnchoredBubble  (no auto-title, OpenLayers/Popup/AnchoredBubble.js)
+      File: Framed  (no auto-title, OpenLayers/Popup/Framed.js)
+      File: FramedCloud  (no auto-title, OpenLayers/Popup/FramedCloud.js)
       }  # Group: Popup
 
+   File: Projection  (no auto-title, OpenLayers/Projection.js)
+
+   Group: Protocol  {
+
+      File: Protocol  (no auto-title, OpenLayers/Protocol.js)
+      File: HTTP  (no auto-title, OpenLayers/Protocol/HTTP.js)
+
+      Group: SQL  {
+
+         File: SQL  (no auto-title, OpenLayers/Protocol/SQL.js)
+         File: Gears  (no auto-title, OpenLayers/Protocol/SQL/Gears.js)
+         }  # Group: SQL
+
+      }  # Group: Protocol
+
    Group: Renderer  {
 
-      File: Renderer  (OpenLayers/Renderer.js)
+      File: Renderer  (no auto-title, OpenLayers/Renderer.js)
+      File: Canvas  (no auto-title, OpenLayers/Renderer/Canvas.js)
       File: Elements  (no auto-title, OpenLayers/Renderer/Elements.js)
       File: SVG  (no auto-title, OpenLayers/Renderer/SVG.js)
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 
+   Group: Request  {
+
+      File: Request  (no auto-title, OpenLayers/Request.js)
+      File: XMLHttpRequest  (no auto-title, OpenLayers/Request/XMLHttpRequest.js)
+      }  # Group: Request
+
+   File: Rule  (no auto-title, OpenLayers/Rule.js)
+
+   Group: Strategy  {
+
+      File: Strategy  (no auto-title, OpenLayers/Strategy.js)
+      File: BBOX  (no auto-title, OpenLayers/Strategy/BBOX.js)
+      File: Cluster  (no auto-title, OpenLayers/Strategy/Cluster.js)
+      File: Fixed  (no auto-title, OpenLayers/Strategy/Fixed.js)
+      File: Paging  (no auto-title, OpenLayers/Strategy/Paging.js)
+      }  # Group: Strategy
+
+   File: Style  (no auto-title, OpenLayers/Style.js)
+   File: StyleMap  (no auto-title, OpenLayers/StyleMap.js)
+
    Group: Tile  {
 
-      File: Tile  (OpenLayers/Tile.js)
+      File: Tile  (no auto-title, OpenLayers/Tile.js)
       File: Image  (no auto-title, OpenLayers/Tile/Image.js)
       File: WFS  (no auto-title, OpenLayers/Tile/WFS.js)
       }  # Group: Tile
 
-   File: Util  (OpenLayers/Util.js)
+   File: Tween  (no auto-title, OpenLayers/Tween.js)
+   File: Util  (no auto-title, OpenLayers/Util.js)
    }  # Group: OpenLayers
 
 Group: Index  {

apidoc_config/Topics.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 # This is the Natural Docs topics file for this project.  If you change anything
 # here, it will apply to THIS PROJECT ONLY.  If you'd like to change something
@@ -58,9 +58,6 @@ Ignore Keywords:
 # Class Hierarchy: [yes|no]
 #    Whether the topics are part of the class hierarchy.  Defaults to no.
 #
-# Variable Type: [yes|no]
-#    Whether the topics can be a variable type.  Defaults to no.
-#
 # Page Title If First: [yes|no]
 #    Whether the topic's title becomes the page title if it's the first one in
 #    a file.  Defaults to no.

build/README.txt

@@ -4,7 +4,7 @@
  * Build:
 
      cd build
-     ./build.sh
+     ./build.py
      cd ..
 
  * Upload the result to the server: e.g.

build/build.py

@@ -2,11 +2,22 @@
 
 import sys
 sys.path.append("../tools")
+import mergejs
 
-import jsmin, mergejs
+have_compressor = None
+try:
+    import jsmin
+    have_compressor = "jsmin"
+except ImportError:
+    try:
+        import minimize
+        have_compressor = "minimize"
+    except Exception, E:
+        print E
+        pass
 
 sourceDirectory = "../lib"
-configFilename = "library.cfg"
+configFilename = "full.cfg"
 outputFilename = "OpenLayers.js"
 
 if len(sys.argv) > 1:
@@ -21,8 +32,15 @@ if len(sys.argv) > 2:
 
 print "Merging libraries."
 merged = mergejs.run(sourceDirectory, None, configFilename)
-print "Compressing."
-minimized = jsmin.jsmin(merged)
+if have_compressor == "jsmin":
+    print "Compressing using jsmin."
+    minimized = jsmin.jsmin(merged)
+elif have_compressor == "minimize":
+    print "Compressing using minimize."
+    minimized = minimize.minimize(merged)
+else: # fallback
+    print "Not compressing."
+    minimized = merged 
 print "Adding license file."
 minimized = file("license.txt").read() + minimized
 

build/buildUncompressed.py

@@ -6,7 +6,7 @@ sys.path.append("../tools")
 import jsmin, mergejs
 
 sourceDirectory = "../lib"
-configFilename = "library.cfg"
+configFilename = "full.cfg"
 outputFilename = "OpenLayers.js"
 
 if len(sys.argv) > 1:

build/full.cfg

@@ -13,3 +13,14 @@ Rico/Corner.js
 [exclude]
 Firebug/firebug.js
 Firebug/firebugx.js
+OpenLayers/Lang/cs-CZ.js
+OpenLayers/Lang/de.js
+OpenLayers/Lang/en-CA.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

build/library.cfg

@@ -46,5 +46,16 @@ OpenLayers/Renderer/Elements.js
 OpenLayers/Renderer/SVG.js
 OpenLayers/Renderer/VML.js
 OpenLayers/Renderer.js
+OpenLayers/Lang/cs-CZ.js
+OpenLayers/Lang/de.js
+OpenLayers/Lang/en-CA.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
 
 

build/license.txt

@@ -2,8 +2,8 @@
 
   OpenLayers.js -- OpenLayers Map Viewer Library
 
-  Copyright 2005-2007 MetaCarta, Inc., released under the BSD license.
-  Please see http://svn.openlayers.org/trunk/openlayers/release-license.txt
+  Copyright 2005-2008 MetaCarta, Inc., released under the Clear BSD license.
+  Please see http://svn.openlayers.org/trunk/openlayers/license.txt
   for the full text of the license.
 
   Includes compressed code under the following licenses:
@@ -21,7 +21,7 @@
  *  Prototype is freely distributable under the terms of an MIT-style license.
  *  For details, see the Prototype web site: http://prototype.conio.net/
  *
-/*--------------------------------------------------------------------------*/
+ *--------------------------------------------------------------------------*/
 
 /**  
 *  
@@ -43,3 +43,50 @@
 *
 **/
 
+/**
+ * Contains XMLHttpRequest.js <http://code.google.com/p/xmlhttprequest/>
+ * Copyright 2007 Sergey Ilinsky (http://www.ilinsky.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+/**
+ * Contains portions of Gears <http://code.google.com/apis/gears/>
+ *
+ * Copyright 2007, Google Inc.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ *  1. Redistributions of source code must retain the above copyright notice,
+ *     this list of conditions and the following disclaimer.
+ *  2. 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.
+ *  3. Neither the name of Google Inc. nor the names of its contributors may be
+ *     used to endorse or promote products derived from this software without
+ *     specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``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 AUTHOR 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.
+ *
+ * Sets up google.gears.*, which is *the only* supported way to access Gears.
+ *
+ * Circumvent this file at your own risk!
+ *
+ * In the future, Gears may automatically define google.gears.* without this
+ * file. Gears may use these objects to transparently fix bugs and compatibility
+ * issues. Applications that use the code below will continue to work seamlessly
+ * when that happens.
+ */

build/lite.cfg

@@ -19,5 +19,5 @@ OpenLayers/Tile.js
 OpenLayers/Tile/Image.js
 
 [exclude]
-Firebug/firebug.js
-Firebug/firebugx.js
+
+

doc/authors.txt

@@ -1,27 +1,43 @@
 OpenLayers contributors:
+
+Seb Benthall
 Howard Butler
 Bertil Chaupis                                                               
 John Cole
 Jeff Dege
+Roald de Wit
 Schuyler Erle
 Christian López Espínola
 John Frank
 Sean Gilles
 Pierre Giraud
 Andreas Hocevar
+Ian Johnson
 Eric Lemoine
 Philip Lindsay
+Martijn van Oosterhout
+David Overstrom
 Corey Puffault
+Gregers Rygg
 Tim Schaub
 Christopher Schmidt
 Cameron Shorter                                                              
+Pedro Simonetti
 Paul Spencer                                                                 
+Paul Smith                                                                 
 Glen Stampoultzis
 James Stembridge
 Erik Uzureau
+Ivan Willig
+Thomas Wood
 Bill Woodall
 Steve Woodbridge
 
+Some portions of OpenLayers are used under the Apache 2.0 license, available
+in doc/licenses/APACHE-2.0.txt.
 
-OpenLayers is graciously supported by MetaCarta, Inc.
-<http://www.metacarta.com>.
+Some portions of OpenLayers are used under the MIT license, availabie in 
+doc/licenses/MIT-LICENSE.txt.
+
+Some portions of OpenLayers are Copyright 2001 Robert Penner, and are used 
+under the BSD license, available in doc/licenses/BSD-LICENSE.txt

doc/licenses/APACHE-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

doc/licenses/BSD-LICENSE.txt

@@ -0,0 +1,28 @@
+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.

doc/licenses/MIT-LICENSE.txt

@@ -0,0 +1,18 @@
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

doc/readme.txt

@@ -1,3 +1,3 @@
 Automatically generated OpenLayers API documentation is online:
 
-  http://dev.openlayers.org/docs/overview-tree.html
+  http://dev.openlayers.org/apidocs

doc/walkthru.html

@@ -0,0 +1,96 @@
+<html>
+<head>
+<title>OpenLayers examples walkthrough</title>
+<style type="text/css">
+    a { color:blue; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+</style>
+<base href="http://openlayers.org/dev/examples/">
+</head>
+<body style="font-family: sans-serif">
+<h1><pre style="font-size: larger">&lt;ol&gt;</pre></h1>
+<p>API documentation: <a href="http://dev.openlayers.org/docs/">http://dev.openlayers.org/docs/</a></p>
+<p>Examples: <a href="http://dev.openlayers.org/examples/">http://openlayers.org/dev/examples/</a></p>
+<h2>Maps</h2>
+<ol>
+    <li><a href="../examples/lite.html">Basic example</a></li>
+    <li><a href="../examples/layerswitcher.html">Layer switcher (aka legend)</a></li>
+    <li><a href="../examples/example.html">Base layers versus overlays</a></li>
+    <li><a href="../examples/multiserver.html">Multiple WMS mirrors</a></li>
+    <li><a href="../examples/fullScreen.html">Full screen map</a></li>
+    <li><a href="../examples/wrapDateLine.html">Wrapping the date line</a></li>
+    <li><a href="../examples/projected-map.html">Other cartographic projections</a></li>
+    <li><a href="../examples/layer-opacity.html">Translucent overlays</a></li>
+</ol>
+
+<h2>Raster Layers</h2>
+<ol>
+    <li><a href="../examples/wms-untiled.html">Untiled WMS layer</a></li>
+    <li><a href="../examples/kamap.html">Ka-Map layer</a></li>
+    <li><a href="../examples/mapserver.html">MapServer layer</a></li>
+    <li><a href="../examples/worldwind.html">Worldwind layer</a></li>
+    <li><a href="../examples/tms.html">TMS layer</a></li>
+    <li><a href="../examples/image-layer.html">Image layer</a></li>
+    <li><a href="../examples/google.html">Google layer</a></li>
+    <li><a href="../examples/ve.html">VirtualEarth layer</a></li>
+    <li><a href="../examples/spherical-mercator.html">Spherical Mercator ("EPSG:900913")</a></li>
+    <li><a href="http://tilecache.org/">TileCache</a></li>
+</ol>
+
+<h2>Marker Layers</h2>
+<ol>
+    <li><a href="../examples/markers.html">Markers</a></li>
+    <li><a href="../examples/markerResize.html">Changing marker properties dynamically</a></li>
+    <li><a href="../examples/popups.html">Popups</a></li>
+    <li><a href="../examples/georss.html">GeoRSS</a> (<a href="georss.xml">example data</a>)</a></li>
+    <li><a href="../examples/georss-markers.html">GeoRSS with custom markers</a></li>
+    <li><a href="../examples/wfs.html">Point layer from WFS</a></li>
+    <li><a href="../examples/getfeatureinfo.html">WFS GetFeatureInfo example</a></li>
+</ol>
+
+<h2>Events and Controls</h2>
+<ol>
+    <li><a href="../examples/navtoolbar.html">Navigation tools on the map</a></li>
+    <li><a href="../examples/navtoolbar-outsidemap.html">Navigation toolbar off the map</a></li>
+    <li><a href="../examples/mouse-position.html">Tracking the mouse position</a></li>
+    <li><a href="../examples/overview.html">Overview map</a></li>
+    <li><a href="../examples/attribution.html">Layer attribution</a></li>
+    <li><a href="../examples/controls.html">Full range of controls</a></li>
+    <li><a href="../examples/custom-control.html">Custom controls #1</a></li>
+    <li><a href="../examples/custom-control.html">Custom controls #2</a></li>
+    <li><a href="../examples/custom-style.html">Custom control styles</a></li>
+    <li><a href="../examples/click.html">Trapping click events</a></li>
+    <li><a href="../examples/layerLoadMonitoring.html">Tracking map events</a></li>
+</ol>
+
+<h2>Vector Layers</h2>
+<ol>
+    <li><a href="../examples/vector-features.html">Generating features in JavaScript</a></li>
+    <li><a href="../examples/gml-layer.html">Loading features from GML</a></li>
+    <li><a href="../examples/kml-layer.html">Loading features from KML</a></li>
+    <li><a href="../examples/gml-serialize.html">Serializing features to GML</a></li>
+    <li><a href="../examples/vector-formats.html">Serializing to other formats</a></li>
+    <li><a href="../examples/select-feature.html">Selecting features</a></li>
+    <li><a href="../examples/select-feature-openpopup.html">Attaching popups to features</a></li>
+</ol>
+
+<h2>Editing Tools</h2>
+<ol>
+    <li><a href="../examples/draw-feature.html">Drawing features</a></li>
+    <li><a href="../examples/editingtoolbar.html">Editing toolbar</a> (<a href="editingtoolbar-outside.html">outside the map</a>)</li>
+    <li><a href="../examples/regular-polygons.html">Creating regular polygons</a></li>
+    <li><a href="../examples/modify-feature.html">Modifying features</a></li>
+    <li><a href="../examples/resize-features.html">Resizing features</a></li>
+    <li><a href="../examples/rotate-features.html">Rotating features</a></li>
+    <li><a href="../examples/wfs-t.html">Transactional WFS example</a></li>
+    <li><a href="http://featureserver.org/">FeatureServer</a></li>
+</ol>
+
+<h2>Testing</h2>
+<ol>
+    <li><a href="../tests/run-tests.html">Test.AnotherWay suite</a></li>
+</ol>
+
+<h1><pre style="font-size: larger">&lt;/ol&gt;</pre></h1>
+</body>
+</html>

doc_config/Languages.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 # This is the Natural Docs languages file for this project.  If you change
 # anything here, it will apply to THIS PROJECT ONLY.  If you'd like to change

doc_config/Menu.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 
 Title: OpenLayers
@@ -8,6 +8,22 @@ SubTitle: JavaScript Mapping Library
 # Footer: [text]
 # If you want to add a copyright notice, this would be the place to do it.
 
+# You can add a timestamp to your documentation like one of these:
+# Timestamp: Generated on month day, year
+# Timestamp: Updated mm/dd/yyyy
+# Timestamp: Last updated mon day
+#
+#   m     - One or two digit month.  January is "1"
+#   mm    - Always two digit month.  January is "01"
+#   mon   - Short month word.  January is "Jan"
+#   month - Long month word.  January is "January"
+#   d     - One or two digit day.  1 is "1"
+#   dd    - Always two digit day.  1 is "01"
+#   day   - Day with letter extension.  1 is "1st"
+#   yy    - Two digit year.  2006 is "06"
+#   yyyy  - Four digit year.  2006 is "2006"
+#   year  - Four digit year.  2006 is "2006"
+
 
 # --------------------------------------------------------------------------
 # 
@@ -29,10 +45,9 @@ SubTitle: JavaScript Mapping Library
 # --------------------------------------------------------------------------
 
 
-File: OpenLayers  (OpenLayers.js)
-
 Group: OpenLayers  {
 
+   File: OpenLayers  (no auto-title, OpenLayers.js)
    File: Ajax  (no auto-title, OpenLayers/Ajax.js)
 
    Group: BaseTypes  {
@@ -50,55 +65,110 @@ Group: OpenLayers  {
 
    Group: Control  {
 
-      File: Control  (OpenLayers/Control.js)
+      File: Control  (no auto-title, OpenLayers/Control.js)
       File: ArgParser  (no auto-title, OpenLayers/Control/ArgParser.js)
-      File: ZoomToMaxExtent  (no auto-title, OpenLayers/Control/ZoomToMaxExtent.js)
-      File: OverviewMap  (no auto-title, OpenLayers/Control/OverviewMap.js)
+      File: Attribution  (no auto-title, OpenLayers/Control/Attribution.js)
+      File: Button  (no auto-title, OpenLayers/Control/Button.js)
       File: DragFeature  (no auto-title, OpenLayers/Control/DragFeature.js)
       File: DragPan  (no auto-title, OpenLayers/Control/DragPan.js)
       File: DrawFeature  (no auto-title, OpenLayers/Control/DrawFeature.js)
       File: EditingToolbar  (no auto-title, OpenLayers/Control/EditingToolbar.js)
       File: KeyboardDefaults  (no auto-title, OpenLayers/Control/KeyboardDefaults.js)
       File: LayerSwitcher  (no auto-title, OpenLayers/Control/LayerSwitcher.js)
+      File: Measure  (no auto-title, OpenLayers/Control/Measure.js)
+      File: ModifyFeature  (no auto-title, OpenLayers/Control/ModifyFeature.js)
       File: MouseDefaults  (no auto-title, OpenLayers/Control/MouseDefaults.js)
       File: MousePosition  (no auto-title, OpenLayers/Control/MousePosition.js)
       File: MouseToolbar  (no auto-title, OpenLayers/Control/MouseToolbar.js)
       File: Navigation  (no auto-title, OpenLayers/Control/Navigation.js)
+      File: NavigationHistory  (no auto-title, OpenLayers/Control/NavigationHistory.js)
       File: NavToolbar  (no auto-title, OpenLayers/Control/NavToolbar.js)
+      File: OverviewMap  (no auto-title, OpenLayers/Control/OverviewMap.js)
+      File: Pan  (no auto-title, OpenLayers/Control/Pan.js)
       File: Panel  (no auto-title, OpenLayers/Control/Panel.js)
+      File: PanPanel  (no auto-title, OpenLayers/Control/PanPanel.js)
+      File: PanZoom  (no auto-title, OpenLayers/Control/PanZoom.js)
       File: PanZoomBar  (no auto-title, OpenLayers/Control/PanZoomBar.js)
       File: Permalink  (no auto-title, OpenLayers/Control/Permalink.js)
       File: Scale  (no auto-title, OpenLayers/Control/Scale.js)
+      File: ScaleLine  (no auto-title, OpenLayers/Control/ScaleLine.js)
       File: SelectFeature  (no auto-title, OpenLayers/Control/SelectFeature.js)
       File: ZoomBox  (no auto-title, OpenLayers/Control/ZoomBox.js)
-      File: PanZoom  (no auto-title, OpenLayers/Control/PanZoom.js)
+      File: ZoomIn  (no auto-title, OpenLayers/Control/ZoomIn.js)
+      File: ZoomOut  (no auto-title, OpenLayers/Control/ZoomOut.js)
+      File: ZoomPanel  (no auto-title, OpenLayers/Control/ZoomPanel.js)
+      File: ZoomToMaxExtent  (no auto-title, OpenLayers/Control/ZoomToMaxExtent.js)
       }  # Group: Control
 
    File: Events  (no auto-title, OpenLayers/Events.js)
 
    Group: Feature  {
 
-      File: Feature  (OpenLayers/Feature.js)
-      File: WFS  (no auto-title, OpenLayers/Feature/WFS.js)
+      File: Feature  (no auto-title, OpenLayers/Feature.js)
       File: Vector  (no auto-title, OpenLayers/Feature/Vector.js)
+      File: WFS  (no auto-title, OpenLayers/Feature/WFS.js)
       }  # Group: Feature
 
+   Group: Filter  {
+
+      File: Filter  (no auto-title, OpenLayers/Filter.js)
+      File: Comparison  (no auto-title, OpenLayers/Filter/Comparison.js)
+      File: FeatureId  (no auto-title, OpenLayers/Filter/FeatureId.js)
+      File: Logical  (no auto-title, OpenLayers/Filter/Logical.js)
+      File: Spatial  (no auto-title, OpenLayers/Filter/Spatial.js)
+      }  # Group: Filter
+
    Group: Format  {
 
-      File: Format  (OpenLayers/Format.js)
+      File: Format  (no auto-title, OpenLayers/Format.js)
+
+      Group: Filter  {
+
+         File: Filter  (no auto-title, OpenLayers/Format/Filter.js)
+         File: v1  (no auto-title, OpenLayers/Format/Filter/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/Filter/v1_0_0.js)
+         }  # Group: Filter
+
       File: GeoJSON  (no auto-title, OpenLayers/Format/GeoJSON.js)
       File: GeoRSS  (no auto-title, OpenLayers/Format/GeoRSS.js)
+
+      Group: GML  {
+
          File: GML  (no auto-title, OpenLayers/Format/GML.js)
+         File: Base  (no auto-title, OpenLayers/Format/GML/Base.js)
+         File: v2  (no auto-title, OpenLayers/Format/GML/v2.js)
+         File: v3  (no auto-title, OpenLayers/Format/GML/v3.js)
+         }  # Group: GML
+
+      File: GPX  (no auto-title, OpenLayers/Format/GPX.js)
       File: JSON  (no auto-title, OpenLayers/Format/JSON.js)
       File: KML  (no auto-title, OpenLayers/Format/KML.js)
+      File: OSM  (no auto-title, OpenLayers/Format/OSM.js)
+      File: Text  (no auto-title, OpenLayers/Format/Text.js)
       File: WFS  (no auto-title, OpenLayers/Format/WFS.js)
       File: WKT  (no auto-title, OpenLayers/Format/WKT.js)
       File: XML  (no auto-title, OpenLayers/Format/XML.js)
+
+      Group: SLD  {
+
+         File: SLD  (no auto-title, OpenLayers/Format/SLD.js)
+         File: v1  (no auto-title, OpenLayers/Format/SLD/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/SLD/v1_0_0.js)
+         }  # Group: SLD
+
+      Group: WMC  {
+
+         File: WMC  (no auto-title, OpenLayers/Format/WMC.js)
+         File: v1  (no auto-title, OpenLayers/Format/WMC/v1.js)
+         File: v1_0_0  (no auto-title, OpenLayers/Format/WMC/v1_0_0.js)
+         File: v1_1_0  (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
+         }  # Group: WMC
+
       }  # Group: Format
 
    Group: Geometry  {
 
-      File: Geometry  (OpenLayers/Geometry.js)
+      File: Geometry  (no auto-title, OpenLayers/Geometry.js)
       File: Collection  (no auto-title, OpenLayers/Geometry/Collection.js)
       File: Curve  (no auto-title, OpenLayers/Geometry/Curve.js)
       File: LinearRing  (no auto-title, OpenLayers/Geometry/LinearRing.js)
@@ -109,15 +179,16 @@ Group: OpenLayers  {
       File: Point  (no auto-title, OpenLayers/Geometry/Point.js)
       File: Polygon  (no auto-title, OpenLayers/Geometry/Polygon.js)
       File: Rectangle  (no auto-title, OpenLayers/Geometry/Rectangle.js)
-      File: Surface  (no auto-title, OpenLayers/Geometry/Surface.js)
       }  # Group: Geometry
 
    Group: Handler  {
 
-      File: Handler  (OpenLayers/Handler.js)
+      File: Handler  (no auto-title, OpenLayers/Handler.js)
       File: Box  (no auto-title, OpenLayers/Handler/Box.js)
+      File: Click  (no auto-title, OpenLayers/Handler/Click.js)
       File: Drag  (no auto-title, OpenLayers/Handler/Drag.js)
       File: Feature  (no auto-title, OpenLayers/Handler/Feature.js)
+      File: Hover  (no auto-title, OpenLayers/Handler/Hover.js)
       File: Keyboard  (no auto-title, OpenLayers/Handler/Keyboard.js)
       File: MouseWheel  (no auto-title, OpenLayers/Handler/MouseWheel.js)
       File: Path  (no auto-title, OpenLayers/Handler/Path.js)
@@ -128,9 +199,26 @@ Group: OpenLayers  {
 
    File: Icon  (no auto-title, OpenLayers/Icon.js)
 
+   Group: Lang  {
+
+      File: Lang  (no auto-title, OpenLayers/Lang.js)
+      File: cs-CZ  (no auto-title, OpenLayers/Lang/cs-CZ.js)
+      File: de  (no auto-title, OpenLayers/Lang/de.js)
+      File: en  (no auto-title, OpenLayers/Lang/en.js)
+      File: en-CA  (no auto-title, OpenLayers/Lang/en-CA.js)
+      File: fr  (no auto-title, OpenLayers/Lang/fr.js)
+      File: it  (no auto-title, OpenLayers/Lang/it.js)
+      File: nb  (no auto-title, OpenLayers/Lang/nb.js)
+      File: nl  (no auto-title, OpenLayers/Lang/nl.js)
+      File: pt-BR  (no auto-title, OpenLayers/Lang/pt-BR.js)
+      File: sv-SE  (no auto-title, OpenLayers/Lang/sv-SE.js)
+      File: zh-CN  (no auto-title, OpenLayers/Lang/zh-CN.js)
+      File: zh-TW  (no auto-title, OpenLayers/Lang/zh-TW.js)
+      }  # Group: Lang
+
    Group: Layer  {
 
-      File: Layer  (OpenLayers/Layer.js)
+      File: Layer  (no auto-title, OpenLayers/Layer.js)
       File: Boxes  (no auto-title, OpenLayers/Layer/Boxes.js)
       File: EventPane  (no auto-title, OpenLayers/Layer/EventPane.js)
       File: FixedZoomLevels  (no auto-title, OpenLayers/Layer/FixedZoomLevels.js)
@@ -141,10 +229,13 @@ Group: OpenLayers  {
       File: HTTPRequest  (no auto-title, OpenLayers/Layer/HTTPRequest.js)
       File: Image  (no auto-title, OpenLayers/Layer/Image.js)
       File: KaMap  (no auto-title, OpenLayers/Layer/KaMap.js)
+      File: KaMapCache  (no auto-title, OpenLayers/Layer/KaMapCache.js)
+      File: MapGuide  (no auto-title, OpenLayers/Layer/MapGuide.js)
       File: MapServer  (no auto-title, OpenLayers/Layer/MapServer.js)
       File: MapServer.Untiled  (no auto-title, OpenLayers/Layer/MapServer/Untiled.js)
       File: Markers  (no auto-title, OpenLayers/Layer/Markers.js)
       File: MultiMap  (no auto-title, OpenLayers/Layer/MultiMap.js)
+      File: PointTrack  (no auto-title, OpenLayers/Layer/PointTrack.js)
       File: SphericalMercator  (no auto-title, OpenLayers/Layer/SphericalMercator.js)
       File: Text  (no auto-title, OpenLayers/Layer/Text.js)
       File: TileCache  (no auto-title, OpenLayers/Layer/TileCache.js)
@@ -168,27 +259,66 @@ Group: OpenLayers  {
 
    Group: Popup  {
 
-      File: Popup  (OpenLayers/Popup.js)
+      File: Popup  (no auto-title, OpenLayers/Popup.js)
       File: Anchored  (no auto-title, OpenLayers/Popup/Anchored.js)
       File: AnchoredBubble  (no auto-title, OpenLayers/Popup/AnchoredBubble.js)
+      File: Framed  (no auto-title, OpenLayers/Popup/Framed.js)
+      File: FramedCloud  (no auto-title, OpenLayers/Popup/FramedCloud.js)
       }  # Group: Popup
 
+   File: Projection  (no auto-title, OpenLayers/Projection.js)
+
+   Group: Protocol  {
+
+      File: Protocol  (no auto-title, OpenLayers/Protocol.js)
+      File: HTTP  (no auto-title, OpenLayers/Protocol/HTTP.js)
+
+      Group: SQL  {
+
+         File: SQL  (no auto-title, OpenLayers/Protocol/SQL.js)
+         File: Gears  (no auto-title, OpenLayers/Protocol/SQL/Gears.js)
+         }  # Group: SQL
+
+      }  # Group: Protocol
+
    Group: Renderer  {
 
-      File: Renderer  (OpenLayers/Renderer.js)
+      File: Renderer  (no auto-title, OpenLayers/Renderer.js)
+      File: Canvas  (no auto-title, OpenLayers/Renderer/Canvas.js)
       File: Elements  (no auto-title, OpenLayers/Renderer/Elements.js)
       File: SVG  (no auto-title, OpenLayers/Renderer/SVG.js)
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 
+   Group: Request  {
+
+      File: Request  (no auto-title, OpenLayers/Request.js)
+      File: XMLHttpRequest  (no auto-title, OpenLayers/Request/XMLHttpRequest.js)
+      }  # Group: Request
+
+   File: Rule  (no auto-title, OpenLayers/Rule.js)
+
+   Group: Strategy  {
+
+      File: Strategy  (no auto-title, OpenLayers/Strategy.js)
+      File: BBOX  (no auto-title, OpenLayers/Strategy/BBOX.js)
+      File: Cluster  (no auto-title, OpenLayers/Strategy/Cluster.js)
+      File: Fixed  (no auto-title, OpenLayers/Strategy/Fixed.js)
+      File: Paging  (no auto-title, OpenLayers/Strategy/Paging.js)
+      }  # Group: Strategy
+
+   File: Style  (no auto-title, OpenLayers/Style.js)
+   File: StyleMap  (no auto-title, OpenLayers/StyleMap.js)
+
    Group: Tile  {
 
-      File: Tile  (OpenLayers/Tile.js)
+      File: Tile  (no auto-title, OpenLayers/Tile.js)
       File: Image  (no auto-title, OpenLayers/Tile/Image.js)
       File: WFS  (no auto-title, OpenLayers/Tile/WFS.js)
       }  # Group: Tile
 
-   File: Util  (OpenLayers/Util.js)
+   File: Tween  (no auto-title, OpenLayers/Tween.js)
+   File: Util  (no auto-title, OpenLayers/Util.js)
    }  # Group: OpenLayers
 
 Group: Index  {

doc_config/Topics.txt

@@ -1,4 +1,4 @@
-Format: 1.35
+Format: Development Release 12-07-2007 (1.35 base)
 
 # This is the Natural Docs topics file for this project.  If you change anything
 # here, it will apply to THIS PROJECT ONLY.  If you'd like to change something
@@ -55,9 +55,6 @@ Format: 1.35
 # Class Hierarchy: [yes|no]
 #    Whether the topics are part of the class hierarchy.  Defaults to no.
 #
-# Variable Type: [yes|no]
-#    Whether the topics can be a variable type.  Defaults to no.
-#
 # Page Title If First: [yes|no]
 #    Whether the topic's title becomes the page title if it's the first one in
 #    a file.  Defaults to no.

examples/GMLParser.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <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) {
@@ -21,7 +17,7 @@
             }
                 html += "</ul>"
           }
-          document.body.innerHTML = html;
+          document.getElementById('output').innerHTML = html;
         }
         function load() {
             OpenLayers.loadURL("gml/owls.xml", "", null, parseData);
@@ -29,5 +25,19 @@
     </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/Jugl.js

@@ -0,0 +1,84 @@
+/**
+ * Jugl.js -- JavaScript Template Library
+ *
+ * Copyright 2007 Tim Schaub
+ * Released under the MIT license.  Please see
+ * http://svn.tschaub.net/jugl/trunk/license.txt for the full license.
+ */
+
+(function(){var Jugl={prefix:"jugl",namespaceURI:"http://namespace.jugl.org/"};Jugl.Array={indexOf:function(array,obj){for(var i=0;i<array.length;i++){if(array[i]==obj)return i;}
+return-1;}};Jugl.Function={bind:function(method,object){var args=[];for(var i=2;i<arguments.length;++i){args.push(arguments[i]);}
+return function(){for(var i=0;i<arguments.length;++i){args.push(arguments[i]);}
+return method.apply(object,args);}}};Jugl.Node={appendChild:function(parent,child){if(typeof(parent)=="string"){var obj=document.getElementById(parent);if(!obj){throw Error("Element id not found: "+parent);}
+parent=obj;}
+if(typeof(child)=="string"){var obj=document.getElementById(child);if(!obj){throw Error("Element id not found: "+child);}
+child=obj;}
+if(child.namespaceURI&&child.xml){var wrapper=document.createElement('div');wrapper.innerHTML=child.xml;var children=wrapper.childNodes;for(var i=0;i<children.length;++i){parent.appendChild(children[i]);}}else{if(parent.ownerDocument&&parent.ownerDocument.importNode){child=parent.ownerDocument.importNode(child,true);}
+parent.appendChild(child);}
+return child;}};Jugl.Object={extend:function(destination,source){destination=destination||{};source=source||{};for(property in source){destination[property]=source[property];}
+return destination;},applyDefaults:function(destination,source){destination=destination||{};source=source||{};for(property in source){if(destination[property]===undefined){destination[property]=source[property];}}
+return destination;}};Jugl.Request={loadTemplate:function(url,onComplete,caller){var createTemplate=function(request){var doc,template;try{doc=request.responseXML;template=new Jugl.Template(doc.documentElement);}catch(invalidXML){try{doc=document.createElement("div");doc.innerHTML=request.responseText;template=new Jugl.Template(doc.firstChild);}catch(invalidHTML){var msg="Can't make HTML out of response: "+
+request.responseText;Jugl.Console.error(msg);throw invalidHTML;}}
+var complete=Jugl.Function.bind(onComplete,caller);complete(template);}
+Jugl.Request.loadUrl(url,createTemplate);},loadUrl:function(url,onComplete,caller){var complete=(caller)?Jugl.Function.bind(onComplete,caller):onComplete;var request=Jugl.Request.createXMLHttpRequest();request.open("GET",url);request.onreadystatechange=function(){if(request.readyState==4){complete(request);}}
+request.send(null);},createXMLHttpRequest:function(){if(typeof XMLHttpRequest!="undefined"){return new XMLHttpRequest();}else if(typeof ActiveXObject!="undefined"){return new ActiveXObject("Microsoft.XMLHTTP");}else{throw new Error("XMLHttpRequest not supported");}}};Jugl.Class=function(){var Class=function(){if(this===Jugl){var msg="Create an instance of a Jugl "+"class with the new keyword";throw Error(msg);}
+this.initialize.apply(this,arguments);}
+var extended={toString:function(){return"["+this.CLASS_NAME+"]";}};var parent;for(var i=0;i<arguments.length;++i){if(typeof arguments[i]=="function"){parent=arguments[i].prototype;}else{parent=arguments[i];}
+Jugl.Object.extend(extended,parent);}
+Class.prototype=extended;return Class;};Jugl.Console={log:function(){},debug:function(){},info:function(){},warn:function(){},error:function(){},assert:function(){},dir:function(){},dirxml:function(){},trace:function(){},group:function(){},groupEnd:function(){},time:function(){},timeEnd:function(){},profile:function(){},profileEnd:function(){},count:function(){}};(function(){if(window.console){var scripts=document.getElementsByTagName("script");for(var i=0;i<scripts.length;++i){if(scripts[i].src.indexOf("firebug.js")!=-1){Jugl.Object.extend(Jugl.Console,console);break;}}}})();Jugl.Attribute=Jugl.Class({element:null,node:null,type:null,nodeValue:null,template:null,initialize:function(element,node,type){this.element=element;this.node=node;this.type=type;this.nodeValue=node.nodeValue;this.nodeName=node.nodeName;this.template=element.template;},splitAttributeValue:function(value){value=(value!=null)?value:this.nodeValue;var matches=this.template.regExes.trimSpace.exec(value);var items;if(matches&&matches.length==3){items=[matches[1],matches[2]];}
+return items;},splitExpressionPrefix:function(){var items=this.splitAttributeValue();if(!items||(items[0]!='structure'&&items[0]!='text')){items=[null,this.nodeValue];}
+return items;},getAttributeValues:function(){var trimmed=this.nodeValue.replace(/[\t\n]/g,"").replace(/;\s*$/,"");var tabbed=trimmed.replace(/;;/g,"\t");var newlined=tabbed.split(";").join("\n");return newlined.replace(/\t/g,";").split(/\n/g);},removeSelf:function(){this.element.removeAttributeNode(this);},process:function(){return this.processAttribute[this.type].apply(this,[]);},evalInScope:function(str){var expression="with(this.element.scope){"+str+"}";return eval(expression);},processAttribute:{"define":function(){var values=this.getAttributeValues();var pair;for(var i=0;i<values.length;++i){pair=this.splitAttributeValue(values[i]);this.element.scope[pair[0]]=this.evalInScope(pair[1]);}
+this.removeSelf();return true;},"condition":function(){var proceed;try{proceed=!!(this.evalInScope(this.nodeValue));}catch(err){var message=err.name+": "+err.message+"\n"+"attribute: "+this.nodeName;Jugl.Console.error(message);throw err;}
+this.removeSelf();if(!proceed){this.element.removeSelf();}
+return proceed;},"repeat":function(){var pair=this.splitAttributeValue();var key=pair[0];var list=this.evalInScope(pair[1]);this.removeSelf();if(!(list instanceof Array)){var items=new Array();for(var p in list){items.push(p);}
+list=items;}
+var element;var previousSibling=this.element;var length=list.length;for(var i=0;i<length;++i){element=this.element.clone();element.scope[key]=list[i];element.scope.repeat[key]={index:i,number:i+1,even:!(i%2),odd:!!(i%2),start:(i==0),end:(i==length-1),length:length};previousSibling.insertAfter(element);element.process();previousSibling=element;}
+this.element.removeSelf();return false;},"content":function(){var pair=this.splitExpressionPrefix();var str;try{str=this.evalInScope(pair[1]);}catch(err){Jugl.Console.error("Failed to eval in element scope: "+
+pair[1]);throw err;}
+this.removeSelf();if(pair[0]=='structure'){try{this.element.node.innerHTML=str;}catch(err){var wrapper=document.createElement('div');var msg;try{wrapper.innerHTML=str;}catch(invalidHTML){msg="Can't transform string into valid HTML : "+
+str;Jugl.Console.error(msg);throw invalidHTML;}
+if(this.element.node.xml&&this.template.xmldom){while(this.element.node.firstChild){this.element.node.removeChild(this.element.node.firstChild);}
+this.template.xmldom.loadXML(wrapper.outerHTML);var children=this.template.xmldom.firstChild.childNodes;try{for(var i=0;i<children.length;++i){this.element.node.appendChild(children[i]);}}catch(invalidXML){msg="Can't transform string into valid XHTML : "+
+str;Jugl.Console.error(msg);throw invalidXML;}}else{try{this.element.node.innerHTML=wrapper.innerHTML;}catch(invalidXML){msg="Can't transform string into valid XHTML : "+
+str;Jugl.Console.error(msg);throw invalidXML;}}}}else{var text;if(this.element.node.xml&&this.template.xmldom){text=this.template.xmldom.createTextNode(str);}else{text=document.createTextNode(str);}
+var child=new Jugl.Element(this.template,text);this.element.removeChildNodes();this.element.appendChild(child);}
+return true;},"replace":function(){var pair=this.splitExpressionPrefix();var str;try{str=this.evalInScope(pair[1]);}catch(err){Jugl.Console.error("Failed to eval in element scope: "+
+pair[1]);throw err;}
+this.removeSelf();if(pair[0]=='structure'){var wrapper=document.createElement('div');try{wrapper.innerHTML=str;}catch(err){msg="Can't transform string into valid HTML : "+
+str;Jugl.Console.error(msg);throw err;}
+if(this.element.node.xml&&this.template.xmldom){try{this.template.xmldom.loadXML(wrapper.outerHTML);}catch(err){msg="Can't transform string into valid XML : "+
+str;Jugl.Console.error(msg);throw err;}
+wrapper=this.template.xmldom.firstChild;}
+while(wrapper.firstChild){var child=wrapper.removeChild(wrapper.firstChild);if(this.element.node.ownerDocument&&this.element.node.ownerDocument.importNode){if(child.ownerDocument!=this.element.node.ownerDocument){child=this.element.node.ownerDocument.importNode(child,true);}}
+this.element.node.parentNode.insertBefore(child,this.element.node);}}else{var text;if(this.element.node.xml&&this.template.xmldom){text=this.template.xmldom.createTextNode(str);}else{text=document.createTextNode(str);}
+var replacement=new Jugl.Element(this.template,text);this.element.insertBefore(replacement);}
+this.element.removeSelf();return true;},"attributes":function(){var values=this.getAttributeValues();var pair,name,value;for(var i=0;i<values.length;++i){pair=this.splitAttributeValue(values[i]);name=pair[0];value=this.evalInScope(pair[1]);if(value!==false){this.element.setAttribute(name,value);}}
+this.removeSelf();return true;},"omit-tag":function(){var omit;try{omit=((this.nodeValue=="")||!!(this.evalInScope(this.nodeValue)));}catch(err){Jugl.Console.error("Failed to eval in element scope: "+
+this.nodeValue);throw err;}
+this.removeSelf();if(omit){var children=this.element.getChildNodes();var child;for(var i=0;i<children.length;++i){this.element.insertBefore(children[i]);}
+this.element.removeSelf();}},"reflow":function(){var reflow;try{reflow=((this.nodeValue=="")||!!(this.evalInScope(this.nodeValue)));}catch(err){Jugl.Console.error("Failed to eval in element scope: "+
+this.nodeValue);throw err;}
+this.removeSelf();if(reflow){if(this.element.node.outerHTML){this.element.node.outerHTML=this.element.node.outerHTML;}else{this.element.node.innerHTML=this.element.node.innerHTML;}}}},CLASS_NAME:"Jugl.Attribute"});Jugl.Element=Jugl.Class({template:null,node:null,scope:null,initialize:function(template,node){this.template=template;this.node=node;this.scope=new Object();this.scope.repeat=new Object();},clone:function(){var node=this.node.cloneNode(true);node.removeAttribute("id");var element=new Jugl.Element(this.template,node);Jugl.Object.extend(element.scope,this.scope);return element;},getAttribute:function(localName){var node;if(this.node.nodeType==1){if(this.template.usingNS){node=this.node.getAttributeNodeNS(Jugl.namespaceURI,localName);}else{node=this.node.getAttributeNode(Jugl.prefix+":"+
+localName);}
+if(node&&!node.specified){node=false;}}
+var attribute;if(node){attribute=new Jugl.Attribute(this,node,localName);}else{attribute=node;}
+return attribute;},setAttribute:function(name,value){this.node.setAttribute(name,value);},removeAttributeNode:function(attribute){this.node.removeAttributeNode(attribute.node);},getChildNodes:function(){var numNodes=this.node.childNodes.length;var children=new Array(numNodes);var node,scope;for(var i=0;i<numNodes;++i){node=new Jugl.Element(this.template,this.node.childNodes[i]);node.scope=Jugl.Object.extend({},this.scope);children[i]=node;}
+return children;},removeChildNodes:function(){while(this.node.hasChildNodes()){this.node.removeChild(this.node.firstChild);}},removeChild:function(element){this.node.removeChild(element.node);return node;},removeSelf:function(){this.node.parentNode.removeChild(this.node);},importNode:function(element){if(this.node.ownerDocument&&this.node.ownerDocument.importNode){if(element.node.ownerDocument!=this.node.ownerDocument){element.node=this.node.ownerDocument.importNode(element.node,true);}}},appendChild:function(element){this.importNode(element);this.node.appendChild(element.node);},insertAfter:function(element){this.importNode(element);var parent=this.node.parentNode;var sibling=this.node.nextSibling;if(sibling){parent.insertBefore(element.node,sibling);}else{parent.appendChild(element.node);}},insertBefore:function(element){this.importNode(element);var parent=this.node.parentNode;parent.insertBefore(element.node,this.node);},process:function(){var attribute;var keepProcessing=true;var series=["define","condition","repeat"];for(var i=0;i<series.length;++i){attribute=this.getAttribute(series[i]);if(attribute){try{keepProcessing=attribute.process();}catch(err){Jugl.Console.error("Failed to process "+
+series[i]+" attribute");throw err;}
+if(!keepProcessing){return;}}}
+var content=this.getAttribute("content");if(content){try{content.process();}catch(err){Jugl.Console.error("Failed to process content attribute");throw err;}}else{var replace=this.getAttribute("replace");if(replace){try{replace.process();}catch(err){Jugl.Console.error("Failed to process replace attribute");throw err;}}}
+var attributes=this.getAttribute("attributes");if(attributes){try{attributes.process();}catch(err){Jugl.Console.error("Failed to process attributes attribute");throw err;}}
+if(!content&&!replace){this.processChildNodes();}
+var omit=this.getAttribute("omit-tag");if(omit){try{omit.process();}catch(err){Jugl.Console.error("Failed to process omit-tag attribute");throw err;}}
+var reflow=this.getAttribute("reflow");if(reflow){try{reflow.process();}catch(err){Jugl.Console.error("Failed to process reflow attribute");throw err;}}},processChildNodes:function(){var children=this.getChildNodes();for(var i=0;i<children.length;++i){try{children[i].process();}catch(err){Jugl.Console.error("Failed to process child node: "+i);throw err;}}},CLASS_NAME:"Jugl.Element"});Jugl.Template=Jugl.Class({node:null,usingNS:false,xhtmlns:"http://www.w3.org/1999/xhtml",xmldom:window.ActiveXObject?new ActiveXObject("Microsoft.XMLDOM"):null,regExes:{trimSpace:(/^\s*(\w+)\s+(.*?)\s*$/)},loaded:false,loading:false,initialize:function(config){if(typeof config=="string"||(config&&config.nodeType==1)){config={node:config};}
+config=config||{};if(typeof(config.node)=="string"){config.node=document.getElementById(config.node);if(!config.node){throw Error("Element id not found: "+config.node);}}
+if(config.node){this.node=config.node;this.loaded=true;}else if(config.url){this.load({url:config.url,callback:config.callback,scope:config.scope});}},process:function(config){if(config&&!config.context&&!config.clone&&!config.string&&!config.parent){config={context:config}}
+config=Jugl.Object.applyDefaults(config,{context:null,clone:false,string:false});if(this.node.getAttributeNodeNS){if(this.node.getAttributeNodeNS(Jugl.xhtmlns,Jugl.prefix)){this.usingNS=true;}}
+var element=new Jugl.Element(this,this.node);if(config.clone){element=element.clone();}
+if(config.context){element.scope=config.context;}
+try{element.process();}catch(err){Jugl.Console.error("Failed to process "+
+this.node.nodeName+" node");throw err;}
+var data;if(config.string){if(element.node.innerHTML){data=element.node.innerHTML;}else{if(this.xmldom){data=element.node.xml;}else{var serializer=new XMLSerializer();data=serializer.serializeToString(element.node);}}}else{data=element.node;if(config.parent){if(config.clone){data=Jugl.Node.appendChild(config.parent,element.node);}else{this.appendTo(config.parent);}}}
+return data;},load:function(config){if(typeof config=="string"){config={url:config};}
+config=config||{};this.loading=true;var setNode=function(template){this.node=template.node;this.loading=false;this.loaded=true;if(config.callback){config.callback.apply(config.scope,[template]);}}
+Jugl.Request.loadTemplate(config.url,setNode,this);},appendTo:function(parent){this.node=Jugl.Node.appendChild(parent,this.node);return this;},CLASS_NAME:"Jugl.Template"});window["http://jugl.tschaub.net/trunk/lib/Jugl.js"]=Jugl;})();

examples/KMLParser.html

@@ -1,27 +1,27 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>OpenLayers KML Parser Example</title>
+    <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.KML();
+          g =  new OpenLayers.Format.KML({extractStyles: true});
           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 += "<li>Attribute "+j+":"+features[feat].attributes[j]+"</li>";
+            }
+                html += "</ul>"
+                html += "<ul>";
+            for (var j in features[feat].style) {
+                html += "<li>Style "+j+":"+features[feat].style[j]+"</li>";
             }
                 html += "</ul>"
           }
-          document.body.innerHTML = html;
+          document.getElementById('output').innerHTML = html;
         }
         function load() {
             OpenLayers.loadURL("kml/lines.kml", "", null, parseData);
@@ -29,5 +29,19 @@
     </script>
   </head>
   <body onload="load()">
+      <h1 id="title">KML Parser Example</h1>
+
+      <div id="tags"></div>
+
+      <p id="shortdesc">
+          Demonstrate the operation of the KML parser.
+      </p>
+
+      <div id="output"></div>
+
+      <div id="docs">
+          This script reads data from a KML 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/accessible.html

@@ -1,11 +1,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <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" />
         <style type="text/css">
-            #map {
-                width: 512px;
-                height: 256px;
-                border: 1px solid #eee;
-            }
             table {
                 border: 1 px solid white;
                 padding: 0;
@@ -25,6 +23,10 @@
             a:hover {
                 text-decoration: underline;
             }
+            a.api {
+                font-size:1em;
+                text-decoration:underline;
+            }
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
@@ -45,7 +47,15 @@
         </script>
     </head>
     <body onload="init()">
-        <h3>OpenLayers Example</h3>
+        <h1 id="title">Accessible Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrate how to use the KeyboardDefaults option parameter for layer types.
+        </p>
+
         <table>
             <tbody>
                 <tr>
@@ -75,7 +85,7 @@
                             pan <em>w</em>est
                         </a>
                     </td>
-                    <td id="map"></td>
+                    <td id="map" class="smallmap"></td>
                     <td>
                         <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
                            accesskey="e">
@@ -95,6 +105,8 @@
                 </tr>
             </tbody>
         </table>
+
+        <div id="docs">
             <p>Navigate the map in one of three ways:
                 <ul>
                     <li>Click on the named links to zoom and pan</li>
@@ -120,5 +132,8 @@
                     </li>
                 </ul>
             </p>
+
+            This is an example of using alternate methods to control panning and zooming.  This approach uses map.pan() and map.zoom().  You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.
+        </div>
     </body>
 </html>

examples/animated_panning.html

@@ -0,0 +1,92 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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" />
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer, running = false;
+
+        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+            defaultHandlerOptions: {
+                'single': true,
+                'delay': 200
+            },
+
+            initialize: function(options) {
+                this.handlerOptions = OpenLayers.Util.extend(
+                    {}, this.defaultHandlerOptions
+                );
+                OpenLayers.Control.prototype.initialize.apply(
+                    this, arguments
+                ); 
+                this.handler = new OpenLayers.Handler.Click(
+                    this, {
+                        'click': this.onClick 
+                    }, this.handlerOptions
+                );
+            }, 
+
+            onClick: function(evt) {  
+                map.panTo(map.getLonLatFromPixel(evt.xy));
+            }   
+
+        });
+
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+                
+            map.addLayer(layer);
+            map.zoomToMaxExtent();
+            var click = new OpenLayers.Control.Click();
+            map.addControl(click);
+            click.activate();
+            map.addControl(new OpenLayers.Control.OverviewMap());
+
+            map2 = new OpenLayers.Map('map2', {'panMethod': null} );
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+                
+            map2.addLayer(layer);
+            map2.zoomToMaxExtent();
+        }
+
+        function setCenterInterval() {
+            if (!running) {
+                setCenter();
+                running = setInterval('setCenter()', 500);
+            } else {
+                clearInterval(running);
+                running = false;
+            }    
+        }
+        
+        function setCenter() {
+            var lon = Math.random() * 360 - 180;
+            var lat = Math.random() * 180 - 90;
+            var lonlat = new OpenLayers.LonLat(lon, lat);
+            map.panTo(lonlat);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">map.panTo Example</h1>
+    <div id="tags">map.panTo</div>
+    <div id="shortdesc">Show animated panning effects in the map</div>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        <p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br />
+        The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
+        to that area, or use the pan control to pan smoothly.
+        </p>
+    </div>
+    <button onclick="setCenterInterval()">Start/stop random recenter</button>
+    <div id="map2" class="smallmap"></div>
+    <div>    
+    <p>To turn off Animated Panning, create a map with an panMethod set to
+        null. </p>
+    </div>
+  </body>
+</html>

examples/animator.js

@@ -0,0 +1,670 @@
+/*  
+	Animator.js 1.1.9
+	
+	This library is released under the BSD license:
+
+	Copyright (c) 2006, Bernard Sumption. All rights reserved.
+	
+	Redistribution and use 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 BernieCode nor
+	the names of its contributors may be used to endorse or promote products
+	derived from this software without specific prior written permission. 
+	
+	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 REGENTS 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.
+
+*/
+
+
+// Applies a sequence of numbers between 0 and 1 to a number of subjects
+// construct - see setOptions for parameters
+function Animator(options) {
+	this.setOptions(options);
+	var _this = this;
+	this.timerDelegate = function(){_this.onTimerEvent()};
+	this.subjects = [];
+	this.target = 0;
+	this.state = 0;
+	this.lastTime = null;
+};
+Animator.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			interval: 20,  // time between animation frames
+			duration: 400, // length of animation
+			onComplete: function(){},
+			onStep: function(){},
+			transition: Animator.tx.easeInOut
+		}, options);
+	},
+	// animate from the current state to provided value
+	seekTo: function(to) {
+		this.seekFromTo(this.state, to);
+	},
+	// animate from the current state to provided value
+	seekFromTo: function(from, to) {
+		this.target = Math.max(0, Math.min(1, to));
+		this.state = Math.max(0, Math.min(1, from));
+		this.lastTime = new Date().getTime();
+		if (!this.intervalId) {
+			this.intervalId = window.setInterval(this.timerDelegate, this.options.interval);
+		}
+	},
+	// animate from the current state to provided value
+	jumpTo: function(to) {
+		this.target = this.state = Math.max(0, Math.min(1, to));
+		this.propagate();
+	},
+	// seek to the opposite of the current target
+	toggle: function() {
+		this.seekTo(1 - this.target);
+	},
+	// add a function or an object with a method setState(state) that will be called with a number
+	// between 0 and 1 on each frame of the animation
+	addSubject: function(subject) {
+		this.subjects[this.subjects.length] = subject;
+		return this;
+	},
+	// remove all subjects
+	clearSubjects: function() {
+		this.subjects = [];
+	},
+	// forward the current state to the animation subjects
+	propagate: function() {
+		var value = this.options.transition(this.state);
+		for (var i=0; i<this.subjects.length; i++) {
+			if (this.subjects[i].setState) {
+				this.subjects[i].setState(value);
+			} else {
+				this.subjects[i](value);
+			}
+		}
+	},
+	// called once per frame to update the current state
+	onTimerEvent: function() {
+		var now = new Date().getTime();
+		var timePassed = now - this.lastTime;
+		this.lastTime = now;
+		var movement = (timePassed / this.options.duration) * (this.state < this.target ? 1 : -1);
+		if (Math.abs(movement) >= Math.abs(this.state - this.target)) {
+			this.state = this.target;
+		} else {
+			this.state += movement;
+		}
+		
+		try {
+			this.propagate();
+		} finally {
+			this.options.onStep.call(this);
+			if (this.target == this.state) {
+				window.clearInterval(this.intervalId);
+				this.intervalId = null;
+				this.options.onComplete.call(this);
+			}
+		}
+	},
+	// shortcuts
+	play: function() {this.seekFromTo(0, 1)},
+	reverse: function() {this.seekFromTo(1, 0)},
+	// return a string describing this Animator, for debugging
+	inspect: function() {
+		var str = "#<Animator:\n";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		str += ">";
+		return str;
+	}
+}
+// merge the properties of two objects
+Animator.applyDefaults = function(defaults, prefs) {
+	prefs = prefs || {};
+	var prop, result = {};
+	for (prop in defaults) result[prop] = prefs[prop] !== undefined ? prefs[prop] : defaults[prop];
+	return result;
+}
+// make an array from any object
+Animator.makeArray = function(o) {
+	if (o == null) return [];
+	if (!o.length) return [o];
+	var result = [];
+	for (var i=0; i<o.length; i++) result[i] = o[i];
+	return result;
+}
+// convert a dash-delimited-property to a camelCaseProperty (c/o Prototype, thanks Sam!)
+Animator.camelize = function(string) {
+	var oStringList = string.split('-');
+	if (oStringList.length == 1) return oStringList[0];
+	
+	var camelizedString = string.indexOf('-') == 0
+		? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
+		: oStringList[0];
+	
+	for (var i = 1, len = oStringList.length; i < len; i++) {
+		var s = oStringList[i];
+		camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
+	}
+	return camelizedString;
+}
+// syntactic sugar for creating CSSStyleSubjects
+Animator.apply = function(el, style, options) {
+	if (style instanceof Array) {
+		return new Animator(options).addSubject(new CSSStyleSubject(el, style[0], style[1]));
+	}
+	return new Animator(options).addSubject(new CSSStyleSubject(el, style));
+}
+// make a transition function that gradually accelerates. pass a=1 for smooth
+// gravitational acceleration, higher values for an exaggerated effect
+Animator.makeEaseIn = function(a) {
+	return function(state) {
+		return Math.pow(state, a*2); 
+	}
+}
+// as makeEaseIn but for deceleration
+Animator.makeEaseOut = function(a) {
+	return function(state) {
+		return 1 - Math.pow(1 - state, a*2); 
+	}
+}
+// make a transition function that, like an object with momentum being attracted to a point,
+// goes past the target then returns
+Animator.makeElastic = function(bounces) {
+	return function(state) {
+		state = Animator.tx.easeInOut(state);
+		return ((1-Math.cos(state * Math.PI * bounces)) * (1 - state)) + state; 
+	}
+}
+// make an Attack Decay Sustain Release envelope that starts and finishes on the same level
+// 
+Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
+	if (sustainLevel == null) sustainLevel = 0.5;
+	return function(state) {
+		if (state < attackEnd) {
+			return state / attackEnd;
+		}
+		if (state < decayEnd) {
+			return 1 - ((state - attackEnd) / (decayEnd - attackEnd) * (1 - sustainLevel));
+		}
+		if (state < sustainEnd) {
+			return sustainLevel;
+		}
+		return sustainLevel * (1 - ((state - sustainEnd) / (1 - sustainEnd)));
+	}
+}
+// make a transition function that, like a ball falling to floor, reaches the target and/
+// bounces back again
+Animator.makeBounce = function(bounces) {
+	var fn = Animator.makeElastic(bounces);
+	return function(state) {
+		state = fn(state); 
+		return state <= 1 ? state : 2-state;
+	}
+}
+ 
+// pre-made transition functions to use with the 'transition' option
+Animator.tx = {
+	easeInOut: function(pos){
+		return ((-Math.cos(pos*Math.PI)/2) + 0.5);
+	},
+	linear: function(x) {
+		return x;
+	},
+	easeIn: Animator.makeEaseIn(1.5),
+	easeOut: Animator.makeEaseOut(1.5),
+	strongEaseIn: Animator.makeEaseIn(2.5),
+	strongEaseOut: Animator.makeEaseOut(2.5),
+	elastic: Animator.makeElastic(1),
+	veryElastic: Animator.makeElastic(3),
+	bouncy: Animator.makeBounce(1),
+	veryBouncy: Animator.makeBounce(3)
+}
+
+// animates a pixel-based style property between two integer values
+function NumericalStyleSubject(els, property, from, to, units) {
+	this.els = Animator.makeArray(els);
+	if (property == 'opacity' && window.ActiveXObject) {
+		this.property = 'filter';
+	} else {
+		this.property = Animator.camelize(property);
+	}
+	this.from = parseFloat(from);
+	this.to = parseFloat(to);
+	this.units = units != null ? units : 'px';
+}
+NumericalStyleSubject.prototype = {
+	setState: function(state) {
+		var style = this.getStyle(state);
+		var visibility = (this.property == 'opacity' && state == 0) ? 'hidden' : '';
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			try {
+				this.els[i].style[this.property] = style;
+			} catch (e) {
+				// ignore fontWeight - intermediate numerical values cause exeptions in firefox
+				if (this.property != 'fontWeight') throw e;
+			}
+			if (j++ > 20) return;
+		}
+	},
+	getStyle: function(state) {
+		state = this.from + ((this.to - this.from) * state);
+		if (this.property == 'filter') return "alpha(opacity=" + Math.round(state*100) + ")";
+		if (this.property == 'opacity') return state;
+		return Math.round(state) + this.units;
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + this.units + " to " + this.to + this.units + ")\n";
+	}
+}
+
+// animates a colour based style property between two hex values
+function ColorStyleSubject(els, property, from, to) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.to = this.expandColor(to);
+	this.from = this.expandColor(from);
+	this.origFrom = from;
+	this.origTo = to;
+}
+
+ColorStyleSubject.prototype = {
+	// parse "#FFFF00" to [256, 256, 0]
+	expandColor: function(color) {
+		var hexColor, red, green, blue;
+		hexColor = ColorStyleSubject.parseColor(color);
+		if (hexColor) {
+			red = parseInt(hexColor.slice(1, 3), 16);
+			green = parseInt(hexColor.slice(3, 5), 16);
+			blue = parseInt(hexColor.slice(5, 7), 16);
+			return [red,green,blue]
+		}
+		if (window.DEBUG) {
+			alert("Invalid colour: '" + color + "'");
+		}
+	},
+	getValueForState: function(color, state) {
+		return Math.round(this.from[color] + ((this.to[color] - this.from[color]) * state));
+	},
+	setState: function(state) {
+		var color = '#'
+				+ ColorStyleSubject.toColorPart(this.getValueForState(0, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(1, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(2, state));
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = color;
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.origFrom + " to " + this.origTo + ")\n";
+	}
+}
+
+// return a properly formatted 6-digit hex colour spec, or false
+ColorStyleSubject.parseColor = function(string) {
+	var color = '#', match;
+	if(match = ColorStyleSubject.parseColor.rgbRe.exec(string)) {
+		var part;
+		for (var i=1; i<=3; i++) {
+			part = Math.max(0, Math.min(255, parseInt(match[i])));
+			color += ColorStyleSubject.toColorPart(part);
+		}
+		return color;
+	}
+	if (match = ColorStyleSubject.parseColor.hexRe.exec(string)) {
+		if(match[1].length == 3) {
+			for (var i=0; i<3; i++) {
+				color += match[1].charAt(i) + match[1].charAt(i);
+			}
+			return color;
+		}
+		return '#' + match[1];
+	}
+	return false;
+}
+// convert a number to a 2 digit hex string
+ColorStyleSubject.toColorPart = function(number) {
+	if (number > 255) number = 255;
+	var digits = number.toString(16);
+	if (number < 16) return '0' + digits;
+	return digits;
+}
+ColorStyleSubject.parseColor.rgbRe = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
+ColorStyleSubject.parseColor.hexRe = /^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+// Animates discrete styles, i.e. ones that do not scale but have discrete values
+// that can't be interpolated
+function DiscreteStyleSubject(els, property, from, to, threshold) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.from = from;
+	this.to = to;
+	this.threshold = threshold || 0.5;
+}
+
+DiscreteStyleSubject.prototype = {
+	setState: function(state) {
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = state <= this.threshold ? this.from : this.to; 
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + " to " + this.to + " @ " + this.threshold + ")\n";
+	}
+}
+
+// animates between two styles defined using CSS.
+// if style1 and style2 are present, animate between them, if only style1
+// is present, animate between the element's current style and style1
+function CSSStyleSubject(els, style1, style2) {
+	els = Animator.makeArray(els);
+	this.subjects = [];
+	if (els.length == 0) return;
+	var prop, toStyle, fromStyle;
+	if (style2) {
+		fromStyle = this.parseStyle(style1, els[0]);
+		toStyle = this.parseStyle(style2, els[0]);
+	} else {
+		toStyle = this.parseStyle(style1, els[0]);
+		fromStyle = {};
+		for (prop in toStyle) {
+			fromStyle[prop] = CSSStyleSubject.getStyle(els[0], prop);
+		}
+	}
+	// remove unchanging properties
+	var prop;
+	for (prop in fromStyle) {
+		if (fromStyle[prop] == toStyle[prop]) {
+			delete fromStyle[prop];
+			delete toStyle[prop];
+		}
+	}
+	// discover the type (numerical or colour) of each style
+	var prop, units, match, type, from, to;
+	for (prop in fromStyle) {
+		var fromProp = String(fromStyle[prop]);
+		var toProp = String(toStyle[prop]);
+		if (toStyle[prop] == null) {
+			if (window.DEBUG) alert("No to style provided for '" + prop + '"');
+			continue;
+		}
+		
+		if (from = ColorStyleSubject.parseColor(fromProp)) {
+			to = ColorStyleSubject.parseColor(toProp);
+			type = ColorStyleSubject;
+		} else if (fromProp.match(CSSStyleSubject.numericalRe)
+				&& toProp.match(CSSStyleSubject.numericalRe)) {
+			from = parseFloat(fromProp);
+			to = parseFloat(toProp);
+			type = NumericalStyleSubject;
+			match = CSSStyleSubject.numericalRe.exec(fromProp);
+			var reResult = CSSStyleSubject.numericalRe.exec(toProp);
+			if (match[1] != null) {
+				units = match[1];
+			} else if (reResult[1] != null) {
+				units = reResult[1];
+			} else {
+				units = reResult;
+			}
+		} else if (fromProp.match(CSSStyleSubject.discreteRe)
+				&& toProp.match(CSSStyleSubject.discreteRe)) {
+			from = fromProp;
+			to = toProp;
+			type = DiscreteStyleSubject;
+			units = 0;   // hack - how to get an animator option down to here
+		} else {
+			if (window.DEBUG) {
+				alert("Unrecognised format for value of "
+					+ prop + ": '" + fromStyle[prop] + "'");
+			}
+			continue;
+		}
+		this.subjects[this.subjects.length] = new type(els, prop, from, to, units);
+	}
+}
+
+CSSStyleSubject.prototype = {
+	// parses "width: 400px; color: #FFBB2E" to {width: "400px", color: "#FFBB2E"}
+	parseStyle: function(style, el) {
+		var rtn = {};
+		// if style is a rule set
+		if (style.indexOf(":") != -1) {
+			var styles = style.split(";");
+			for (var i=0; i<styles.length; i++) {
+				var parts = CSSStyleSubject.ruleRe.exec(styles[i]);
+				if (parts) {
+					rtn[parts[1]] = parts[2];
+				}
+			}
+		}
+		// else assume style is a class name
+		else {
+			var prop, value, oldClass;
+			oldClass = el.className;
+			el.className = style;
+			for (var i=0; i<CSSStyleSubject.cssProperties.length; i++) {
+				prop = CSSStyleSubject.cssProperties[i];
+				value = CSSStyleSubject.getStyle(el, prop);
+				if (value != null) {
+					rtn[prop] = value;
+				}
+			}
+			el.className = oldClass;
+		}
+		return rtn;
+		
+	},
+	setState: function(state) {
+		for (var i=0; i<this.subjects.length; i++) {
+			this.subjects[i].setState(state);
+		}
+	},
+	inspect: function() {
+		var str = "";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		return str;
+	}
+}
+// get the current value of a css property, 
+CSSStyleSubject.getStyle = function(el, property){
+	var style;
+	if(document.defaultView && document.defaultView.getComputedStyle){
+		style = document.defaultView.getComputedStyle(el, "").getPropertyValue(property);
+		if (style) {
+			return style;
+		}
+	}
+	property = Animator.camelize(property);
+	if(el.currentStyle){
+		style = el.currentStyle[property];
+	}
+	return style || el.style[property]
+}
+
+
+CSSStyleSubject.ruleRe = /^\s*([a-zA-Z\-]+)\s*:\s*(\S(.+\S)?)\s*$/;
+CSSStyleSubject.numericalRe = /^-?\d+(?:\.\d+)?(%|[a-zA-Z]{2})?$/;
+CSSStyleSubject.discreteRe = /^\w+$/;
+
+// required because the style object of elements isn't enumerable in Safari
+/*
+CSSStyleSubject.cssProperties = ['background-color','border','border-color','border-spacing',
+'border-style','border-top','border-right','border-bottom','border-left','border-top-color',
+'border-right-color','border-bottom-color','border-left-color','border-top-width','border-right-width',
+'border-bottom-width','border-left-width','border-width','bottom','color','font-size','font-size-adjust',
+'font-stretch','font-style','height','left','letter-spacing','line-height','margin','margin-top',
+'margin-right','margin-bottom','margin-left','marker-offset','max-height','max-width','min-height',
+'min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding',
+'padding-top','padding-right','padding-bottom','padding-left','quotes','right','size','text-indent',
+'top','width','word-spacing','z-index','opacity','outline-offset'];*/
+
+
+CSSStyleSubject.cssProperties = ['azimuth','background','background-attachment','background-color','background-image','background-position','background-repeat','border-collapse','border-color','border-spacing','border-style','border-top','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','border-top-width','border-right-width','border-bottom-width','border-left-width','border-width','bottom','clear','clip','color','content','cursor','direction','display','elevation','empty-cells','css-float','font','font-family','font-size','font-size-adjust','font-stretch','font-style','font-variant','font-weight','height','left','letter-spacing','line-height','list-style','list-style-image','list-style-position','list-style-type','margin','margin-top','margin-right','margin-bottom','margin-left','max-height','max-width','min-height','min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding','padding-top','padding-right','padding-bottom','padding-left','pause','position','right','size','table-layout','text-align','text-decoration','text-indent','text-shadow','text-transform','top','vertical-align','visibility','white-space','width','word-spacing','z-index','opacity','outline-offset','overflow-x','overflow-y'];
+
+
+// chains several Animator objects together
+function AnimatorChain(animators, options) {
+	this.animators = animators;
+	this.setOptions(options);
+	for (var i=0; i<this.animators.length; i++) {
+		this.listenTo(this.animators[i]);
+	}
+	this.forwards = false;
+	this.current = 0;
+}
+
+AnimatorChain.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			// by default, each call to AnimatorChain.play() calls jumpTo(0) of each animator
+			// before playing, which can cause flickering if you have multiple animators all
+			// targeting the same element. Set this to false to avoid this.
+			resetOnPlay: true
+		}, options);
+	},
+	// play each animator in turn
+	play: function() {
+		this.forwards = true;
+		this.current = -1;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(0);
+			}
+		}
+		this.advance();
+	},
+	// play all animators backwards
+	reverse: function() {
+		this.forwards = false;
+		this.current = this.animators.length;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(1);
+			}
+		}
+		this.advance();
+	},
+	// if we have just play()'d, then call reverse(), and vice versa
+	toggle: function() {
+		if (this.forwards) {
+			this.seekTo(0);
+		} else {
+			this.seekTo(1);
+		}
+	},
+	// internal: install an event listener on an animator's onComplete option
+	// to trigger the next animator
+	listenTo: function(animator) {
+		var oldOnComplete = animator.options.onComplete;
+		var _this = this;
+		animator.options.onComplete = function() {
+			if (oldOnComplete) oldOnComplete.call(animator);
+			_this.advance();
+		}
+	},
+	// play the next animator
+	advance: function() {
+		if (this.forwards) {
+			if (this.animators[this.current + 1] == null) return;
+			this.current++;
+			this.animators[this.current].play();
+		} else {
+			if (this.animators[this.current - 1] == null) return;
+			this.current--;
+			this.animators[this.current].reverse();
+		}
+	},
+	// this function is provided for drop-in compatibility with Animator objects,
+	// but only accepts 0 and 1 as target values
+	seekTo: function(target) {
+		if (target <= 0) {
+			this.forwards = false;
+			this.animators[this.current].seekTo(0);
+		} else {
+			this.forwards = true;
+			this.animators[this.current].seekTo(1);
+		}
+	}
+}
+
+// an Accordion is a class that creates and controls a number of Animators. An array of elements is passed in,
+// and for each element an Animator and a activator button is created. When an Animator's activator button is
+// clicked, the Animator and all before it seek to 0, and all Animators after it seek to 1. This can be used to
+// create the classic Accordion effect, hence the name.
+// see setOptions for arguments
+function Accordion(options) {
+	this.setOptions(options);
+	var selected = this.options.initialSection, current;
+	if (this.options.rememberance) {
+		current = document.location.hash.substring(1);
+	}
+	this.rememberanceTexts = [];
+	this.ans = [];
+	var _this = this;
+	for (var i=0; i<this.options.sections.length; i++) {
+		var el = this.options.sections[i];
+		var an = new Animator(this.options.animatorOptions);
+		var from = this.options.from + (this.options.shift * i);
+		var to = this.options.to + (this.options.shift * i);
+		an.addSubject(new NumericalStyleSubject(el, this.options.property, from, to, this.options.units));
+		an.jumpTo(0);
+		var activator = this.options.getActivator(el);
+		activator.index = i;
+		activator.onclick = function(){_this.show(this.index)};
+		this.ans[this.ans.length] = an;
+		this.rememberanceTexts[i] = activator.innerHTML.replace(/\s/g, "");
+		if (this.rememberanceTexts[i] === current) {
+			selected = i;
+		}
+	}
+	this.show(selected);
+}
+
+Accordion.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Object.extend({
+			// REQUIRED: an array of elements to use as the accordion sections
+			sections: null,
+			// a function that locates an activator button element given a section element.
+			// by default it takes a button id from the section's "activator" attibute
+			getActivator: function(el) {return document.getElementById(el.getAttribute("activator"))},
+			// shifts each animator's range, for example with options {from:0,to:100,shift:20}
+			// the animators' ranges will be 0-100, 20-120, 40-140 etc.
+			shift: 0,
+			// the first page to show
+			initialSection: 0,
+			// if set to true, document.location.hash will be used to preserve the open section across page reloads 
+			rememberance: true,
+			// constructor arguments to the Animator objects
+			animatorOptions: {}
+		}, options || {});
+	},
+	show: function(section) {
+		for (var i=0; i<this.ans.length; i++) {
+			this.ans[i].seekTo(i > section ? 1 : 0);
+		}
+		if (this.options.rememberance) {
+			document.location.hash = this.rememberanceTexts[section];
+		}
+	}
+}

examples/attribution.html

@@ -1,13 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+        <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" />
         <script src="../lib/OpenLayers.js"></script>
+
         <script type="text/javascript">
             var map;
             function init(){
@@ -18,10 +15,14 @@
                     {'attribution': 'Provided by <a href="http://labs.metacarta.com/">MetaCarta</a>'});
 
                 var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,global_mosaic"},{attribution:"Provided by NASA"});
+                    "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                    {layers: "landsat7"},{attribution:"Provided by Telascience"});
+
+                var vector = new OpenLayers.Layer.Vector("Simple Geometry",
+                              {attribution:"Vector Attibution in 2nd arg"});
+
+                map.addLayers([ol_wms, jpl_wms, vector]);
 
-            map.addLayers([ol_wms, jpl_wms]);
                 map.addControl(new OpenLayers.Control.LayerSwitcher());
                 map.addControl(new OpenLayers.Control.Attribution());
                 // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
@@ -30,7 +31,24 @@
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+        <h1 id="title">Attribution Example</h1>
+
+        <div id="tags">
+            copyright watermark logo attribution
+        </div>
+
+        <p id="shortdesc">
+          Shows the use of the attribution layer option on a number of layer types.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs">
+            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
+            different places depending on the layer type you are using.  
+        </div>
     </body>
 </html>

examples/baseLayers.html

@@ -1,11 +1,13 @@
 <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">
-        #map {
-            width: 100%;
-            height: 512px;
-            border: 1px solid black;
-            background-color: blue;
+            #controls
+            {
+                width: 512px;
             }
         </style>
 
@@ -14,7 +16,7 @@
         <!-- 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/v3/mapcontrol.js'></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">
@@ -72,9 +74,23 @@
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers With WMS, Google, VE Example</h1>
-    <div id="map"></div>
+        <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

@@ -0,0 +1,49 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <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" />
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map;
+        
+            function init(){
+                map = new OpenLayers.Map('map');
+                var wms = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                );
+
+                var layer = new OpenLayers.Layer.Vector("GML", {
+                    strategies: [new OpenLayers.Strategy.Fixed()],
+                    protocol: new OpenLayers.Protocol.HTTP({
+                        url: "gml/polygon.xml",
+                        format: new OpenLayers.Format.GML()
+                    }),
+                });
+
+                map.addLayers([wms, layer]);
+                map.zoomToExtent(new OpenLayers.Bounds(
+                    -3.92, 44.34, 4.87, 49.55
+                ));
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Vector Behavior Example (Fixed/HTTP/GML)</h1>
+        <p id="shortdesc">
+            Vector layer with a Fixed strategy, HTTP protocol, and GML format.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            The vector layer shown uses the Fixed strategy, the HTTP protocol,
+            and the GML format.
+            The Fixed strategy is a simple strategy that fetches features once
+            and never re-requests new data.
+            The HTTP protocol makes requests using HTTP verbs.  It should be
+            constructed with a url that corresponds to a collection of features
+            (a resource on some server).
+            The GML format is used to serialize features.
+        </div>
+    </body>
+</html>

examples/boxes-vector.html

@@ -0,0 +1,54 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <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" />
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var box_extents = [
+                [-10, 50, 5, 60],
+                [-75, 41, -71, 44],
+                [-122.6, 37.6, -122.3, 37.9],
+                [10, 10, 20, 20]
+            ];
+            var map;
+            function init(){
+                map = new OpenLayers.Map('map');
+
+                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
+
+                var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
+    
+                for (var i = 0; i < box_extents.length; i++) {
+                    ext = box_extents[i];
+                    bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
+                    
+                    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
+                    boxes.addFeatures(box);
+                }
+
+                map.addLayers([ol_wms, boxes]);
+                map.addControl(new OpenLayers.Control.LayerSwitcher());
+                var sf = new OpenLayers.Control.SelectFeature(boxes);
+                map.addControl(sf);
+                sf.activate();
+                map.zoomToMaxExtent();
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Boxes Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrate marker and box type annotations on a map.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs"></div>
+    </body>
+</html>

examples/boxes.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+        <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" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var box_extents = [
@@ -41,7 +37,17 @@
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+        <h1 id="title">Boxes Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrate marker and box type annotations on a map.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs"></div>
     </body>
 </html>

examples/browser-name.html

@@ -0,0 +1,89 @@
+<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://labs.metacarta.com/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/buffer.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 694px;
-            height: 464px;
-            border: 1px solid black;
-        }
-    </style>
+        <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" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var lon = 0;
@@ -34,8 +30,20 @@
         </script>
     </head>
     <body onload="init()">
-    <div id="map"></div>
-    <p>Use the buffer property to control how many tiles are included
-       outside the visible map area. Default is 2</p> 
+        <h1 id="title">Buffer Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs">
+            Use the buffer property to control how many tiles are included
+            outside the visible map area. Default is 2.
+        </div>
     </body>
 </html>

examples/click-handler.html

@@ -0,0 +1,227 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Click Handler 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">
+            #map {
+                width: 340px;
+                height: 170px;
+                border: 1px solid gray;
+            }
+            #west {
+                width: 350px;
+            }
+            #east {
+                position: absolute;
+                left: 370px;
+                top: 3em;
+            }
+
+            table td {
+                text-align: center;
+                margin: 0;
+                border: 1px solid gray;
+            }
+            textarea.output {
+                text-align: left;
+                font-size: 0.9em;
+                width: 250px;
+                height: 65px;
+                overflow: auto;
+            }
+        </style>
+        <script src="../lib/Firebug/firebug.js"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+
+            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+                defaultHandlerOptions: {
+                    'single': true,
+                    'double': false,
+                    'pixelTolerance': 0,
+                    'stopSingle': false,
+                    'stopDouble': false
+                },
+
+                initialize: function(options) {
+                    this.handlerOptions = OpenLayers.Util.extend(
+                        {}, this.defaultHandlerOptions
+                    );
+                    OpenLayers.Control.prototype.initialize.apply(
+                        this, arguments
+                    ); 
+                    this.handler = new OpenLayers.Handler.Click(
+                        this, {
+                            'click': this.onClick,
+                            'dblclick': this.onDblclick 
+                        }, this.handlerOptions
+                    );
+                }, 
+
+                onClick: function(evt) {
+                    var output = document.getElementById(this.key + "Output");
+                    var msg = "click " + evt.xy;
+                    output.value = output.value + msg + "\r\n";
+                },
+
+                onDblclick: function(evt) {  
+                    var output = document.getElementById(this.key + "Output");
+                    var msg = "dblclick " + evt.xy;
+                    output.value = output.value + msg + "\n";
+                }   
+
+            });
+
+            var map, controls; 
+
+            function init(){
+        
+                map = new OpenLayers.Map('map');
+                var layer = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                );
+                map.addLayers([layer]);
+                
+                controls = {
+                    "single": new OpenLayers.Control.Click({
+                        hanlerOptions: {
+                            "single": true
+                        }
+                    }),
+                    "double": new OpenLayers.Control.Click({
+                        handlerOptions: {
+                            "single": false,
+                            "double": true
+                        }
+                    }),
+                    "both": new OpenLayers.Control.Click({
+                        handlerOptions: {
+                            "single": true,
+                            "double": true
+                        }
+                    }),
+                    "drag": new OpenLayers.Control.Click({
+                        handlerOptions: {
+                            "single": true,
+                            "pixelTolerance": null
+                        }
+                    }),
+                    "stopsingle": new OpenLayers.Control.Click({
+                        handlerOptions: {
+                            "single": true,
+                            "stopSingle": true
+                        }
+                    }),
+                    "stopdouble": new OpenLayers.Control.Click({
+                        handlerOptions: {
+                            "single": false,
+                            "double": true,
+                            "stopDouble": true
+                        }
+                    })
+                };
+
+                var props = document.getElementById("props");
+                var control;
+                for(var key in controls) {
+                    control = controls[key];
+                    // only to route output here
+                    control.key = key;
+                    map.addControl(control);
+                }
+
+                map.zoomToMaxExtent();
+            }
+            
+            function toggle(key) {
+                var control = controls[key];
+                if(control.active) {
+                    control.deactivate();
+                } else {
+                    control.activate();
+                }
+                var status = document.getElementById(key + "Status");
+                status.innerHTML = control.active ? "on" : "off";
+                var output = document.getElementById(key + "Output");
+                output.value = "";
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Click Handler Example</h1>
+        <div id="west">
+    
+            <div id="tags">
+            </div>
+    
+            <p id="shortdesc">
+                This example shows the use of the click handler.
+            </p>
+    
+            <div id="map" class="smallmap"></div>
+            <p>
+                The click handler can be used to gain more flexibility over handling
+                click events.  The handler can be constructed with options to handle
+                only single click events, to handle single and double-click events,
+                to ignore clicks that include a drag, and to stop propagation of
+                single and/or double-click events.  A single click is a click that
+                is not followed by another click for more than 300ms.  This delay
+                is configured with the delay property.
+            </p>
+            <p>
+                The options to stop single and double clicks have to do with
+                stopping event propagation on the map events listener queue
+                (not stopping events from cascading to other elements).  The
+                ability to stop an event from propagating has to do with the
+                order in which listeners are registered.  With stopSingle or
+                stopDouble true, a click handler will stop propagation to all
+                listeners that were registered (or all handlers that were
+                activated) before the click handler was activated.  So, for
+                example, activating a click handler with stopDouble true after
+                the navigation control is active will stop double-clicks from
+                zooming in.
+            </p>
+        </div>
+        <div id="east">
+            <table>
+                <caption>Controls with click handlers (toggle on/off to clear output)</caption>
+                <tbody>
+                    <tr>
+                        <td>single only</td>
+                        <td><button id="singleStatus" onclick="toggle('single')">off</button></td>
+                        <td><textarea class="output" id="singleOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>double only</td>
+                        <td><button id="doubleStatus" onclick="toggle('double')">off</button></td>
+                        <td><textarea class="output" id="doubleOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>both</td>
+                        <td><button id="bothStatus" onclick="toggle('both')">off</button></td>
+                        <td><textarea class="output" id="bothOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>single with drag</td>
+                        <td><button id="dragStatus" onclick="toggle('drag')">off</button></td>
+                        <td><textarea class="output" id="dragOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>single with stop</td>
+                        <td><button id="stopsingleStatus" onclick="toggle('stopsingle')">off</button></td>
+                        <td><textarea class="output" id="stopsingleOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>double with stop</td>
+                        <td><button id="stopdoubleStatus" onclick="toggle('stopdouble')">off</button></td>
+                        <td><textarea class="output" id="stopdoubleOutput"></textarea></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>

examples/click.html

@@ -1,14 +1,41 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+        <title>OpenLayers Click Event 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">
+            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+                defaultHandlerOptions: {
+                    'single': true,
+                    'double': false,
+                    'pixelTolerance': 0,
+                    'stopSingle': false,
+                    'stopDouble': false
+                },
+
+                initialize: function(options) {
+                    this.handlerOptions = OpenLayers.Util.extend(
+                        {}, this.defaultHandlerOptions
+                    );
+                    OpenLayers.Control.prototype.initialize.apply(
+                        this, arguments
+                    ); 
+                    this.handler = new OpenLayers.Handler.Click(
+                        this, {
+                            'click': this.trigger
+                        }, this.handlerOptions
+                    );
+                }, 
+
+                trigger: function(e) {
+                    var lonlat = map.getLonLatFromViewPortPx(e.xy);
+                    alert("You clicked near " + lonlat.lat + " N, " +
+                                              + lonlat.lon + " E");
+                }
+
+            });
             var map;
             function init(){
                 map = new OpenLayers.Map('map');
@@ -17,8 +44,8 @@
                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
 
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,global_mosaic"});
+                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                {layers: "landsat7"});
 
                 jpl_wms.setVisibility(false);
 
@@ -26,16 +53,29 @@
                 map.addControl(new OpenLayers.Control.LayerSwitcher());
                 // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
                 map.zoomToMaxExtent();
-            map.events.register("click", map, function(e) { 
-                var lonlat = map.getLonLatFromViewPortPx(e.xy);
-                alert("You clicked near " + lonlat.lat + " N, " +
-                                          + lonlat.lon + " E");
-            });
+                
+                var click = new OpenLayers.Control.Click();
+                map.addControl(click);
+                click.activate();
+
             }
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+        <h1 id="title">Click Event Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            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. 
+        </div>
     </body>
 </html>

examples/controls.html

@@ -1,35 +1,36 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+        <title>OpenLayers Map Controls Example</title>
+
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map;
             function init(){
-            map = new OpenLayers.Map('map', { controls: [] });
+                map = new OpenLayers.Map('map', {
+                    controls: [
+                        new OpenLayers.Control.PanZoomBar(),
+                        new OpenLayers.Control.MouseToolbar(),
+                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+                        new OpenLayers.Control.Permalink(),
+                        new OpenLayers.Control.ScaleLine(),
+                        new OpenLayers.Control.Permalink('permalink'),
+                        new OpenLayers.Control.MousePosition(),
+                        new OpenLayers.Control.OverviewMap(),
+                        new OpenLayers.Control.KeyboardDefaults()
+                    ],
+                    numZoomLevels: 6
+                    
+                });
     
-            map.addControl(new OpenLayers.Control.PanZoomBar());
-            map.addControl(new OpenLayers.Control.MouseToolbar());
-            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-            map.addControl(new OpenLayers.Control.Permalink());
-            map.addControl(new OpenLayers.Control.Permalink('permalink'));
-            map.addControl(new OpenLayers.Control.MousePosition());
-            map.addControl(new OpenLayers.Control.OverviewMap());
-            map.addControl(new OpenLayers.Control.KeyboardDefaults());
 
                 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                     "http://labs.metacarta.com/wms/vmap0",
                     {layers: 'basic'} );
-
                 var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,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," +
@@ -45,8 +46,18 @@
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Example</h1>
+        <h1 id="title">Map Controls Example</h1>
+
+        <div id="tags">
+        </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"></div>
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs"></div>
     </body>
 </html>

examples/custom-control-point.html

@@ -1,15 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <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;
@@ -41,11 +36,21 @@
             map.addControl(control);
             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
         }
-        // -->
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+      <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,15 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+        <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" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-        <!--
             var lon = 5;
             var lat = 40;
             var zoom = 5;
@@ -32,7 +27,12 @@
                     },
 
                     notice: function (bounds) {
-                    alert(bounds);
+                        var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom)); 
+                        var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top)); 
+                        alert(ll.lon.toFixed(4) + ", " + 
+                              ll.lat.toFixed(4) + ", " + 
+                              ur.lon.toFixed(4) + ", " + 
+                              ur.lat.toFixed(4));
                     }
                 });
 
@@ -40,10 +40,20 @@
                 map.addControl(control);
                 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
             }
-        // -->
         </script>
     </head>
     <body onload="init()">
-    <div id="map"></div>
+        <h1 id="title">Custom Control Example</h1>
+
+          <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrate the addition of a draggable rectangle to the OpenLayers window.
+        </p>
+      
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs"></div>
     </body>
 </html>

examples/custom-style.html

@@ -1,12 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <title>Custom Style 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">
-        #map {
-            width: 500px;
-            height: 350px;
-            border: 1px solid gray;
-        }
             p {
                 width: 500px;
             }
@@ -18,7 +16,6 @@
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-        <!--
             var lon = 5;
             var lat = 40;
             var zoom = 5;
@@ -34,11 +31,21 @@
                 map.addLayer(layer);
                 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
             }
-        // -->
         </script>
     </head>
     <body onload="init()">
-    <div id="map"></div>
+        <h1 id="title">Custom Style Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrate changing CSS styles on controls in the OpenLayers window.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs">
            <p>If you care to modify the style of any OpenLayers element, include
            the default stylesheet as a link and declare any style modifications
            below that link.  These style declarations can be in other linked
@@ -49,5 +56,6 @@
            <p>This example shows how to declare the font family, size, and color
            for the mouse position.  Note that only the style keys that you want to
            modify (change from the default) need to be specified.</p>
+        </div>
     </body>
 </html>

examples/debug.html

@@ -2,10 +2,11 @@
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <title>OpenLayers Debug Example</title>
+        <link rel="stylesheet" href="style.css" type="text/css" />        
         <script src="../lib/Firebug/firebug.js"></script>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-        <!--
             function consoleLog() {
                 OpenLayers.Console.log("This is the result of an OpenLayers.Console.log() call");
             }
@@ -21,16 +22,23 @@
             function consoleDirxml() {
                 OpenLayers.Console.dirxml(document.getElementsByTagName('body')[0]);
             }
-        // -->
         </script>
     </head>
     <body>
-    <h1>OpenLayers Debug Example</h1>
+        <h1 id="title">Debug Example</h1>
+
+        <div id="tags"></div>
+
+        <p id="shortdesc">
+            Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.
+        </p>
+
+        <div id="docs">
             <p>To run OpenLayers in debug mode, include the following script
             tag <b>before</b> the tag that loads OpenLayers:
-    <pre>
-    &lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt;
-    </pre>
+
+            <pre>    &lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt;</pre>
+
             The path to firebug.js must be relative to your
             html file.  With this script included calls to OpenLayers.Console
             will be displayed in the Firebug console.  For browsers without
@@ -60,5 +68,6 @@
             <p>The Firebug website has a complete list of
             <a href="http://www.getfirebug.com/console.html">console calls</a>.
             Note that not all are supported with Firebug Lite.</p>
+        </div>
     </body>
 </html>

examples/doubleSetCenter.html

@@ -1,9 +1,22 @@
 <html>
-<head>
-<script src="../lib/OpenLayers.js"></script>
-</head>
-<body>
-  <div style="width:100%; height:100%" id="map"></div>
+    <head>
+        <title>OpenLayers Double Set Center 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" />
+    </head>
+    <body>
+        <h1 id="title">Double Set Center Example</h1>
+
+        <div id="tags"></div>
+
+        <p id="shortdesc">
+            Demonstrate the behavior of two calls to set the center after instatiating the layer object.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+    
         <script defer="defer" type="text/javascript">
             var map = new OpenLayers.Map('map');
             var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
@@ -12,6 +25,8 @@
             map.setCenter(new OpenLayers.LonLat(100,10));
             map.setCenter(new OpenLayers.LonLat(1,1));
         </script>
-</body>
+
+        <div id="docs"></div>
+    </body>
 </html>
 

examples/drag-feature.html

@@ -1,12 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-    <title>Drag Feature</title>
+        <title>Drag Feature 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">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
             #controls {
                 width: 512px;
             }
@@ -19,7 +17,6 @@
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-        <!--
             var map, vectors, controls;
             function init(){
                 map = new OpenLayers.Map('map');
@@ -60,13 +57,19 @@
                     }
                 }
             }
-        
-        // -->
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Drag Feature Example</h1>
-    <div id="map"></div>
+        <h1 id="title">Drag Feature Example</h1>
+
+        <div id="tags"></div>
+
+        <p id="shortdesc">
+            Demonstrates point, line and polygon creation and editing.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+        
         <div id="controls">
             <ul id="controlToggle">
                 <li>
@@ -93,5 +96,7 @@
                 </li>
             </ul>
         </div>
+
+        <div id="docs"></div>
     </body>
 </html>

examples/draw-feature.html

@@ -1,11 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <title>Draw Feature 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">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
             #controlToggle li {
                 list-style: none;
             }
@@ -15,7 +14,6 @@
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
-        <!--
             var map, drawControls;
             OpenLayers.Util.onImageLoadErrorColor = "transparent";
             function init(){
@@ -61,12 +59,19 @@
                     }
                 }
             }
-        // -->
         </script>
     </head>
     <body onload="init()">
-    <h1>OpenLayers Draw Feature Example</h1>
-    <div id="map"></div>
+        <h1 id="title">OpenLayers Draw Feature Example</h1>
+
+        <div id="tags"></div>
+
+        <p id="shortdesc">
+            Demonstrate on-screen digitizing tools for point, line, and polygon creation.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+    
         <ul id="controlToggle">
             <li>
                 <input type="radio" name="type" value="none" id="noneToggle"
@@ -86,11 +91,13 @@
                 <label for="polygonToggle">draw polygon</label>
             </li>
         </ul>
+
+        <div id="docs">
             <p>Feature digitizing is in freehand mode by default.  In freehand mode, the mouse is treated as a pen.
             Drawing begins on mouse down, continues with every mouse move, and ends with mouse up.</p>
             <p>To turn freehand mode off, hold down the shift key while digitizing.  With freehand mode off, one
             vertex is added with each click and double-clicks finish drawing.  Freehand mode can be toggled on and off
             at any time while drawing.</p>
-        
+        </div>
     </body>
 </html>

examples/editingtoolbar-outside.html

@@ -0,0 +1,51 @@
+<!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>
+    <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;
+        }
+    </style>
+    <script src="../lib/Firebug/firebug.js"></script>
+    <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', {theme: null});
+            layer = new OpenLayers.Layer.WMS(
+                "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0",
+                {layers: "basic"}
+            );
+            map.addLayer(layer);
+
+            vlayer = new OpenLayers.Layer.Vector( "Editable" );
+            map.addLayer(vlayer);
+            var container = document.getElementById("panel");
+            var panel = new OpenLayers.Control.EditingToolbar(
+                vlayer, {div: container}
+            );
+            map.addControl(panel);
+            
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">OpenLayers EditingToolbar Outside Viewport</h1>
+    <p id="shortdesc">
+        Display an editing toolbar panel outside the map viewport.
+    </p>
+    <div id="map" class="smallmap"></div>
+    <div id="panel" class="olControlEditingToolbar"></div>
+  </body>
+</html>

examples/editingtoolbar.html

@@ -1,40 +1,47 @@
 <!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>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+        <title>OpenLayers Editing Toolbar Example</title>
+        
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script src="../lib/Firebug/debug.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', { controls: [] } );
                 layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                         "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
-            map.addLayer(layer);
     
                 vlayer = new OpenLayers.Layer.Vector( "Editable" );
-            map.addLayer(vlayer);
-            map.addControl(new OpenLayers.Control.PanZoomBar());
-            map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
+                map = new OpenLayers.Map( 'map', {
+                    controls: [
+                        new OpenLayers.Control.PanZoom(),
+                        new OpenLayers.Control.EditingToolbar(vlayer)
+                    ]
+                });
+                map.addLayers([layer, vlayer]);
     
                 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
             }
-        // -->
         </script>
     </head>
     <body onload="init()">
+        <h1 id="title">Editing Toolbar Example</h1>
+
+        <div id="tags"></div>
+
+        <p id="shortdesc">
+            Demonstrate polygon, polyline and point creation and editing tools.
+        </p>
+
         <div id="panel"></div>
-    <div id="map"></div>
+        <div id="map" class="smallmap"></div>
+
+        <div id="docs"></div>
     </body>
 </html>

examples/events.html

@@ -0,0 +1,150 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Event Handling</title>
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <style type="text/css">
+            #panel {
+                margin: 5px;
+                height: 30px; 
+                width: 200px;
+            }
+            #panel div { 
+                float: left;
+                margin-left: 5px;
+                width: 25px;
+                height: 25px;
+                border: 1px solid gray;
+            }
+            #output {
+                position: absolute;
+                left: 550px;
+                top: 40px;
+                width: 350px;
+                height: 400px;
+            }
+            div.blueItemInactive {
+                background-color: #aac;
+            }
+            div.blueItemActive {
+                background-color: #33c;
+            }
+            div.orangeItemInactive {
+                background-color: #ca6;
+            }
+            div.orangeItemActive {
+                background-color: #ea0;
+            }
+            div.greenItemInactive {
+                background-color: #aca;
+            }
+            div.greenItemActive {
+                background-color: #3c3;
+            }
+                
+        </style>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, panel;
+
+            function init(){
+                
+                // define custom map event listeners
+                function mapEvent(event) {
+                    log(event.type);
+                }
+                function mapBaseLayerChanged(event) {
+                    log(event.type + " " + event.layer.name);
+                }
+                function mapLayerChanged(event) {
+                    log(event.type + " " + event.layer.name + " " + event.property);
+                }
+                map = new OpenLayers.Map('map', {
+                    eventListeners: {
+                        "moveend": mapEvent,
+                        "zoomend": mapEvent,
+                        "changelayer": mapLayerChanged,
+                        "changebaselayer": mapBaseLayerChanged
+                    }
+                });
+
+                panel = new OpenLayers.Control.Panel(
+                    {div: document.getElementById("panel")}
+                );
+                
+                // define custom event listeners
+                function toolActivate(event) {
+                    log("activate " + event.object.displayClass);
+                }
+                function toolDeactivate(event) {
+                    log("deactivate " + event.object.displayClass);
+                }
+                
+                // Multiple objects can share listeners with the same scope
+                var toolListeners = {
+                    "activate": toolActivate,
+                    "deactivate": toolDeactivate
+                };
+                var blue = new OpenLayers.Control({
+                    type: OpenLayers.Control.TYPE_TOGGLE,
+                    eventListeners: toolListeners,
+                    displayClass: "blue"
+                });
+                var orange = new OpenLayers.Control({
+                    type: OpenLayers.Control.TYPE_TOGGLE,
+                    eventListeners: toolListeners,
+                    displayClass: "orange"
+                });
+                var green = new OpenLayers.Control({
+                    type: OpenLayers.Control.TYPE_TOGGLE,
+                    eventListeners: toolListeners,
+                    displayClass: "green"
+                });
+                
+                // add buttons to a panel
+                panel.addControls([blue, orange, green]);
+                map.addControl(panel);
+                
+                var vmap = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                );
+                var landsat = new OpenLayers.Layer.WMS(
+                    "NASA Global Mosaic",
+                    "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                    {layers: "landsat7"}
+                );
+                var nexrad = new OpenLayers.Layer.WMS(
+                    "Nexrad",
+                    "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
+                    {layers:"nexrad-n0r-wmst", transparent: "TRUE", format: 'image/png'},
+                    {isBaseLayer: false}
+                );
+
+
+                map.addLayers([vmap, landsat, nexrad]);
+                map.addControl(new OpenLayers.Control.LayerSwitcher());
+                map.zoomToMaxExtent();
+
+            }
+            function log(msg) {
+                document.getElementById("output").innerHTML += msg + "\n";
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Event Handling</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            Demonstrating various styles of event handling in OpenLayers.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+        <div id="panel"></div>
+        <textarea id="output"></textarea>
+        <div id="docs"></div>
+    </body>
+</html>

examples/example-list.html

@@ -0,0 +1,239 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
+<html>
+    <head>
+        <!-- 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 
+        "This Frame -> View source" when right clicking on the exmaple. If not,
+        choose to open the example in a new window (via the context menu 
+        click on the link), and view source from there. -->  
+        <title>OpenLayers Examples</title>
+        <link rel="alternate" href="example-list.xml" type="application/atom+xml" />
+        <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;
+            }
+            .ex_container{
+                border-bottom: 1px solid #cccccc;
+            }
+            .ex_container a {
+                text-decoration: none;
+                padding: 5px 1em;
+                display: block;
+            }
+            .ex_container a:hover {
+                background-color: #eeeeee;
+            }
+            .ex_title{
+                display: inline;
+                font-weight: bold;
+                color: #333;
+            }
+            .ex_filename {
+                font-weight: normal;
+                font-size: 0.8em;
+                color: #ccc
+            }
+            .ex_description{
+                color: #222;
+                padding: 3px;
+            }
+            .ex_classes{
+                font-size: .7em;
+                color: grey;
+                display: none;
+            }
+            #toc {
+                width: 30%;
+                height: 100%;
+            }
+            #filter {
+                top: 0px;
+                height: 50px;
+                padding: 10px 1em 10px 1em;
+            }
+            #examples {
+                border-top: 1px solid #cccccc;
+                position: absolute;
+                width: 30%;
+                top: 70px;
+                bottom: 0px;
+                overflow: auto;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+            #examples ul {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+            #examples ul li {
+                display: block;
+                margin: 0;
+                padding: 0;
+            }
+            #exwin {
+                position: absolute;
+                top: 0;
+                left: 30%;
+                width: 70%;
+                height: 100%;
+                border: none;
+                border-left: 1px solid #cccccc;
+                margin: 0;
+            }
+        </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) {
+                target.innerHTML = "";
+                var node = template.process({
+                    context: {examples: examples},
+                    clone: true,
+                    parent: target
+                });
+                document.getElementById("count").innerHTML = "(" + examples.length + ")";
+            }
+            
+            var timerId;
+            function inputChange() {
+                if(timerId) {
+                    window.clearTimeout(timerId);
+                }
+                var text = this.value;
+                timerId = window.setTimeout(function() {
+                    filterList(text);
+                }, 500);
+            }
+            
+            function filterList(text) {
+                var examples;
+                if(text.length < 2) {
+                    examples = info.examples;
+                } else {
+                    var words = text.split(/\W+/);
+                    var scores = {};
+                    for(var i=0; i<words.length; ++i) {
+                        var word = words[i].toLowerCase()
+                        var dict = info.index[word];
+                        if(dict) {
+                            for(exIndex in dict) {
+                                var count = dict[exIndex];
+                                if(scores[exIndex]) {
+                                    if(scores[exIndex][word]) {
+                                        scores[exIndex][word] += count;
+                                    } else {
+                                        scores[exIndex][word] = count;
+                                    }
+                                } else {
+                                    scores[exIndex] = {};
+                                    scores[exIndex][word] = count;
+                                }
+                            }
+                        }
+                    }
+                    examples = [];
+                    for(var j in scores) {
+                        var ex = info.examples[j];
+                        ex.score = scores[j];
+                        examples.push(ex);
+                    }
+                    // sort examples by first by number of words matched, then
+                    // by word frequency
+                    examples.sort(function(a, b) {
+                        var cmp;
+                        var aWords = 0, bWords = 0;
+                        var aScore = 0, bScore = 0;
+                        for(var i in a.score) {
+                            aScore += a.score[i];
+                            aWords += 1;
+                        }
+                        for(var j in b.score) {
+                            bScore += b.score[j];
+                            bWords += 1;
+                        }
+                        if(aWords == bWords) {
+                            cmp = bScore - aScore;
+                        } else {
+                            cmp = bWords - aWords;
+                        }
+                        return cmp;
+                    });
+                }
+                listExamples(examples);
+            }
+            
+            function showAll() {
+                document.getElementById("keywords").value = "";
+                listExamples(info.examples);
+            }
+            
+            function parseQuery() {
+                var params = {};
+                var list = window.location.search.substring(1).split("&");
+                for(var i=0; i<list.length; ++i) {
+                    var pair = list[i].split("=");
+                    if(pair.length == 2) {
+                        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+                    }
+                }
+                if(params["q"]) {
+                    var input = document.getElementById("keywords");
+                    input.value = params["q"];
+                    inputChange.call(input);
+                }
+            }
+            window.onload = function() {
+                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();
+            };
+        </script>
+    </head>
+    <body>
+        <div id="toc">
+            <div id="filter">
+                <p>
+                    <label for="keywords">Filter by keywords</label><br />
+                    <input type="text" id="keywords" />
+                    <span id="count"></span><br />
+                    <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">
+                        <h5 class="ex_title">
+                            <span jugl:replace="example.title">title</span><br />
+                            <span class="ex_filename" jugl:content="'(' + example.example + ')'">filename</span>
+                        </h5>
+                        <div class="ex_description" jugl:content="example.shortdesc">
+                            Short Description goes here
+                        </div>
+                        <p class="ex_classes" jugl:content="example.classes">
+                            Related Classes go here
+                        </p>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </body>
+</html>

examples/example.html

@@ -1,89 +1,56 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <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://labs.metacarta.com/wms/vmap0",
+                {layers: 'basic'}
+            );
 
-            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
-                options); 
+            var jpl_wms = new OpenLayers.Layer.WMS(
+                "NASA Global Mosaic",
+                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                {layers: "landsat7"}
+            );
 
-            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://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,global_mosaic"}, options2);
-
-            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
+            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," +
+                {
+                    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});
+                {
+                    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()">
-    <table><tr><td>
-        <h1>OpenLayers Example</h1>
-    </td><td>
-        <h3 id="browserHeader"></h3>
-    </td></tr></table>
-    <div id="map"></div>
+    <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>
 </html>

examples/fractional-zoom.html

@@ -0,0 +1,67 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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() {
+            map = new OpenLayers.Map('map', 
+                 {controls: [new OpenLayers.Control.Navigation(), 
+                             new OpenLayers.Control.PanZoomBar()], 
+                  numZoomLevels: 10 });
+            var wms = new OpenLayers.Layer.WMS(
+                "OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0",
+                {layers: 'basic'}
+            );
+            map.addLayers([wms]);
+
+            map.events.register("moveend", null, displayZoom);
+
+            map.zoomToMaxExtent();
+            
+            update(document.getElementById("fractional"));
+            
+        }
+        
+        function displayZoom() {
+            document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
+        }
+        
+        function update(input) {
+            map.fractionalZoom = input.checked;
+            map.zoomTo(Math.round(map.zoom));
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Fractional Zoom Example</h1>
+
+    <div id="tags">
+    </div>
+    <p id="shortdesc">
+            Shows the use of a map with fractional (or non-discrete) zoom levels.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+        <input type="checkbox" name="fractional"
+               id="fractional" checked="checked" onclick="update(this)" />
+        <label for="fractional">Fractional Zoom</label>
+        (zoom: <span id="zoom"></span>)
+        <br /><br />
+    <div id="docs">
+            <p>
+            Setting the map.fractionalZoom property to true allows zooming to
+            an arbitrary level (between the min and max resolutions).  This
+            can be demonstrated by shift-dragging a box to zoom to an arbitrary
+            extent.
+            </p>
+    </div>
+  </body>
+</html>
+
+
+
+

examples/fullScreen.html

@@ -1,10 +1,22 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+        <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 {
+                margin: 0;
+            }
             #map {
                 width: 100%;
                 height: 100%;
-            border: 1px solid black;
+            }
+
+            #text {
+                position: absolute;
+                bottom: 1em;
+                left: 1em;
+                width: 512px;
             }
         </style>
         <script src="../lib/OpenLayers.js"></script>
@@ -14,11 +26,11 @@
                 map = new OpenLayers.Map('map');
 
             var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-                "http://labs.metacarta.com:80/wms/vmap0?", {layers: 'basic'}); 
-
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'} );
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,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",
@@ -35,5 +47,20 @@
     </head>
     <body onload="init()">
         <div id="map"></div>
+
+          <div id="text">
+              <h1 id="title">Full Screen Example</h1>
+
+              <div id="tags"></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!
+            </div>
+        </div>
     </body>
 </html>

examples/geojson.html

@@ -0,0 +1,62 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'} );
+            map.addLayer(layer);
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+            var featurecollection = {
+              "type": "FeatureCollection", 
+              "features": [
+                {"geometry": {
+                    "type": "GeometryCollection", 
+                    "geometries": [
+                        {
+                            "type": "LineString", 
+                            "coordinates": 
+                                [[11.0878902207, 45.1602390564], 
+                                [15.01953125, 48.1298828125]]
+                        }, 
+                        {
+                            "type": "Polygon", 
+                            "coordinates": 
+                                [[[11.0878902207, 45.1602390564], 
+                                  [14.931640625, 40.9228515625], 
+                                  [0.8251953125, 41.0986328125], 
+                                  [7.63671875, 48.96484375], 
+                                  [11.0878902207, 45.1602390564]]]
+                        },
+                        {
+                            "type":"Point", 
+                            "coordinates":[15.87646484375, 44.1748046875]
+                        }
+                    ]
+                }, 
+                "type": "Feature", 
+                "properties": {}}
+              ]
+           };
+           var geojson_format = new OpenLayers.Format.GeoJSON();
+           var vector_layer = new OpenLayers.Layer.Vector(); 
+           map.addLayer(vector_layer);
+           vector_layer.addFeatures(geojson_format.read(featurecollection));
+
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">GeoJSON Example</h1>
+    <div id="map" class="smallmap"></div>
+  </body>
+</html>

examples/georss-flickr.html

@@ -0,0 +1,100 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        .olPopupContent {
+            font-size: smaller;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer, markerLayer, style, popup;
+        
+
+        function init(){
+            map = new OpenLayers.Map('map', {maxResolution:'auto'});
+            
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+            map.addLayer(layer);
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            
+            // create a property style that reads the externalGraphic url from
+            // the thumbail attribute of the rss item
+            style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
+            
+            // create a rule with a point symbolizer that will make the thumbnail
+            // larger if the title of the rss item contains "powder"
+            var rule = new OpenLayers.Rule({
+                symbolizer: {pointRadius: 30},
+                filter: new OpenLayers.Filter.Comparison({
+                    type: OpenLayers.Filter.Comparison.LIKE,
+                    property: "title",
+                    value: "*powder*"
+                })
+            });
+            rule.filter.value2regex("*");
+            
+            // If the above rule does not apply, use a smaller pointRadius.
+            var elseRule = new OpenLayers.Rule({
+                elseFilter: true,
+                symbolizer: {pointRadius: 20}
+            });
+            
+            style.addRules([rule, elseRule]);
+            
+            // Create a GML layer with GeoRSS format and a style map.
+            markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
+			                                       "xml/georss-flickr.xml", {
+                format: OpenLayers.Format.GeoRSS,
+                formatOptions: {
+                    // adds the thumbnail attribute to the feature
+                    createFeatureFromItem: function(item) {
+                        var feature = OpenLayers.Format.GeoRSS.prototype
+                                .createFeatureFromItem.apply(this, arguments);
+                        feature.attributes.thumbnail =
+                                this.getElementsByTagNameNS(
+                                item, "*", "thumbnail")[0].getAttribute("url");
+                        return feature;
+                    }
+                },
+				// Giving the style map keys for "default" and "select"
+				// rendering intent, to make the image larger when selected
+                styleMap: new OpenLayers.StyleMap({
+                    "default": style,
+                    "select": new OpenLayers.Style({pointRadius: 35})
+                })
+            });
+            map.addLayer(markerLayer);
+            
+            // control that will show a popup when clicking on a thumbnail
+            var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
+              onSelect: function(feature) {
+                  var pos = feature.geometry;
+                  if (popup) {
+                      map.removePopup(popup);
+                  }
+                  popup = new OpenLayers.Popup("popup",
+                      new OpenLayers.LonLat(pos.x, pos.y),
+                      new OpenLayers.Size(254,320),
+                      "<h3>" + feature.attributes.title + "</h3>" +
+                      feature.attributes.description,
+                      true);
+                  map.addPopup(popup);
+              }
+            }); 
+            map.addControl(popupControl);
+            
+            popupControl.activate();
+        }
+    </script>
+  </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="map" class="smallmap"></div>
+  </body>
+</html>

examples/georss-markers.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <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" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -28,7 +24,16 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>GeoRSS in OpenLayers</h1>
-    <div id="map"></div>
+    <h1 id="title">GeoRSS Marker Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate loading a GeoRSS feed using the GeoRSS parser.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
   </body>
 </html>

examples/georss-serialize.html

@@ -1,46 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style type="text/css">
-        #map {
-            width: 45%;
-            height: 350px;
-            border: 1px solid gray;
-        }
-    </style>
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, drawControl, g;
-        function serialize(feature) {
-            feature.attributes = {};
-            var name = prompt("Title for feature?");
-            feature.attributes['title'] = name;
-            var data = g.write(feature.layer.features);
-            OpenLayers.Util.getElement("gml").value = data;
-        }
-        function init(){
-            g = new OpenLayers.Format.GeoRSS();
-            map = new OpenLayers.Map('map');
-            
-            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
-
-            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
-            pointLayer.onFeatureInsert = serialize;
-
-            map.addLayers([wmsLayer, pointLayer]);
-            map.addControl(new OpenLayers.Control.EditingToolbar(pointLayer));
-            map.addControl(new OpenLayers.Control.MousePosition());
-            
-            
-            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1>OpenLayers Draw Point Example</h1>
-    <div style="float:right;width:50%">
-    <textarea id="gml" style="width:100%" rows="30"></textarea>
-    </div>
-    <div id="map"></div>
-  </body>
-</html>

examples/georss.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <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" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -31,12 +27,31 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>GeoRSS in OpenLayers</h1>
-    <p style="font-size:.9em;">This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are currently supported. <a href="http://trac.openlayers.org/wiki/HowToDownload">Get the code!</a></p>
+    <h1 id="title">GeoRSS Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Display a couple of locally cached georss feeds on an a basemap.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p>This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are
+        currently supported.  The OpenLayers GeoRSS parser will automatically connect an information bubble to the map
+        markers, similar to Google maps.  In addition, the parser can use custom PNG icons for markers.  A sample GeoRSS
+        file (georss.xml) is included.
+
         <form onsubmit="return false;">
-   GeoRSS URL: <input type="text" id="url" size="50" /><input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
+               GeoRSS URL: <input type="text" id="url" size="50" value="georss.xml" />
+               <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 -- 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 HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>    
-    <div id="map"></div>
+
+        <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
+        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
+        HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
+    </div>
   </body>
 </html>

examples/getfeatureinfo.html

@@ -1,20 +1,32 @@
 <html>
-<head>
-<script src="../lib/OpenLayers.js"></script>
-<style type="text/css">
-ul, li { padding-left: 0px; margin-left: 0px; }
-</style>
-<title>World Map Query</title> 
-</head>
-<body>
-  <a id='permalink' href="">Permalink</a><br />
+  <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>
+        <p style="font-size:.8em;">Click a country to see statistics about the country below.</p>
         <div id="nodeList">
         </div>
     </div>
-  <div id="map" style="width:70%; height:90%"></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'});
@@ -43,5 +55,8 @@ ul, li { padding-left: 0px; margin-left: 0px; }
         OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
     }
   </script>
-</body>
+
+    <div id="docs">
+    </div>
+  </body>
 </html>

examples/gml-layer.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+      <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" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -25,6 +21,16 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+      <h1 id="title">GML Layer Example</h1>
+
+      <div id="tags"></div>
+
+      <p id="shortdesc">
+          Loads locally stored GML vector data on a basemap. Includes GML example file.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
   </body>
 </html>

examples/gml-serialize.html

@@ -1,83 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
-    </style>
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, drawControl, g;
-        function serialize(feature) {
-            feature.attributes = {};
-            var name = prompt("Name for feature?");
-            feature.attributes['name'] = name;
-            var data = g.write(feature.layer.features);
-            OpenLayers.Util.getElement("gml").value = data; 
-        }
-        function init(){
-            g = new OpenLayers.Format.GML();
-            map = new OpenLayers.Map('map');
-            
-            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
-
-            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
-            pointLayer.onFeatureInsert = serialize;
-
-            map.addLayers([wmsLayer, pointLayer]);
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-            map.addControl(new OpenLayers.Control.MousePosition());
-            
-            drawControls = {
-                point: new OpenLayers.Control.DrawFeature(pointLayer,
-                            OpenLayers.Handler.Point),
-                line: new OpenLayers.Control.DrawFeature(pointLayer,
-                            OpenLayers.Handler.Path)
-            };
-            
-            for(var key in drawControls) {
-                map.addControl(drawControls[key]);
-            }
-            
-            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-        }
-
-        function toggleControl(element) {
-            for(key in drawControls) {
-                var control = drawControls[key];
-                if(element.value == key && element.checked) {
-                    control.activate();
-                } else {
-                    control.deactivate();
-                }
-            }
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <h1>OpenLayers Draw Point Example</h1>
-    <div style="float:right">
-    <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="point" id="pointToggle" onclick="toggleControl(this);" />
-            <label for="pointToggle">draw point</label>
-        </li>
-        <li>
-            <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
-            <label for="lineToggle">draw line</label>
-        </li>
-    </ul>
-    <p>Check the box to draw points.  Uncheck to navigate normally.</p>
-    <textarea id="gml" cols="80" rows="30"></textarea>
-    </div>
-    <div id="map"></div>
-  </body>
-</html>

examples/google-reproject.html

@@ -0,0 +1,57 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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" />
+    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
+    <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 type="text/javascript">
+        var map;
+
+        function init(){
+            map = new OpenLayers.Map('map');
+
+            var satellite = new OpenLayers.Layer.Google(
+                "Google Satellite" , {type: G_SATELLITE_MAP}
+            );
+
+            var wms = new OpenLayers.Layer.WMS(
+                "World Map",
+                "http://world.freemap.in/cgi-bin/mapserv",
+                {
+                    map: '/www/freemap.in/world/map/factbooktrans.map',
+                    transparent: 'TRUE',
+                    layers: 'factbook'
+                },
+                {'reproject': true}
+            );
+
+            map.addLayers([satellite, wms]);
+
+            map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
+            map.addControl( new OpenLayers.Control.LayerSwitcher() );
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Google with Overlay Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate a Google basemap used with boundary overlay layer.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        An overlay in a Geographic projection can be stretched to somewhat
+        line up with Google tiles (in a Mercator projection).  Results get
+        worse farther from the equator.  Use the "reproject" option on a
+        layer to get this behavior.  Use the sphericalMercator option on
+        a Google layer to get proper overlays (with other layers in
+        Spherical Mercator).
+    </div>
+  </body>
+</html>

examples/google.html

@@ -1,75 +1,57 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 100%;
-            height: 512px;
-            border: 1px solid black;
-            background-color: red;
-        }
-    </style>
-
+    <title>OpenLayers Google Layer Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <!-- this gmaps key generated for http://openlayers.org/dev/ -->
     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
-    <!-- Localhost key -->
-    <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
-        var lon = 5;
-        var lat = 40;
-        var zoom = 17;
-        var map, layer;
+        var map;
 
-        function init(){
-            map = new OpenLayers.Map( 'map' , 
-            { controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20});
+        function init() {
+            map = new OpenLayers.Map('map');
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
             
-            var satellite = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );
+            var gphy = new OpenLayers.Layer.Google(
+                "Google Physical",
+                {type: G_PHYSICAL_MAP}
+            );
+            var gmap = new OpenLayers.Layer.Google(
+                "Google Streets" // the default
+            );
+            var ghyb = new OpenLayers.Layer.Google(
+                "Google Hybrid",
+                {type: G_HYBRID_MAP}
+            );
+            var gsat = new OpenLayers.Layer.Google(
+                "Google Satellite",
+                {type: G_SATELLITE_MAP}
+            );
 
 
-            map.addLayers([satellite]);
-            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic', 'transparent':true}, 
-                      {isBaseLayer: false} );
-            layer.setVisibility(false);
-         var twms = new OpenLayers.Layer.WMS( "World Map", 
-         "http://world.freemap.in/cgi-bin/mapserv?", 
-                 {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true',
-                         layers: 'factbook', 'format':'png'}, {'reproject': true} );
-            map.addLayer(twms);
-            markers = new OpenLayers.Layer.Markers("markers");
-            map.addLayer(markers);
-
-            map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
-            map.addControl( new OpenLayers.Control.LayerSwitcher() );
-            map.addControl( new OpenLayers.Control.PanZoomBar() );
+            map.addLayers([gphy, gmap, ghyb, gsat]);
 
+            map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
         }
-        
-        function add() {
-
-            var url = 'http://boston.openguides.org/markers/AQUA.png';
-            var sz = new OpenLayers.Size(10, 17);
-            var calculateOffset = function(size) {
-                                return new OpenLayers.Pixel(-(size.w/2), -size.h);
-                             };           
-            var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
-            var barcelona = new OpenLayers.LonLat(2.13134765625,
-                                                  41.37062534198901);
-            marker = new OpenLayers.Marker(barcelona, icon);
-            markers.addMarker(marker);
-        }
-
-        function remove() {
-            markers.removeMarker(marker);
-        }
-
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers With Google Layer Example</h1>
-    <div id="map"></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>
+    <h1 id="title">Google Layer Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate use of the various types of Google layers.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        For best performance, you must be using a version of the Google Maps
+        API which is v2.93 or higher. In order to use this version of the API,
+        it is best to simply set your application to use the string "v=2" in
+        the request, rather than tying your application to an explicit version.
+    </div>
   </body>
 </html>

examples/graphic-name.html

@@ -0,0 +1,83 @@
+<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">
+        var map;
+
+        function init() {
+            map = new OpenLayers.Map('map');
+
+            // list of well-known graphic names
+            var graphics = ["star", "cross", "x", "square", "triangle", "circle"];
+            
+            // 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
+                }
+            });
+
+            // 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>
+</html>

examples/gutter.html

@@ -1,13 +1,11 @@
 <html>
   <head>
+      <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" />
     <style type="text/css">
-        #map { 
-            width: 500px; 
-            height: 300px; 
-            border: 1px solid gray; 
-        } 
         p.caption {
-            width: 500px; 
+            width: 512px;
         }
     </style>
     <script src="../lib/OpenLayers.js"></script>
@@ -33,8 +31,17 @@
     </script>
   </head>
   <body>
-    <h1>OpenLayers Gutter Example</h1> 
-    <div id="map"></div> 
+    <h1 id="title">Gutter Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
         <p class="caption">
             When you render tiles with certain types of symbols, there are artifacts
             at tile edges that make symbology not look continuous.  In the center of
@@ -42,6 +49,6 @@
             vertically by a tile.  Open the layer switcher and change to the layer
             with a 15 pixel gutter to see how the symbology looks nicer.
         </p>
-         
+    </div>
   </body>
 </html>

examples/hover-handler.html

@@ -0,0 +1,211 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <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" />        
+        <style type="text/css">
+            #map {
+                width: 340px;
+                height: 170px;
+                border: 1px solid gray;
+            }
+            #west {
+                width: 350px;
+            }
+            #east {
+                position: absolute;
+                left: 370px;
+                top: 3em;
+            }
+
+            table td {
+                text-align: center;
+                margin: 0;
+                border: 1px solid gray;
+            }
+            textarea.output {
+                text-align: left;
+                font-size: 0.9em;
+                width: 250px;
+                height: 65px;
+                overflow: auto;
+            }
+        </style>
+        <script src="../lib/Firebug/firebug.js"></script>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+
+            OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {                
+                defaultHandlerOptions: {
+                    'delay': 500,
+                    'pixelTolerance': null,
+                    'stopMove': false
+                },
+
+                initialize: function(options) {
+                    this.handlerOptions = OpenLayers.Util.extend(
+                        {}, this.defaultHandlerOptions
+                    );
+                    OpenLayers.Control.prototype.initialize.apply(
+                        this, arguments
+                    ); 
+                    this.handler = new OpenLayers.Handler.Hover(
+                        this,
+                        {'pause': this.onPause, 'move': this.onMove},
+                        this.handlerOptions
+                    );
+                }, 
+
+                onPause: function(evt) {
+                    var output = document.getElementById(this.key + 'Output');
+                    var msg = 'pause ' + evt.xy;
+                    output.value = output.value + msg + "\r\n";
+                },
+
+                onMove: function(evt) {
+                    // if this control sent an Ajax request (e.g. GetFeatureInfo) when
+                    // the mouse pauses the onMove callback could be used to abort that
+                    // request.
+                }
+            });
+
+            var map, controls; 
+
+            function init(){
+        
+                map = new OpenLayers.Map('map');
+                var layer = new OpenLayers.Layer.WMS(
+                    'OpenLayers WMS',
+                    'http://labs.metacarta.com/wms/vmap0',
+                    {layers: 'basic'}
+                );
+                map.addLayers([layer]);
+                
+                controls = {
+                    'long': new OpenLayers.Control.Hover({
+                        handlerOptions: {
+                            'delay': 2000
+                        }
+                    }),
+                    'short': new OpenLayers.Control.Hover({
+                        handlerOptions: {
+                            'delay': 100
+                        }
+                    }),
+                    'tolerant': new OpenLayers.Control.Hover({
+                        handlerOptions: {
+                            'delay': 1000,
+                            'pixelTolerance': 6
+                        }
+                    }),
+                    'untolerant': new OpenLayers.Control.Hover({
+                        handlerOptions: {
+                            'delay': 1000,
+                            'pixelTolerance': 1
+                        }
+                    }),
+                    'stoppropag': new OpenLayers.Control.Hover({
+                        handlerOptions: {
+                            'stopMove': true
+                        }
+                    })
+                };
+
+                var props = document.getElementById("props");
+                var control;
+                for(var key in controls) {
+                    control = controls[key];
+                    // only to route output here
+                    control.key = key;
+                    map.addControl(control);
+                }
+
+                map.addControl(new OpenLayers.Control.MousePosition());
+                map.zoomToMaxExtent();
+            }
+            
+            function toggle(key) {
+                var control = controls[key];
+                if(control.active) {
+                    control.deactivate();
+                } else {
+                    control.activate();
+                }
+                var status = document.getElementById(key + "Status");
+                status.innerHTML = control.active ? "on" : "off";
+                var output = document.getElementById(key + "Output");
+                output.value = "";
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Hover Handler Example</h1>
+        <div id="west">
+    
+            <div id="tags">
+            </div>
+    
+            <p id="shortdesc">
+                This example shows the use of the hover handler.
+            </p>
+    
+            <div id="map" class="smallmap"></div>
+            <p>
+                The hover handler is to be used to emulate mouseovers on
+                objects on the map that aren't DOM elements. For example
+                one can use the hover hander to send WMS/GetFeatureInfo
+                requests as the user moves the mouse over the map.
+            </p>
+            <p>
+                The "delay" option specifies the number of milliseconds
+                before the event is considered a hover. Default is 500
+                milliseconds.
+            </p>
+            <p>
+                The "pixelTolerance" option specifies the maximum number
+                of pixels between mousemoves for an event to be
+                considered a hover. Default is null, which means no
+                pixel tolerance.
+            </p>
+            <p>
+                The "stopMove" option specifies whether other mousemove
+                listeners registered before the hover handler listener must
+                be notified on mousemoves or not. Default is false (meaning
+                that the other mousemove listeners will be notified on
+                mousemove).
+            </p>
+        </div>
+        <div id="east">
+            <table>
+                <caption>Controls with hover handlers (toggle on/off to clear output)</caption>
+                <tbody>
+                    <tr>
+                        <td>long delay (2 sec)</td>
+                        <td><button id="longStatus" onclick="toggle('long')">off</button></td>
+                        <td><textarea class="output" id="longOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>short delay (100 msec)</td>
+                        <td><button id="shortStatus" onclick="toggle('short')">off</button></td>
+                        <td><textarea class="output" id="shortOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>tolerant (6 pixels)</td>
+                        <td><button id="tolerantStatus" onclick="toggle('tolerant')">off</button></td>
+                        <td><textarea class="output" id="tolerantOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>untolerant (1 pixel)</td>
+                        <td><button id="untolerantStatus" onclick="toggle('untolerant')">off</button></td>
+                        <td><textarea class="output" id="untolerantOutput"></textarea></td>
+                    </tr>
+                    <tr>
+                        <td>stop propagation</td>
+                        <td><button id="stoppropagStatus" onclick="toggle('stoppropag')">off</button></td>
+                        <td><textarea class="output" id="stoppropagOutput"></textarea></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>

examples/image-layer.html

@@ -1,14 +1,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+      <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" />
     <style type="text/css">
-        p {
+        p.caption {
             width: 512px;
         }
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid gray;
-        }
     </style>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
@@ -26,8 +24,8 @@
                                 options);
 
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,global_mosaic"}, options);
+                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                {layers: "landsat7"}, options);
 
             map.addLayers([graphic, jpl_wms]);
             map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -36,9 +34,18 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Image Layer Example</h1>
-    <div id="map"></div>
-    <p>
+    <h1 id="title">Image Layer Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate a single non-tiled image as a selectable base layer.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p class="caption">
             The "City Lights" layer above is created from a single web accessible
             image.  If you construct it without any resolution related options,
             the layer will be given a single resolution based on the extent/size.
@@ -46,5 +53,6 @@
             intended to be used in an overview map - where another layer type
             might not make a good overview.
         </p>
+    </div>
   </body>
 </html>

examples/intersects.html

@@ -0,0 +1,183 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Geometry Intersections</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">
+        html, body {
+            margin: 0;
+            padding: 1em;
+            font: 0.9em Verdana, Arial, sans serif;
+        }
+        input, select, textarea {
+            font: 0.9em Verdana, Arial, sans-serif;
+        }
+        h2 {
+            margin-top: 0.75em;
+            font-size: 1.6em;
+        }
+        #leftcol {
+            position: absolute;
+            top: 0;
+            left: 1em;
+            padding: 0;
+            width: 455px;
+        }
+        #map {
+            width: 450px;
+            height: 225px;
+            border: 1px solid #ccc;
+        }
+        #input {
+            width: 450px;
+        }
+        #text {
+            font-size: 0.85em;
+            margin: 1em 0 1em 0;
+            width: 100%;
+            height: 10em;
+        }
+        #info {
+            position: relative;
+            padding: 2em 0;
+            margin-left: 470px;
+        }
+        #features {
+            font-size: 0.8em;
+            width: 100%;
+            height: 200px;
+        }
+        #intersections {
+            font-size: 0.8em;
+            width: 100%;
+            height: 200px;
+        }
+        p {
+            margin: 0;
+            padding: 0.75em 0 0.75em 0;
+        }
+    </style>
+    <script src="../lib/Firebug/firebug.js"></script>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, vectors, geojson;
+        function init(){
+            map = new OpenLayers.Map('map');
+            vectors = new OpenLayers.Layer.Vector(
+                "Vector Layer",
+                {isBaseLayer: true}
+            );
+
+            map.addLayers([vectors]);
+            map.addControl(new OpenLayers.Control.MousePosition());
+            
+            var panel = new OpenLayers.Control.EditingToolbar(vectors);
+            map.addControl(panel);
+
+            geojson = new OpenLayers.Format.GeoJSON();
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+        }
+        
+        function serialize() {
+            var str = geojson.write(vectors.features, true);
+            document.getElementById('features').value = str;
+        }
+
+        function deserialize() {
+            var element = document.getElementById('text');
+            var features = geojson.read(element.value);
+            var bounds;
+            if(features) {
+                if(features.constructor != Array) {
+                    features = [features];
+                }
+                for(var i=0; i<features.length; ++i) {
+                    if (!bounds) {
+                        bounds = features[i].geometry.getBounds();
+                    } else {
+                        bounds.extend(features[i].geometry.getBounds());
+                    }
+                    
+                }
+                vectors.addFeatures(features);
+                map.zoomToExtent(bounds);
+                var plural = (features.length > 1) ? 's' : '';
+                element.value = features.length + ' feature' + plural + ' added'
+            } else {
+                element.value = 'Bad input';
+            }
+        }
+        
+        function intersect() {
+            var features = vectors.features;
+            var feat1, feat2, intersects12, intersects21;
+            var parts = [];
+            // reset attributes
+            for(var i=0; i<features.length; ++i) {
+                features[i].attributes.intersectsWith = [];
+            }
+            for(var i=0; i<features.length-1; ++i) {
+                feat1 = features[i];
+                for(var j=i+1; j<features.length; ++j) {
+                    feat2 = features[j];
+                    intersects12 = feat1.geometry.intersects(feat2.geometry);
+                    if(intersects12) {
+                        feat1.attributes.intersectsWith.push("f" + j);
+                        parts.push("f" + i + " intersects f" + j + "\n");
+                    }
+                    intersects21 = feat2.geometry.intersects(feat1.geometry);
+                    if(intersects21) {
+                        feat2.attributes.intersectsWith.push("f" + i);
+                        parts.push("f" + j + " intersects f" +  i + "\n");
+                    }
+                    if(intersects12 != intersects21) {
+                        parts.push("trouble with " + i + " and " + j + "\n");
+                    }
+                }
+            }
+            if(parts.length > 0) {
+                document.getElementById("intersections").value = parts.join("");
+            } else {
+                document.getElementById("intersections").value = "no intersections";
+            }
+        }
+
+        // preload images
+        (function() {
+            var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
+            var onImages = [];
+            var offImages = [];
+            for(var i=0; i<roots.length; ++i) {
+                onImages[i] = new Image();
+                onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
+                offImages[i] = new Image();
+                offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
+            }
+        })();
+
+    </script>
+  </head>
+  <body onload="init()">
+    <div id="leftcol">
+        <h1 id="title">OpenLayers Geometry Intersection Example</h1>
+        <p id="shortdesc">
+            Use of geometry.intersects method for testing geometry intersections.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="input">
+            <textarea id="text"></textarea> 
+            <input type="button" value="add feature" onclick="deserialize();" />
+            <span id="selected"></span>
+        </div>
+    </div>
+    <div id="info">
+        Features
+        <input type="button" value="refresh" onclick="serialize();" /><br />
+        <textarea id="features"></textarea>
+        Intersections
+        <input type="button" value="intersect all" onclick="intersect();" /><br />
+        <textarea id="intersections"></textarea>
+    </div>
+  </body>
+</html>

examples/kamap.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>OpenLayers KaMap Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -28,7 +24,16 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+    <h1 id="title">KaMap Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
   </body>
 </html>

examples/kml-layer-linestring.html

@@ -1,30 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
-    <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://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
-            map.addLayer(layer);
-            map.addLayer(new OpenLayers.Layer.GML("KML", "kml/lines.kml", {format: OpenLayers.Format.KML}));
-            map.zoomToExtent(new OpenLayers.Bounds(-112.292744,36.068477,-112.22408,36.109246));
-        }
-    </script>
-  </head>
-  <body onload="init()">
-    <div id="map"></div>
-  </body>
-</html>

examples/kml-layer.html

@@ -1,12 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <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;
@@ -19,12 +14,29 @@
             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
             map.addLayer(layer);
-            map.addLayer(new OpenLayers.Layer.GML("KML", "kml/mc-search.kml", {format: OpenLayers.Format.KML}));
-            map.zoomToMaxExtent();
+            map.addLayer(new OpenLayers.Layer.GML("KML", "kml/lines.kml", 
+               {
+                format: OpenLayers.Format.KML, 
+                formatOptions: {
+                  extractStyles: true, 
+                  extractAttributes: true
+                }
+               }));
+            map.zoomToExtent(new OpenLayers.Bounds(-112.306698,36.017792,-112.03204,36.18087));
         }
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+      <h1 id="title">KML Layer Example</h1>
+
+      <div id="tags"></div>
+
+      <p id="shortdesc">
+          Demonstrates loading and displaying a KML file on top of a basemap.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs"></div>
   </body>
 </html>

examples/layer-opacity.html

@@ -1,14 +1,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+      <title>OpenLayers Layer Opacity 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 {
             font-family: sans-serif;
         }
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid lightgray;
-        }
         p {
             width: 512px;
         }
@@ -47,29 +45,35 @@
         }
         function init(){
             var options = {
-                projection: "EPSG:26912",
-                units: 'm',
-                maxExtent: new OpenLayers.Bounds(455402, 4967657, 473295, 4984095),
-                maxResolution: 'auto',
-                maxZoomLevel: 8
+                maxExtent: new OpenLayers.Bounds(-110.994, 45.885, -110.950, 45.929),
+                maxResolution: "auto"
             };
             map = new OpenLayers.Map('map', options);
             var drg = new OpenLayers.Layer.WMS("Topo Maps",
                 "http://terraservice.net/ogcmap.ashx",
                 {layers: "DRG"});
             shade = new OpenLayers.Layer.WMS("Shaded Relief",
-                "http://ims.cr.usgs.gov/servlet19/com.esri.wms.Esrimap/USGS_EDC_Elev_NED_3", 
+                "http://gisdata.usgs.gov/wmsconnector/com.esri.wms.Esrimap?ServiceName=USGS_EDC_Elev_NED_3",
                 {layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'},
                 {isBaseLayer: false, opacity: 0.3});
             map.addLayers([drg, shade]);
             map.addControl(new OpenLayers.Control.LayerSwitcher());
-            map.setCenter(new OpenLayers.LonLat(464348.5,4975876), 1);
+            map.zoomToMaxExtent();
         }
     </script>
   </head>
   <body onload="init()">
-    <h2>OpenLayers Layer Opacity Example</h2>
-    <div id="map"></div>
+    <h1 id="title">Layer Opacity Example</h1>
+
+    <div id="tags"></div>
+
+    <p id="shortdesc">
+        Demonstrate a change in the opacity for an overlay layer.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
         <p>
             Note that if you also have the setOpacity method defined on the Layer
             class, you can tweak the layer opacity after it has been added to the map.
@@ -80,5 +84,6 @@
             <a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
         </p>
         <p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
+    </div>
   </body>
 </html>

examples/layerLoadMonitoring.html

@@ -1,18 +1,15 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <title>OpenLayers Layer Load Monitoring 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">
-        #map {
-            position: absolute;
-            top: 5px;
-            left: 5px;
-            width: 450px;
-            height: 475px;
-            border: 1px solid black;
+        #controls {
+            float: left;
+            text-align: right;
         }
         #eventsLogID {
-            position: absolute;
-            top: 5px;
-            left: 460px;
+            text-align: left;
             width: 350px;
             height: 475px;
             overflow: auto;
@@ -108,14 +105,25 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+      <h1 id="title">Layer Load Monitoring Example</h1>
+
+      <div id="tags"></div>
+
+      <p id="shortdesc">
+          Demonstrate a method for monitoring tile loading performance.
+      </p>
+
+    <div id="map" style="float:left;"></div>
+
     <div id="controls">
         <div id="eventsLogID">
             <b>Events Log:</b>
         </div>
+
+        <input type="button" value="Clear" onclick="clearLog()"/>
     </div>
-    <div style="position:absolute; top: 500px; width: 700px">
-        <input type="button" value="Clear" style="float:right" onclick="clearLog()"/>
+
+    <div id="docs">
     </div>
   </body>
 </html>

examples/layerswitcher.html

@@ -1,17 +1,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+      <title>OpenLayers Layer Switcher Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
         function init(){
             map = new OpenLayers.Map('map', { controls: [] });
+            map.addControl(new OpenLayers.Control.Navigation());
 
             map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
 
@@ -20,8 +17,8 @@
                 {layers: 'basic'}, {'displayInLayerSwitcher':false} );
 
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://wms.jpl.nasa.gov/wms.cgi", 
-                {layers: "modis,global_mosaic"}, {'isBaseLayer': false});
+                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
+                {layers: "landsat7"}, {'isBaseLayer': false});
 
             var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
                 "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
@@ -38,9 +35,17 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="layerswitcher" style="float:right; width: 20em;"></div>
-    <div id="map"></div>
+    <h1 id="title">Layer Switcher Example</h1>
+
+    <div id="tags">
+    </div>
+
+    <p id="shortdesc">
+        Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
+    </p>
+
+    <div id="layerswitcher"></div>
+    <div id="map" class="smallmap"></div>
     <div id="docs">
       <p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use
          of the displayInLayerSwitcher option on the Layer to cause it to not display in the

examples/lite.html

@@ -1,30 +1,32 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>OpenLayers Basic Single WMS Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
-        var 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://labs.metacarta.com/wms/vmap0",
                     {layers: 'basic'} );
             map.addLayer(layer);
-            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+            map.zoomToMaxExtent();
         }
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <h1 id="title">Basic Single WMS Example</h1>
+
+    <div id="tags"></div>
+
+    <div id="shortdesc">Show a Simple Map</div>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        This example shows a very simple layout with minimal controls.  This example uses a single WMS base layer.
+    </div>
   </body>
 </html>

examples/mapguide.html

@@ -0,0 +1,139 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers MapGuide Layer 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">
+        #map {
+            width: 400px;
+            height: 400px;
+            border: 1px solid black;
+            float:left;
+        }
+        #map2 {
+            width: 400px;
+            height: 400px;
+            border: 1px solid black;
+            float:left;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+    
+        var map, layer;
+        var url = "http://demo01.dmsolutions.ca/mapguide/mapagent/mapagent.fcgi?USERNAME=Anonymous&";
+        //you can use this URL when MapGuide OS is installed locally
+        //var url = "/mapguide/mapagent/mapagent.fcgi";
+        
+        //Adjust the scale assumptions for MapGuide layers
+        //Tiled layers MUST use a DPI value of 96, untiled layers can use a 
+        //different DPI value which will be passed to the server as a parameter.
+        //Tiled and untiled layers must adjust the OL INCHES_PER_UNIT values
+        //for any degree-based projections.
+        var metersPerUnit = 111319.4908;  //value returned from mapguide
+        var inPerUnit = OpenLayers.INCHES_PER_UNIT.m * metersPerUnit;
+        OpenLayers.INCHES_PER_UNIT["dd"] = inPerUnit;
+        OpenLayers.INCHES_PER_UNIT["degrees"] = inPerUnit;
+        OpenLayers.DOTS_PER_INCH = 96;
+        
+        //tiled version
+        function initTiled(){
+        
+            var extent = new OpenLayers.Bounds(-3631568.75,-1293815.5,4491139.5833333321,4937122);
+            var tempScales = [50000000,23207944.16806,10772173.45016,5000000,2320794.41681,1077217.34502,500000,232079.44168,107721.7345,50000];
+            var mapOptions = {
+                maxExtent: extent, 
+                scales: tempScales,
+                units: 'm',
+                projection: 'EPSG:42304'
+            };
+            map = new OpenLayers.Map( 'map', mapOptions );
+            
+            var params = {
+              mapdefinition: 'Library://Samples/Gmap/Maps/gmapTiled.MapDefinition',
+              basemaplayergroupname: "BaseLayerGroup"
+            }
+            var options = {
+              singleTile: false 
+            }
+            var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS tiled layer", url, params, options );
+            map.addLayer(layer);
+            
+            map.zoomToMaxExtent();
+        }
+
+        //un-tiled version
+        function initUntiled() {
+        
+          var extent = new OpenLayers.Bounds(-87.865114442365922,43.665065564837931,-87.595394059497067,43.823852564430069);
+          var mapOptions = {
+                maxExtent: extent, 
+                maxResolution: 'auto'
+          };
+          map = new OpenLayers.Map( 'map2', mapOptions );
+            
+          var options = {
+              buffer: 1,
+              singleTile: true
+          };
+          
+          var params = {
+              mapdefinition: 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition'
+          };
+          /*
+                    The MapGuide layer can also be created using mapname and session as follows provided there
+                    is some wrapper code to obtain a valid session id and mapname
+          var params = {
+              mapname: 'Sheboygan47b3560bf1071',
+              session: '043bb716-0000-1000-8000-0017a4e6ff5d_en_7F0000010AFC0AFB0AFA'
+          };
+          */
+          var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS untiled baselayer", url, params, options );
+          map.addLayer(layer);
+          
+          //this is how to set up the layer for transparent overlays.  Requires a valid session ID 
+          //and mapName stored in that session.
+          //If the mapagent URL is on a different server than this OL layer, the OpenLayers proxy script
+          //must be used since this layer must perform an additional AJAX request before requesting the
+          //map  image
+          /* 
+            var options = {
+              isBaseLayer: false,
+              transparent: true,
+              buffer: 1,
+              singleTile: true
+            };
+            var params = {
+              mapName: 'Sheboygan',
+              session: '0b8cb80e-0000-1000-8003-0017a4e6ff5d_en_C0A802AD0AFC0AFB0AFA',
+
+
+
+              mapName: 'Sheboygan',
+              session: '0b8cb80e-0000-1000-8003-0017a4e6ff5d_en_C0A802AD0AFC0AFB0AFA',
+              version: '2.0.0',
+              selectioncolor: '0xFF0000',
+              behavior: 7
+            };
+            layer = new OpenLayers.Layer.MapGuide( "MapGuide OS Overlay layer", url, params, options );
+            map.addLayer(layer);
+          */ 
+          map.zoomToMaxExtent();
+    }
+    </script>
+  </head>
+  <body onload="initUntiled(); initTiled()">
+    <h1 id="title">MapGuide Layer Example</h1>
+
+    <div id="tags">
+    </div>
+
+    <p id="shortdesc">
+        Demonstrates how to create MapGuide tiled and untiled layers.
+    </p>
+
+    <p>If prompted for a password, username is Anonymous and an empty password</p>
+    <div id="map" class="smallmap"></div>
+    <div id="map2"></div>
+  </body>
+</html>

examples/mapserver.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>MapServer Layer</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;
@@ -28,6 +24,12 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <div id="title">MapServer Layer</div>
+    <div id="tags"></div>
+    <div id="shortdesc">Shows MapServer Layer</div>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        This is an example of using a MapServer Layer with a gutter parameter.  The gutter parameter is used to try to limit the edge effects between tiles.
+    </div>
   </body>
 </html>

examples/mapserver_untiled.html

@@ -1,5 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <title>MapServer Single Tile Mode</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">
         #map {
             width: 100%;
@@ -21,6 +24,12 @@
     </script>
   </head>
   <body>
-    <div id="map"></div>
+    <div id="title">MapServer Single Tile Mode</div>
+    <div id="tags"></div>
+    <div id="shortdesc">Shows single tile MapServer Layer</div>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        This shows an example of using a MapServer Layer in single tile mode.  Single tile mode can be useful when pulling data from dynamic sources.
+    </div>
   </body>
 </html>

examples/marker-shadow.html

@@ -0,0 +1,141 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        .smallmap {
+            width: 300px;
+        }
+        
+        .docs {
+            padding: 0px 5px;
+        }
+        
+        td {
+            vertical-align: top;
+        }
+        
+    </style>
+    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        
+        var SHADOW_Z_INDEX = 10;
+        var MARKER_Z_INDEX = 11;
+        
+        var DIAMETER = 200;
+        var NUMBER_OF_FEATURES = 15;
+            
+        var map, layer;   
+            
+        function init() {
+            map = new OpenLayers.Map("map");
+            
+            layer = new OpenLayers.Layer.Vector(
+                "Marker Drop Shadows",
+                {
+                    styleMap: new OpenLayers.StyleMap({
+                        // Set the external graphic and background graphic images.
+                        externalGraphic: "../img/marker-gold.png",
+                        backgroundGraphic: "./marker_shadow.png",
+                        
+                        // Makes sure the background graphic is placed correctly relative
+                        // to the external graphic.
+                        backgroundXOffset: 0,
+                        backgroundYOffset: -7,
+                        
+                        // Set the z-indexes of both graphics to make sure the background
+                        // graphics stay in the background (shadows on top of markers looks
+                        // odd; let's not do that).
+                        graphicZIndex: MARKER_Z_INDEX,
+                        backgroundGraphicZIndex: SHADOW_Z_INDEX,
+                        
+                        pointRadius: 10
+                    }),
+                    isBaseLayer: true,
+                    rendererOptions: {yOrdering: true}
+                }
+            );
+            
+            map.addLayers([layer]);
+            
+            // Add a drag feature control to move features around.
+            var dragFeature = new OpenLayers.Control.DragFeature(layer);
+            
+            map.addControl(dragFeature);
+            
+            dragFeature.activate();
+                        
+            map.zoomToMaxExtent();
+            
+            drawFeatures();
+        }
+        
+        function drawFeatures() {
+            
+            layer.removeFeatures(layer.features);
+            
+            // Create features at random around the center.
+            var center = map.getViewPortPxFromLonLat(map.getCenter());
+            
+            // Add the ordering features. These are the gold ones that all have the same z-index
+            // and succomb to y-ordering.
+            var features = [];
+            
+            for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
+                // Calculate a random x/y. Subtract half the diameter to make some
+                // features negative.
+                var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
+                var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
+                
+                var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
+                
+                var lonLat = map.getLonLatFromViewPortPx(pixel);
+                features.push(
+                    new OpenLayers.Feature.Vector(
+                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
+                    )
+                );
+            }
+            
+            layer.addFeatures(features);
+        }
+        
+    </script>
+  </head>
+  <body onload="init()">
+        <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+           This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
+        </p>
+        
+        <br>
+
+        <table>
+            <tr>
+                <td>
+                    <div id="map" class="smallmap"></div>
+                </td>
+                <td>
+                    <div class="docs">
+                        The features in this map were generated at random. Each of these features have a <i>backgroundGraphic</i> property set in the style map to add a shadow image. Note that the background graphics are not duplicated features with a different style.
+                        <br><br>
+                        The shadows were set to have a different z-index than the markers themselves, using the <i>backgroundGraphicZIndex</i> property. This makes sure all shadows stay behind the markers, keeping a clean look. The shadows were also placed nicely relative to the external graphic using the <i>backgroundXOffset</i> and <i>backgroundYOffset</i> property.
+                        <br><br>
+                        Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button onclick="drawFeatures()">Redraw Features</button>
+                </td>
+            </tr>
+        </table>
+        
+        
+    </body>
+</html>

examples/markerResize.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>Resize a Marker</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -43,8 +39,13 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+    <div id="title">Resize a Marker</div>
+    <div id="tags"></div>
+    <div id="shortdesc">Dynamically resize a marker</div>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        This example shows how to create a OpenLayers.Layer.Markers layer, add an icon, put it into a marker, and add the marker to the layer.  Once the marker has been added it is possible to use setSize() on the icon in order to resize the marker.
+    </div>
     <div style="background-color:purple" onclick="resize()"> click to resize marker</div>
   </body>
 </html>

examples/markers.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>Markers Layer Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -46,7 +42,12 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+    <div id="title">Markers Layer Example</div>
+    <div id="tags"></div>
+    <div id="shortdesc">Show markers layer with different markers</div>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers.  Also demonstrated is registering a mousedown effect on a marker.
+    </div>
   </body>
 </html>

examples/markersTextLayer.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <title>Using a Layer.Text to display markers</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -28,7 +24,11 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="map"></div>
+    <h1 id="title">Using a Layer.Text to display markers</h1>
+    <p id="shortdesc">
+      The Layer.Text class reads a Tab seperated values file and displays it as markers on
+      the map.
+    </p>  
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/measure.html

@@ -0,0 +1,184 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        #controlToggle li {
+            list-style: none;
+        }
+        p {
+            width: 512px;
+        }
+        #options {
+            position: relative;
+            width: 512px;
+        }
+        #output {
+            float: right;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, measureControls;
+        OpenLayers.Util.onImageLoadErrorColor = "transparent";
+        function init(){
+            map = new OpenLayers.Map('map');
+            
+            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
+
+            map.addLayers([wmsLayer]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.MousePosition());
+            
+            // style the sketch fancy
+            sketchSymbolizers = {
+                "Point": {
+                    pointRadius: 4,
+                    graphicName: "square",
+                    fillColor: "white",
+                    fillOpacity: 1,
+                    strokeWidth: 1,
+                    strokeOpacity: 1,
+                    strokeColor: "#333333"
+                },
+                "Line": {
+                    strokeWidth: 3,
+                    strokeOpacity: 1,
+                    strokeColor: "#666666",
+                    strokeDashstyle: "dash"
+                },
+                "Polygon": {
+                    strokeWidth: 2,
+                    strokeOpacity: 1,
+                    strokeColor: "#666666",
+                    fillColor: "white",
+                    fillOpacity: 0.3
+                }
+            };
+            var style = new OpenLayers.Style();
+            style.addRules([
+                new OpenLayers.Rule({symbolizer: this.sketchSymbolizers})
+            ]);
+            var styleMap = new OpenLayers.StyleMap({"default": style});
+            
+            var options = {
+                handlerOptions: {
+                    style: "default", // this forces default render intent
+                    layerOptions: {styleMap: styleMap},
+                    persist: true
+                }
+            };
+            measureControls = {
+                line: new OpenLayers.Control.Measure(
+                  OpenLayers.Handler.Path, options
+                ),
+                polygon: new OpenLayers.Control.Measure(
+                    OpenLayers.Handler.Polygon, options
+                )
+            };
+            
+            var control;
+            for(var key in measureControls) {
+                control = measureControls[key];
+                control.events.on({
+                    "measure": handleMeasurements,
+                    "measurepartial": handleMeasurements
+                });
+                map.addControl(control);
+            }
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+            
+            document.getElementById('noneToggle').checked = true;
+        }
+
+        function calcVincenty(geometry) {
+            /**
+             * Note: this function assumes geographic coordinates and
+             *     will fail otherwise.  OpenLayers.Util.distVincenty takes
+             *     two objects representing points with geographic coordinates
+             *     and returns the geodesic distance between them (shortest
+             *     distance between the two points on an ellipsoid) in *kilometers*.
+             *
+             * It is important to realize that the segments drawn on the map
+             *     are *not* geodesics (or "great circle" segments).  This means
+             *     that in general, the measure returned by this function
+             *     will not represent the length of segments drawn on the map.
+             */
+            var dist = 0;
+            for (var i = 1; i < geometry.components.length; i++) {
+                var first = geometry.components[i-1];
+                var second = geometry.components[i];
+                dist += OpenLayers.Util.distVincenty(
+                    {lon: first.x, lat: first.y},
+                    {lon: second.x, lat: second.y}
+                );
+            }
+            return dist;
+        }    
+        
+        function handleMeasurements(event) {
+            var geometry = event.geometry;
+            var units = event.units;
+            var order = event.order;
+            var measure = event.measure;
+            var element = document.getElementById('output');
+            var out = "";
+            if(order == 1) {
+                out += "measure: " + measure.toFixed(3) + " " + units;
+                if (map.getProjection() == "EPSG:4326") {
+                    out += "<br /> Great Circle Distance: " + 
+                        calcVincenty(geometry).toFixed(3) + " km *"; 
+                }        
+            } else {
+                out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
+            }
+            element.innerHTML = out;
+        }
+
+        function toggleControl(element) {
+            for(key in measureControls) {
+                var control = measureControls[key];
+                if(element.value == key && element.checked) {
+                    control.activate();
+                } else {
+                    control.deactivate();
+                }
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">OpenLayers Measure Example</h1>
+    <p id="shortdesc">
+        Demonstrates the measure control to measure distances and areas.
+    </p>
+    <div id="map" class="smallmap"></div>
+    <div id="options">
+        <div id="output">
+        </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="line" id="lineToggle" onclick="toggleControl(this);" />
+                <label for="lineToggle">measure distance</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
+                <label for="polygonToggle">measure area</label>
+            </li>
+        </ul>
+        <p>* Note that the geometries drawn are planar geometries and the
+        metrics returned by the measure control are planar measures.  The
+        "great circle" distance does not necessarily represent the length
+        of the segments drawn on the map.  Instead, it is a geodesic metric that
+        represents the cumulative shortest path between all vertices in the
+        geometry were they projected onto a sphere.</p>
+    </div>
+  </body>
+</html>

examples/mm.html

@@ -1,5 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <title>MultiMap</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">
         #map {
             width: 100%;
@@ -46,8 +49,11 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers MultiMap Example</h1>
-    <div id="map"></div>
+    <h1 id="title">MultiMap Example</h1>
+    <p id="shortdesc">
+      An example of using the Layer.MultiMap class.
+    </p>  
+    <div id="map" class="smallmap"></div>
     <div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
     <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
   </body>

examples/modify-feature.html

@@ -1,12 +1,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>Modify Feature</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">
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
         #controls {
             width: 512px;
         }
@@ -32,20 +29,14 @@
             map.addControl(new OpenLayers.Control.LayerSwitcher());
             map.addControl(new OpenLayers.Control.MousePosition());
             
-            var modifyOptions = {
-                onModificationStart: function(feature) {
-                    OpenLayers.Console.log("start modifying", feature.id);
-                },
-                onModification: function(feature) {
-                    OpenLayers.Console.log("modified", feature.id);
-                },
-                onModificationEnd: function(feature) {
-                    OpenLayers.Console.log("end modifying", feature.id);
-                },
-                onDelete: function(feature) {
-                    OpenLayers.Console.log("delete", feature.id);
+            function report(event) {
+                OpenLayers.Console.log(event.type, event.feature.id);
             }
-            };
+            vectors.events.on({
+                "beforefeaturemodified": report,
+                "featuremodified": report,
+                "afterfeaturemodified": report
+            });
             controls = {
                 point: new OpenLayers.Control.DrawFeature(vectors,
                             OpenLayers.Handler.Point),
@@ -53,8 +44,10 @@
                             OpenLayers.Handler.Path),
                 polygon: new OpenLayers.Control.DrawFeature(vectors,
                             OpenLayers.Handler.Polygon),
-                modify: new OpenLayers.Control.ModifyFeature(vectors,
-                                                             modifyOptions)
+                regular: new OpenLayers.Control.DrawFeature(vectors,
+                            OpenLayers.Handler.RegularPolygon,
+                            {handlerOptions: {sides: 5}}),
+                modify: new OpenLayers.Control.ModifyFeature(vectors)
             };
             
             for(var key in controls) {
@@ -65,6 +58,32 @@
             document.getElementById('noneToggle').checked = true;
         }
         
+        function update() {
+            // reset modification mode
+            controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
+            var rotate = document.getElementById("rotate").checked;
+            if(rotate) {
+                controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
+            }
+            var resize = document.getElementById("resize").checked;
+            if(resize) {
+                controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
+            }
+            var drag = document.getElementById("drag").checked;
+            if(drag) {
+                controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
+            }
+            // disable reshape mode if at least one of modes rotate, resize,
+            // drag is enabled
+            if (rotate || resize || drag) {
+                controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
+            }
+            var sides = parseInt(document.getElementById("sides").value);
+            sides = Math.max(3, isNaN(sides) ? 0 : sides);
+            controls.regular.handler.sides = sides;
+            var irregular =  document.getElementById("irregular").checked;
+            controls.regular.handler.irregular = irregular;
+        }
 
         function toggleControl(element) {
             for(key in controls) {
@@ -80,8 +99,9 @@
     </script>
   </head>
   <body onload="init()">
-    <h3>OpenLayers Modify Feature Example</h3>
-    <div id="map"></div>
+    <h3 id="title">OpenLayers Modify Feature Example</h3>
+    <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
+    <div id="map" class="smallmap"></div>
     <div id="controls">
         <ul id="controlToggle">
             <li>
@@ -101,10 +121,41 @@
                 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                 <label for="polygonToggle">draw polygon</label>
             </li>
+            <li>
+                <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" />
+                <label for="regularToggle">draw regular polygon</label>
+                <label for="sides"> - sides</label>
+                <input id="sides" type="text" size="2" maxlength="2"
+                       name="sides" value="5" onchange="update()" />
+                <ul>
+                    <li>
+                        <input id="irregular" type="checkbox"
+                               name="irregular" onchange="update()" />
+                        <label for="irregular">irregular</label>
+                    </li>
+                </ul>
+            </li>
             <li>
                 <input type="radio" name="type" value="modify" id="modifyToggle"
                        onclick="toggleControl(this);" />
                 <label for="modifyToggle">modify feature</label>
+                <ul>
+                    <li>
+                        <input id="rotate" type="checkbox"
+                               name="rotate" onchange="update()" />
+                        <label for="rotate">allow rotation</label>
+                    </li>
+                    <li>
+                        <input id="resize" type="checkbox"
+                               name="resize" onchange="update()" />
+                        <label for="resize">allow resizing</label>
+                    </li>
+                    <li>
+                        <input id="drag" type="checkbox"
+                               name="drag" onchange="update()" />
+                        <label for="drag">allow dragging</label>
+                    </li>
+                </ul>
             </li>
         </ul>
     </div>

examples/mouse-position.html

@@ -2,16 +2,9 @@
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
   <head>
-    <style type="text/css">
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        #map {
-            width: 512px;
-            height: 256px;
-        }
-    </style>
+    <title>MousePosition Control</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;
@@ -35,7 +28,12 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <h3 id="title">MousePosition Control</h3>
+    <p id="shortdesc">
+      Use the MousePosition Control to display the coordinates of the cursor
+      inside or outside the map div.
+    </p>  
+    <div id="map" class="smallmap"></div>
     <div id="coords"></div>
     <p>Moving your mouse to the upper left corner of this map should return 'x=0,y=0' -- in the past, it didn't in IE. If it returns 2,2, consider it a bug, and report it.</p> 
   </body>

examples/multimap-mercator.html

@@ -1,5 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <title>MultiMap SphericalMercator</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">
         #map {
             width: 100%;
@@ -51,7 +54,12 @@
     </script>
   </head>
   <body onload="init()">
-    <h3>OpenLayers MultiMap Mercator Example</h3>
-    <div id="map"></div>
+    <h3 id="title">MultiMap Mercator Example</h3>
+    <p id="shortdesc">
+      This sphericalMercator example using multimap demonstrates that the
+      multimap layer does not fully support the sphericalMercator projection at
+      this time.
+    </p>  
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/multiserver.html

@@ -1,12 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <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;
@@ -28,6 +23,18 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <h1 id="title">Multiple Server URLS</h1>
+
+  <div id="tags">
+  </div>
+  <p id="shortdesc">
+      Load your tiles faster by pointing to the same server, but with different urls
+  </p>
+
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+    Browsers typically limit the number of concurrent requests to the same server, based on hostname. In order to ake tiles load more quickly, it often makes sense to distribute requests over multiple hostnames to achieve more concurrency. Typically, browsers perform best with 3 different hostnames -- your performance may vary. (For example, if your server can't handle more than 2 requests simultaneously, then additional hostnames will not help you.)    
+   </div>
+   
   </body>
 </html>

examples/mvs.html

@@ -88,10 +88,10 @@ function runMVS() {
             case 'nasa': 
                 theMVS.addLayer(
                     new OpenLayers.Layer.WMS("NASA Mosaic", 
-                       "http://wms.jpl.nasa.gov/wms.cgi",
+                       "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
                        {"EXCEPTIONS" : "application/vnd.ogc.se_inimage",
                         "format" : "image/jpeg",
-                        layers:"modis,global_mosaic"}
+                        layers:"landsat7"}
                        ));
                 break;
             case 'gmaps':

examples/navigation-control.html

@@ -0,0 +1,34 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>OpenLayers Navigation Control</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer;
+        function init(){
+            map = new OpenLayers.Map( 'map', { controls: [] });
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'} );
+            map.addLayer(layer);
+            nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
+            map.addControl(nav);
+            map.zoomToMaxExtent();
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Navigation Control</h1>
+
+    <div id="tags"></div>
+
+    <div id="shortdesc">Demonstrate Navigation Control features</div>
+
+    <div id="map" class="smallmap"></div>
+    <a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a>
+    <div id="docs">
+        This example demonstrates a couple features of the Navigation control. The Navigation control controls most map dragging, movement, zooming, etc. In this case, we have a demonstration of how to create a navigation control with no zoom wheel action, which can then be enabled or disabled by the user.
+    </div>
+  </body>
+</html>

examples/navigation-history.html

@@ -0,0 +1,57 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>OpenLayers Navigation History Example</title>
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <style>
+            #panel {
+                right: 0px;
+                height: 30px; 
+                width: 200px;
+            }
+            #panel div { 
+                float: left;
+                margin: 5px;
+            }
+        </style>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, nav, panel;
+
+            function init() {
+                map = new OpenLayers.Map('map');
+
+                nav = new OpenLayers.Control.NavigationHistory();
+                // parent control must be added to the map
+                map.addControl(nav);
+
+                panel = new OpenLayers.Control.Panel(
+                    {div: document.getElementById("panel")}
+                );
+                panel.addControls([nav.next, nav.previous]);
+                map.addControl(panel);
+                
+                var layer = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS",
+                    "http://labs.metacarta.com/wms/vmap0",
+                    {layers: 'basic'}
+                );
+                map.addLayer(layer);
+                map.zoomToMaxExtent();
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Map Navigation History Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+            A control for zooming to previous and next map extents.
+        </p>
+
+        <div id="map" class="smallmap"></div>
+        Map navigation history controls<div id="panel"></div>
+        <div id="docs"></div>
+    </body>
+</html>

examples/navtoolbar-outsidemap.html

@@ -1,14 +1,11 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
+        #paneldiv {
+            height: 80px;
         }
-        
-        #paneldiv { float: right }
         #paneldiv div { 
             top: 10px; 
         }
@@ -35,8 +32,8 @@
   </head>
   <body onload="init()">
     <h1 id="title">Navigation Toolbar: Outside the Map</h1>
+    <div id="map" class="smallmap"></div>
     <div id="paneldiv" class="olControlNavToolbar"></div>
-    <div id="map"></div>
     <div id="docs">
      <p> To place the Naviation Toolbar outside the map:</p>
       <ul>
@@ -45,20 +42,6 @@
         <li>Specify the HTML element as a 'div' option in your NavToolbar constructor</li>
         <li>Add the olControlNavToolbar class to your div.</li>
       </ul>
-      <pre id="code">
-&lt;link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-&lt;style type="text/css">
-  #paneldiv { float: right; }
-  #paneldiv div { 
-    top: 10px; 
-  }
-&lt;/style>
-&lt;div id="paneldiv" class="olControlNavToolbar">&lt;/div>
-
-...
-
-var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
-</pre>
    </div> 
    
   </body>

examples/navtoolbar.html

@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-            float:right;
-        }
-        
-    </style>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <title>NavToolbar Demo</title>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -16,7 +10,7 @@
         var zoom = 5;
         var map, layer;
 
-        function init(){
+        function init() {
             map = new OpenLayers.Map( 'map', { controls: [new OpenLayers.Control.PanZoom()] } );
             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
@@ -30,6 +24,11 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <h3 id="title">NavToolbar Demo</h3>
+    <p id="shortdesc">
+       Demo the NavToolbar, a subclass of Control.Panel which shows icons for
+       navigation.
+    </p> 
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/notile.html

@@ -1,12 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #mapDiv {
-            width: 400px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <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;
@@ -29,8 +24,12 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>OpenLayers Example</h1>
-    <div id="mapDiv"></div>
+    <h1 id="title">Untiled Example</h1>
+    <p id="shortdesc">
+      Create an untiled WMS layer using the singleTile: true, option or the deprecated
+      WMS.Untiled layer.
+    </p>  
+    <div id="mapDiv" class="smallmap"></div>
     <p> The first layer is an old OpenLayers.Layer.WMS.Untiled layer, using 
         a default ratio value of 1.5.
     <p> The second layer is an OpenLayers.Layer.WMS layer with singleTile set

examples/openmnnd.html

@@ -1,15 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <style type="text/css">
-        #map {
-            width: 600px;
-            height: 475px;
-            border: 1px solid black;
-        }
-        #info {
-            float: right;
-        }
-    </style>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -27,12 +19,12 @@
 
             map.addLayer(wms);
 
-            wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4});
+            wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4, style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])});
 
             // preFeatureInsert can be used to set style before the feature is drawn
             wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
             }
-            wfs.onFeatureInsert = function() {
+            wfs.onFeatureInsert = function(feature) {
               OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
             }
             map.addLayer(wfs);
@@ -56,7 +48,7 @@
             map.addLayer(pwfs);
 
             rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
-            OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWIdth: "4"}); 
+            OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"});
             rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
               {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});
 
@@ -117,6 +109,27 @@
     </script>
   </head>
   <body onload="init()">
+    <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+            <p>
+            This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
+            from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For
+            more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
+            In this example there are 4 layers shown on the map.  The base layer and parcel layer are created from a WMS serivce using the OpenLayers.Layer.WMS object.
+            The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
+            </p>
+
+            <p>
+            Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map.  Testing has shown that when
+            you renderer more than 200 vectors in the browser the performance decreases dramatically.  Also features that have a lot of vertices
+            can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
+            there where a handful of features that had too many vertices to render without killing the browser resources.
+
+            There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth.
+            You can also get feature attributes from the WFS services using the extractAttribute property.  View the source to see the example code.
+            </p>
+    </div>
     <div id="info">
       <ul>
         <li>Streams: Feature Count <span id="stream_features">0</span></li>
@@ -136,6 +149,5 @@
         </li>
     </ul>
     </div>
-    <div id="map"></div>
   </body>
 </html>

examples/ordering.html

@@ -0,0 +1,203 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style type="text/css">
+        .smallmap {
+            width: 300px;
+        }
+        
+        .docs {
+            padding: 0px 5px;
+        }
+        
+        td {
+            vertical-align: top;
+        }
+        
+    </style>
+    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        
+        var GOLD_Z_INDEX = 15;
+        var FIRST_RED_Z_INDEX = 10;
+        var SECOND_RED_Z_INDEX = 11;
+        
+        var RADIUS_FROM_CENTER = 40;
+        var POINT_DISTANCE = 10;
+            
+        function initYOrderMap() {
+            var map = new OpenLayers.Map("yorder");
+            
+            var layer = new OpenLayers.Layer.Vector(
+                "Y-Order",
+                {
+                    styleMap: new OpenLayers.StyleMap({
+                        externalGraphic: "../img/marker-gold.png",
+                        pointRadius: 10,
+                        graphicZIndex: GOLD_Z_INDEX
+                    }),
+                    isBaseLayer: true,
+                    rendererOptions: {yOrdering: true}
+                }
+            );
+            
+            map.addLayers([layer]);
+            map.zoomToMaxExtent();
+            
+            // Add features to the layers to show off z-index/y-ordering.
+            // We do this after adding the layer so we can work in pixels.
+            var center = map.getViewPortPxFromLonLat(map.getCenter());
+            
+            var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
+            var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
+            var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
+            var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
+            
+            // Add the ordering features. These are the gold ones that all have the same z-index
+            // and succomb to y-ordering.
+            var orderingFeatures = [];
+            // Note: We use > here on purpose (instead of >= ), as well as subtracting the
+            // the POINT_DISTANCE in the beginning of the loop (as opposed to the end).
+            // This is purely for symmetry. Also note that the gold features are drawn
+            // from bottom to top so as to quickly signal whether or not y-ordering is working.
+            while (bottom.y > top.y) {
+                bottom.y -= POINT_DISTANCE;
+                var lonLat = map.getLonLatFromViewPortPx(bottom);
+                orderingFeatures.push(
+                    new OpenLayers.Feature.Vector(
+                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
+                    )
+                );
+            }
+          
+            layer.addFeatures(orderingFeatures);
+            
+            // Add the z-index features. Technically, these features succomb to y-ordering
+            // as well; however, since they have different z-indexes, the z-indexes take 
+            // precedence.
+            var indexFeatures = [];
+            var useFirst = true;
+            while (left.x <= right.x) {
+                var lonLat = map.getLonLatFromViewPortPx(left);
+                var point = new OpenLayers.Feature.Vector(
+                    new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
+                );
+                
+                // This is where the magic happens. We override the style on the layer
+                // to give our own style with alternativing z-indexes.
+                point.style = {
+                    graphicZIndex: useFirst ? FIRST_RED_Z_INDEX : SECOND_RED_Z_INDEX,
+                    externalGraphic: "../img/marker.png",
+                    pointRadius: 10
+                }
+                
+                indexFeatures.push(
+                    point
+                );
+                
+                left.x += POINT_DISTANCE;
+                useFirst = !useFirst;
+            }
+            
+            layer.addFeatures(indexFeatures);
+        }
+        
+        function initDrawingOrderMap() {
+            var map = new OpenLayers.Map("drawingorder");
+            
+            var layer = new OpenLayers.Layer.Vector(
+                "Drawing Order",
+                {
+                    // Note there's no z-index set, and yOrdering is left
+                    // to its default.
+                    styleMap: new OpenLayers.StyleMap({
+                        externalGraphic: "../img/marker-green.png",
+                        pointRadius: 10
+                    }),
+                    isBaseLayer: true
+                }
+            );
+            
+            map.addLayers([layer]);
+            map.zoomToMaxExtent();
+            
+            // Add features to the layers to show off z-index/y-ordering.
+            // We do this after adding the layer so we can work in pixels.
+            var center = map.getViewPortPxFromLonLat(map.getCenter());
+            
+            var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
+            var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
+            var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y);
+            var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y);
+            
+            // Add the ordering features. These are the gold ones that all have the same z-index
+            // and succomb to y-ordering.
+            var orderingFeatures = [];
+            while (bottom.y > top.y && left.x < right.x) {
+                var bottomLonLat = map.getLonLatFromViewPortPx(bottom);
+                var leftLonLat = map.getLonLatFromViewPortPx(left);
+                orderingFeatures.push(
+                    new OpenLayers.Feature.Vector(
+                        new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat)
+                    )
+                );
+                bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
+                left.x += POINT_DISTANCE / 2;
+            }
+          
+            layer.addFeatures(orderingFeatures);
+        }
+
+        function init(){
+            initYOrderMap();
+            initDrawingOrderMap();
+        };
+        
+    </script>
+  </head>
+  <body onload="init()">
+        <h1 id="title">Z-Index/Y-Order Example</h1>
+
+        <div id="tags">
+        </div>
+
+        <p id="shortdesc">
+           This example shows the use of z-indexing and y-ordering of external graphics. Zoom in and out to see this behavior.
+        </p>
+
+        <h3>Z-Index (with Y-Ordering enabled)</h3>
+        <table>
+            <tr>
+                <td>
+                    <div id="yorder" class="smallmap"></div>
+                </td>
+                <td>
+                    <div class="docs">
+                        In this map, the gold features all have the same z-index, and the red features have alternating z-indeces. The gold features' z-index is greater than the red features' z-indeces, which is why gold features look to be drawn on top of the red features. Since each gold feature has the same z-index, gold features succomb to y-ordering: this is where features that seem closest to the viewer (lower lattitude) show up above those that seem farther away (higher lattitude).
+                        <br><br>
+                        All vector layers have z-indexing enabled by default, but are not enabled with y-ordering. You can enable y-ordering by passing the parameter <i>yOrdering: true</i> in the vector layer's options hash. For all configurations, if features have the same z-index -- and if y-ordering is enabled: the same lattitude -- those features will succomb to drawing order, where the last feature to be drawn will appear above the rest.
+                    </div>
+                </td>
+            </tr>
+        </table>
+        <br>
+        <h3>Drawing Order (no Z-Indexes set, and Y-Ordering disabled)</h3>
+        <table>
+            <tr>
+                <td>
+                    <div id="drawingorder" class="smallmap"></div>
+                </td>
+                <td>
+                    <div class="docs">
+                        In this map, features are not given z-indexes, and the layer's <i>yOrdering</i> parameter is set to the default (false). This configuration makes features succomb to drawing order instead of z-index order or y-order.
+                        <br><br>
+                        The features in this map were drawn from left to right and bottom to top, diagonally, to show that y-ordering is not enabled.
+                    </div>
+                </td>
+            </tr>
+        </table>
+        
+        
+    </body>
+</html>

examples/osm-layer.html

@@ -0,0 +1,118 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style>
+        #map {
+            height: 350px;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var lon = 5;
+        var lat = 40;
+        var zoom = 5;
+        var map, layer, gml;
+        function export_vectors() {
+            var x = new OpenLayers.Format.XML();
+            var content = x.write(gml.renderer.rendererRoot);
+            $("vectors").value = content;
+            $("vectors").style.display = "block";
+            $("vectorlink").href = "data:image/svg+xml," + escape(content);
+            $("vectorlink").style.display="block";
+        }
+        function on_feature_hover(feature) {
+            var text ="<ul>";
+            var type ="way";
+            if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
+                type = "node";
+            }    
+            text += "<li>" + feature.osm_id + ": <a href='http://crschmidt.net/osm/attributes.html?type="+type+"&id="+feature.osm_id+"'>Edit</a>, <a href='http://www.openstreetmap.org/api/0.5/"+type + "/" + feature.osm_id + "'>API</a></li>";
+            for (var key in feature.attributes) {
+                text += "<li>" + key + ": " + feature.attributes[key] + "</li>";
+            }
+            text += "</ul>";
+            $("status").innerHTML = text;
+        }   
+        function clear_data() {
+            gml.destroyFeatures();
+        }
+        function new_data() {
+            if (!check_zoom()) { return; }
+            clear_data();
+            gml.loaded = false;
+            gml.url = "http://www.openstreetmap.org/api/0.5/map?bbox=" + map.getExtent().toBBOX();
+            $("status").innerHTML = "Loading more data...";
+            gml.loadGML();
+        }
+        function style_osm_feature(feature) {
+            feature.style = OpenLayers.Util.extend({'fill':'black'}, OpenLayers.Feature.Vector.style['default']);
+            if (feature.attributes.highway == "motorway") {
+                feature.style.strokeColor = "blue";
+                feature.style.strokeWidth = 5;
+            } else if (feature.attributes.highway == "primary") {
+                feature.style.strokeColor = "red";
+            } else if (feature.attributes.highway == "secondary") {
+                feature.style.strokeColor = "orange";
+            } else if (feature.attributes.highway) {
+                feature.style.strokeColor = "black";
+            }   
+        }
+        function check_zoom() { 
+            var zoom = map.getZoom();
+            if (zoom >= 11) { return true; }
+            if (zoom >= 9) { return confirm("Loading this amount of data may slow your browser. Are you sure you want to do this?"); }
+            $("status").innerHTML = "Area too large. Zoom in to load data. (Current zoom level: "+ zoom + ". Must be at zoom 9+.)";
+            return false;
+        }    
+        function init(){
+            OpenLayers.ProxyHost = "proxy.cgi?url=";
+            OpenLayers.Feature.Vector.style['default'].strokeWidth = 4;
+            OpenLayers.Feature.Vector.style['default'].cursor = 'pointer';
+            map = new OpenLayers.Map('map', {'maxResolution': 360/512/16, 'numZoomLevels':15, controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar() ]});
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.Permalink());
+            layer = new OpenLayers.Layer.WMS( "OSM", 
+               [
+                 "http://t1.hypercube.telascience.org/tiles?",
+                 "http://t2.hypercube.telascience.org/tiles?",
+                 "http://t3.hypercube.telascience.org/tiles?",
+                 "http://t4.hypercube.telascience.org/tiles?"
+                 ], 
+                {layers: 'osm-4326', format: 'image/png' } );
+            map.addLayer(layer);
+            if (!map.getCenter()) { 
+                gml = new OpenLayers.Layer.GML("OSM", "osm/sutton_coldfield.osm", {format: OpenLayers.Format.OSM});
+                map.zoomToExtent(new OpenLayers.Bounds(-1.819072,52.549034,-1.814341,52.551582));
+            } else {
+                if (map.getZoom() >= 11) {
+                    gml = new OpenLayers.Layer.GML("OSM", "http://www.openstreetmap.org/api/0.5/map?bbox=" + map.getExtent().toBBOX(), {format: OpenLayers.Format.OSM});
+                } else {
+                    gml = new OpenLayers.Layer.GML("OSM", "xml/cambridgeport.osm", {format: OpenLayers.Format.OSM});
+                }    
+            }    
+            gml.events.register("loadstart", null, function() { $("status").innerHTML = "Loading..."; })
+            gml.events.register("loadend", null, function() { $("status").innerHTML = ""; })
+            map.addLayer(gml);
+            gml.preFeatureInsert = style_osm_feature; 
+            var sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
+            map.addControl(sf);
+            sf.activate();
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Advanced OSM Layer</h1>
+    <div id="map" class="smallmap"></div>
+    <div id="download">
+      <ul>
+       <li><a href="javascript:new_data();">Download current view</a></li>
+       <li><a href="javascript:clear_data();">Clear current data</a></li>
+       <li><a href="javascript:export_vectors();">Export Vector Data</a></li>
+      </ul>
+    <div id="status">Loading...</div>
+    </div>
+    <a id="vectorlink" href="" style="display:none">Display via data: URL (FF Only)</a>
+    <textarea id="vectors" style="display:none;width:100%" rows="10"></textarea>
+  </body>
+</html>

examples/osm/sutton_coldfield.osm

@@ -0,0 +1,662 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<osm version="0.5" generator="OpenStreetMap server">
+  <node id="200545" lat="52.5503033" lon="-1.8166417" user="blackadder" visible="true" timestamp="2006-03-22T16:33:41+00:00"/>
+  <node id="200546" lat="52.5501965" lon="-1.8168261" user="blackadder" visible="true" timestamp="2006-03-22T16:33:43+00:00"/>
+  <node id="200547" lat="52.5501645" lon="-1.8169929" user="blackadder" visible="true" timestamp="2006-03-22T16:33:45+00:00"/>
+  <node id="200548" lat="52.5501805" lon="-1.8172475" user="blackadder" visible="true" timestamp="2006-03-22T16:33:47+00:00"/>
+  <node id="200549" lat="52.5502392" lon="-1.8175372" user="blackadder" visible="true" timestamp="2006-03-22T16:33:50+00:00"/>
+  <node id="200627" lat="52.5499115" lon="-1.8161012" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200628" lat="52.5497408" lon="-1.81586" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200752" lat="52.5505598" lon="-1.8140051" user="blackadder" visible="true" timestamp="2006-03-22T16:36:20+00:00"/>
+  <node id="200758" lat="52.5501087" lon="-1.8142773" user="blackadder" visible="true" timestamp="2006-03-22T16:36:32+00:00"/>
+  <node id="645729" lat="52.5504008" lon="-1.8169154" user="blackadder" visible="true" timestamp="2006-07-24T23:21:42+01:00">
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="ref" v="B72 1162"/>
+    <tag k="amenity" v="post_box"/>
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653121" lat="52.5506073" lon="-1.8137881" user="blackadder" visible="true" timestamp="2006-03-25T18:08:29+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783468" lat="52.5506446" lon="-1.8141177" user="blackadder" visible="true" timestamp="2007-05-30T14:22:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783470" lat="52.5501275" lon="-1.8151451" user="blackadder" visible="true" timestamp="2007-05-30T14:22:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783471" lat="52.5505521" lon="-1.8157703" user="blackadder" visible="true" timestamp="2007-12-18T15:33:59+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783472" lat="52.5501836" lon="-1.8164007" user="blackadder" visible="true" timestamp="2007-12-18T15:33:59+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783473" lat="52.5506035" lon="-1.8170311" user="blackadder" visible="true" timestamp="2007-05-30T14:21:32+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783474" lat="52.5509559" lon="-1.8164092" user="blackadder" visible="true" timestamp="2007-05-30T14:21:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783571" lat="52.5506331" lon="-1.813672" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175922968" lat="52.5508635" lon="-1.8167837" user="blackadder" visible="true" timestamp="2007-12-18T16:12:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175922970" lat="52.5507591" lon="-1.8169628" user="blackadder" visible="true" timestamp="2007-12-17T23:10:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923086" lat="52.5506787" lon="-1.8175799" user="blackadder" visible="true" timestamp="2007-12-17T23:10:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923089" lat="52.5505886" lon="-1.8177227" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128255" lat="52.5504144" lon="-1.8171548" user="blackadder" visible="true" timestamp="2007-12-18T16:12:52+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128257" lat="52.5506497" lon="-1.8175392" user="blackadder" visible="true" timestamp="2007-12-18T16:12:52+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128259" lat="52.550557" lon="-1.8176871" user="blackadder" visible="true" timestamp="2007-12-18T16:12:52+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128262" lat="52.5503122" lon="-1.8173195" user="blackadder" visible="true" timestamp="2007-12-18T16:12:52+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128265" lat="52.5499209" lon="-1.8164147" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128266" lat="52.550178" lon="-1.8175708" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128268" lat="52.550066" lon="-1.8176374" user="blackadder" visible="true" timestamp="2007-12-19T17:06:34+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128270" lat="52.5498069" lon="-1.8164854" user="blackadder" visible="true" timestamp="2007-12-19T17:06:34+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128273" lat="52.5498629" lon="-1.8162923" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128275" lat="52.5497909" lon="-1.8164134" user="blackadder" visible="true" timestamp="2007-12-19T17:06:34+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128278" lat="52.5502519" lon="-1.8173348" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128280" lat="52.5504396" lon="-1.817036" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128281" lat="52.5503051" lon="-1.816799" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128283" lat="52.5502337" lon="-1.8169643" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128286" lat="52.5503168" lon="-1.8170397" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="amenity" v="parking"/>
+  </node>
+  <node id="177177218" lat="52.5501201" lon="-1.8175441" user="blackadder" visible="true" timestamp="2007-12-18T16:53:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="ref" v="28"/>
+    <tag k="building" v="residential"/>
+  </node>
+  <node id="177177220" lat="52.5498859" lon="-1.8164918" user="blackadder" visible="true" timestamp="2007-12-18T16:53:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="ref" v="2"/>
+    <tag k="building" v="residential"/>
+  </node>
+  <node id="177177222" lat="52.5498106" lon="-1.8162993" user="blackadder" visible="true" timestamp="2007-12-18T16:53:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="ref" v="160"/>
+    <tag k="building" v="residential"/>
+  </node>
+  <node id="177230961" lat="52.550392" lon="-1.8172751" user="blackadder" visible="true" timestamp="2007-12-18T16:53:44+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="ref" v="158"/>
+    <tag k="building" v="residential"/>
+  </node>
+  <node id="177230963" lat="52.5501893" lon="-1.8162725" user="blackadder" visible="true" timestamp="2007-12-18T16:53:44+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230965" lat="52.5502522" lon="-1.8161638" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230968" lat="52.5498311" lon="-1.8155709" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231022" lat="52.5497724" lon="-1.8156875" user="blackadder" visible="true" timestamp="2007-12-18T16:53:47+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231024" lat="52.5501922" lon="-1.8161729" user="blackadder" visible="true" timestamp="2007-12-18T16:53:47+00:00">
+    <tag k="created_by" v="JOSM"/>
+    <tag k="ref" v="145"/>
+    <tag k="building" v="residential"/>
+  </node>
+  <node id="200551" lat="52.5520062" lon="-1.8172738" user="blackadder" visible="true" timestamp="2006-03-22T16:33:54+00:00"/>
+  <node id="200552" lat="52.5520649" lon="-1.8171246" user="blackadder" visible="true" timestamp="2006-03-22T16:33:55+00:00"/>
+  <node id="200553" lat="52.5520008" lon="-1.8172124" user="blackadder" visible="true" timestamp="2006-03-22T16:33:59+00:00"/>
+  <node id="200554" lat="52.5517927" lon="-1.8169666" user="blackadder" visible="true" timestamp="2006-03-22T16:34:01+00:00"/>
+  <node id="200555" lat="52.5517499" lon="-1.8168788" user="blackadder" visible="true" timestamp="2006-03-22T16:34:03+00:00"/>
+  <node id="200556" lat="52.5517248" lon="-1.8167286" user="blackadder" visible="true" timestamp="2007-11-22T17:33:33+00:00"/>
+  <node id="200557" lat="52.5518792" lon="-1.8163956" user="blackadder" visible="true" timestamp="2007-11-22T17:33:33+00:00"/>
+  <node id="200558" lat="52.5519665" lon="-1.8163705" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200562" lat="52.5519848" lon="-1.815281" user="blackadder" visible="true" timestamp="2006-03-22T16:34:21+00:00"/>
+  <node id="200573" lat="52.5520736" lon="-1.8145054" user="blackadder" visible="true" timestamp="2006-03-22T16:34:49+00:00"/>
+  <node id="200751" lat="52.5511951" lon="-1.8142246" user="blackadder" visible="true" timestamp="2006-03-22T16:36:18+00:00"/>
+  <node id="29783476" lat="52.5513103" lon="-1.8169385" user="blackadder" visible="true" timestamp="2007-05-30T14:21:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783477" lat="52.5517893" lon="-1.8159626" user="blackadder" visible="true" timestamp="2007-05-30T14:21:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783478" lat="52.5518461" lon="-1.8145067" user="blackadder" visible="true" timestamp="2007-05-30T14:21:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783479" lat="52.5511883" lon="-1.8143197" user="blackadder" visible="true" timestamp="2007-05-30T14:21:33+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="200511" lat="52.5558034" lon="-1.8267378" user="blackadder" visible="true" timestamp="2006-03-22T16:32:25+00:00"/>
+  <node id="200512" lat="52.5550357" lon="-1.8249151" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200513" lat="52.5553343" lon="-1.8257585" user="blackadder" visible="true" timestamp="2006-03-22T16:32:28+00:00"/>
+  <node id="200514" lat="52.5546308" lon="-1.8238934" user="blackadder" visible="true" timestamp="2006-03-22T16:32:30+00:00"/>
+  <node id="200515" lat="52.5544693" lon="-1.823135" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200517" lat="52.5545308" lon="-1.8235208" user="blackadder" visible="true" timestamp="2006-03-22T16:32:37+00:00"/>
+  <node id="200526" lat="52.5543989" lon="-1.8225501" user="blackadder" visible="true" timestamp="2006-03-22T16:33:02+00:00"/>
+  <node id="200527" lat="52.5543241" lon="-1.8221902" user="blackadder" visible="true" timestamp="2006-03-22T16:33:05+00:00"/>
+  <node id="200528" lat="52.5542654" lon="-1.8219444" user="blackadder" visible="true" timestamp="2006-03-22T16:33:07+00:00"/>
+  <node id="200530" lat="52.5541587" lon="-1.8216547" user="blackadder" visible="true" timestamp="2006-03-22T16:33:11+00:00"/>
+  <node id="200532" lat="52.5538918" lon="-1.821163" user="blackadder" visible="true" timestamp="2006-03-22T16:33:15+00:00"/>
+  <node id="200533" lat="52.5536782" lon="-1.8208031" user="blackadder" visible="true" timestamp="2006-03-22T16:33:17+00:00"/>
+  <node id="200534" lat="52.5534108" lon="-1.8204187" user="blackadder" visible="true" timestamp="2006-03-22T16:33:19+00:00"/>
+  <node id="200535" lat="52.5530804" lon="-1.8200481" user="blackadder" visible="true" timestamp="2006-03-22T16:33:21+00:00"/>
+  <node id="200536" lat="52.5527228" lon="-1.8197232" user="blackadder" visible="true" timestamp="2006-03-22T16:33:23+00:00"/>
+  <node id="200537" lat="52.5525413" lon="-1.8195652" user="blackadder" visible="true" timestamp="2006-03-22T16:33:25+00:00"/>
+  <node id="200539" lat="52.5522844" lon="-1.8193896" user="blackadder" visible="true" timestamp="2006-03-22T16:33:29+00:00"/>
+  <node id="200540" lat="52.5519374" lon="-1.8190999" user="blackadder" visible="true" timestamp="2006-03-22T16:33:31+00:00"/>
+  <node id="200541" lat="52.5521848" lon="-1.8193018" user="blackadder" visible="true" timestamp="2007-12-17T23:11:03+00:00"/>
+  <node id="200542" lat="52.5516186" lon="-1.8186947" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200543" lat="52.5517933" lon="-1.8189419" user="blackadder" visible="true" timestamp="2006-03-22T16:33:37+00:00"/>
+  <node id="200544" lat="52.5513983" lon="-1.8183449" user="blackadder" visible="true" timestamp="2006-03-22T16:33:39+00:00"/>
+  <node id="200550" lat="52.5519976" lon="-1.8179888" user="blackadder" visible="true" timestamp="2007-11-22T17:33:33+00:00"/>
+  <node id="200559" lat="52.5523069" lon="-1.816393" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200560" lat="52.5523905" lon="-1.8163169" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200561" lat="52.552524" lon="-1.8159306" user="blackadder" visible="true" timestamp="2006-03-22T21:55:12+00:00"/>
+  <node id="200563" lat="52.5526121" lon="-1.8152809" user="blackadder" visible="true" timestamp="2006-03-22T16:34:24+00:00"/>
+  <node id="200564" lat="52.5526358" lon="-1.8149766" user="blackadder" visible="true" timestamp="2007-11-22T17:33:34+00:00"/>
+  <node id="200565" lat="52.5526654" lon="-1.8146664" user="blackadder" visible="true" timestamp="2006-03-22T16:34:29+00:00"/>
+  <node id="200566" lat="52.5525937" lon="-1.8156438" user="blackadder" visible="true" timestamp="2006-03-22T16:34:31+00:00"/>
+  <node id="200571" lat="52.5535575" lon="-1.8148566" user="blackadder" visible="true" timestamp="2007-11-15T12:54:40+00:00"/>
+  <node id="200572" lat="52.5523885" lon="-1.8145932" user="blackadder" visible="true" timestamp="2006-03-22T16:34:46+00:00"/>
+  <node id="200629" lat="52.5495701" lon="-1.8156789" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200630" lat="52.5493694" lon="-1.815524" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200631" lat="52.5490781" lon="-1.8153587" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200632" lat="52.5488293" lon="-1.815287" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200633" lat="52.5485269" lon="-1.8153192" user="blackadder" visible="true" timestamp="2007-11-22T17:33:32+00:00"/>
+  <node id="200650" lat="52.5482109" lon="-1.815399" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200651" lat="52.5478984" lon="-1.8153867" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200652" lat="52.5474767" lon="-1.8152603" user="blackadder" visible="true" timestamp="2007-11-22T17:33:31+00:00"/>
+  <node id="200653" lat="52.5468312" lon="-1.8150679" user="blackadder" visible="true" timestamp="2007-11-22T17:33:29+00:00"/>
+  <node id="200753" lat="52.5496876" lon="-1.8136891" user="blackadder" visible="true" timestamp="2006-03-22T21:55:13+00:00"/>
+  <node id="200754" lat="52.549009" lon="-1.8133906" user="blackadder" visible="true" timestamp="2006-03-22T16:36:24+00:00"/>
+  <node id="200755" lat="52.5478879" lon="-1.8128287" user="blackadder" visible="true" timestamp="2006-03-22T16:36:26+00:00"/>
+  <node id="200756" lat="52.548993" lon="-1.8134871" user="blackadder" visible="true" timestamp="2006-03-22T16:36:28+00:00"/>
+  <node id="200757" lat="52.5490304" lon="-1.8135925" user="blackadder" visible="true" timestamp="2006-03-22T16:36:31+00:00"/>
+  <node id="200759" lat="52.5464722" lon="-1.8119684" user="blackadder" visible="true" timestamp="2006-03-22T16:36:34+00:00"/>
+  <node id="200771" lat="52.5466312" lon="-1.8121126" user="blackadder" visible="true" timestamp="2006-03-22T16:37:02+00:00"/>
+  <node id="653117" lat="52.5423754" lon="-1.8078749" user="blackadder" visible="true" timestamp="2007-11-26T18:40:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653118" lat="52.5465842" lon="-1.81179" user="blackadder" visible="true" timestamp="2006-03-25T18:08:29+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653119" lat="52.5444001" lon="-1.8100834" user="blackadder" visible="true" timestamp="2006-03-25T18:08:29+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653120" lat="52.5490713" lon="-1.8131664" user="blackadder" visible="true" timestamp="2006-03-25T18:08:29+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653122" lat="52.5526798" lon="-1.814402" user="blackadder" visible="true" timestamp="2006-03-25T18:08:29+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="653123" lat="52.5536564" lon="-1.814631" user="blackadder" visible="true" timestamp="2007-11-15T12:54:42+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783564" lat="52.5538289" lon="-1.8145536" user="blackadder" visible="true" timestamp="2007-11-15T12:53:07+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783565" lat="52.5539485" lon="-1.8128538" user="blackadder" visible="true" timestamp="2007-11-15T12:53:07+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783566" lat="52.5509299" lon="-1.8119156" user="blackadder" visible="true" timestamp="2007-05-30T14:25:10+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783567" lat="52.5470281" lon="-1.8097771" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783568" lat="52.5465979" lon="-1.811457" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783569" lat="52.5466086" lon="-1.8115118" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783570" lat="52.5491153" lon="-1.8130205" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="29783572" lat="52.5527014" lon="-1.8142812" user="blackadder" visible="true" timestamp="2007-05-30T14:25:11+01:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="135352210" lat="52.5549423" lon="-1.814954" user="blackadder" visible="true" timestamp="2007-11-26T18:37:58+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175922965" lat="52.551783" lon="-1.8181591" user="blackadder" visible="true" timestamp="2007-12-18T16:12:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175922972" lat="52.5516751" lon="-1.8183582" user="blackadder" visible="true" timestamp="2007-12-17T23:10:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923064" lat="52.5542375" lon="-1.8222046" user="blackadder" visible="true" timestamp="2007-12-18T15:34:00+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923066" lat="52.5540618" lon="-1.8217823" user="blackadder" visible="true" timestamp="2007-12-17T23:10:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923068" lat="52.5537913" lon="-1.8213338" user="blackadder" visible="true" timestamp="2007-12-17T23:10:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923070" lat="52.5529993" lon="-1.8203219" user="blackadder" visible="true" timestamp="2007-12-17T23:10:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923072" lat="52.5521418" lon="-1.8195539" user="blackadder" visible="true" timestamp="2007-12-17T23:10:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923077" lat="52.5517862" lon="-1.8192228" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923081" lat="52.55152" lon="-1.8188757" user="blackadder" visible="true" timestamp="2007-12-17T23:10:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923083" lat="52.5510247" lon="-1.8181078" user="blackadder" visible="true" timestamp="2007-12-17T23:10:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923092" lat="52.5514479" lon="-1.8190434" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923093" lat="52.5517434" lon="-1.8194353" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923094" lat="52.5529379" lon="-1.8205018" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923095" lat="52.5537161" lon="-1.8214889" user="blackadder" visible="true" timestamp="2007-12-18T16:12:51+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923096" lat="52.5539755" lon="-1.8218808" user="blackadder" visible="true" timestamp="2007-12-18T16:12:50+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="175923099" lat="52.5541405" lon="-1.8222767" user="blackadder" visible="true" timestamp="2007-12-18T15:34:00+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177081428" lat="52.5552884" lon="-1.8256253" user="blackadder" visible="true" timestamp="2007-12-18T15:01:16+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177081440" lat="52.5551147" lon="-1.825166" user="blackadder" visible="true" timestamp="2007-12-18T15:01:17+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128288" lat="52.5496708" lon="-1.816009" user="blackadder" visible="true" timestamp="2007-12-18T15:33:55+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128291" lat="52.5494958" lon="-1.8157939" user="blackadder" visible="true" timestamp="2007-12-18T15:33:56+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128294" lat="52.5492862" lon="-1.8156326" user="blackadder" visible="true" timestamp="2007-12-18T15:33:56+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128297" lat="52.5490612" lon="-1.8155156" user="blackadder" visible="true" timestamp="2007-12-18T15:33:56+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128299" lat="52.5488284" lon="-1.8154808" user="blackadder" visible="true" timestamp="2007-12-18T15:33:56+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128301" lat="52.5488246" lon="-1.8156477" user="blackadder" visible="true" timestamp="2007-12-19T17:06:33+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128303" lat="52.5490573" lon="-1.8156698" user="blackadder" visible="true" timestamp="2007-12-19T17:06:33+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128306" lat="52.5492802" lon="-1.8157959" user="blackadder" visible="true" timestamp="2007-12-19T17:06:33+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128308" lat="52.5494967" lon="-1.8159735" user="blackadder" visible="true" timestamp="2007-12-19T17:06:33+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177128310" lat="52.549613" lon="-1.8161509" user="blackadder" visible="true" timestamp="2007-12-19T17:06:33+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230972" lat="52.5496355" lon="-1.8153859" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230975" lat="52.5494398" lon="-1.8152371" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230979" lat="52.5492418" lon="-1.8151165" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230981" lat="52.5490437" lon="-1.8150441" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230983" lat="52.5488114" lon="-1.8149878" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230985" lat="52.5485375" lon="-1.815024" user="blackadder" visible="true" timestamp="2007-12-18T16:53:45+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230988" lat="52.5481977" lon="-1.8150843" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230989" lat="52.5480118" lon="-1.8150884" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177230996" lat="52.5480143" lon="-1.8152371" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231000" lat="52.5482099" lon="-1.8152331" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231003" lat="52.5485498" lon="-1.8151567" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231007" lat="52.5488212" lon="-1.8151246" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231010" lat="52.5490364" lon="-1.8151728" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231014" lat="52.5492393" lon="-1.8152452" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231016" lat="52.5494081" lon="-1.8153618" user="blackadder" visible="true" timestamp="2007-12-18T16:53:46+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231019" lat="52.5495915" lon="-1.8155106" user="blackadder" visible="true" timestamp="2007-12-18T16:53:47+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <node id="177231081" lat="52.5555213" lon="-1.8261466" user="blackadder" visible="true" timestamp="2007-12-18T16:53:49+00:00">
+    <tag k="created_by" v="JOSM"/>
+  </node>
+  <way id="35" visible="true" timestamp="2007-09-18T02:37:16+01:00" user="crschmidt">
+    <nd ref="200542"/>
+    <nd ref="200550"/>
+    <nd ref="200551"/>
+    <nd ref="200553"/>
+    <tag k="note" v="fire access route"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="highway" v="footway"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="surface" v="paved"/>
+  </way>
+  <way id="37" visible="true" timestamp="2007-12-18T16:53:51+00:00" user="blackadder">
+    <nd ref="200511"/>
+    <nd ref="177231081"/>
+    <nd ref="200513"/>
+    <nd ref="177081428"/>
+    <nd ref="177081440"/>
+    <nd ref="200512"/>
+    <nd ref="200514"/>
+    <nd ref="200517"/>
+    <nd ref="200515"/>
+    <nd ref="200526"/>
+    <nd ref="200527"/>
+    <nd ref="200528"/>
+    <nd ref="200530"/>
+    <nd ref="200532"/>
+    <nd ref="200533"/>
+    <nd ref="200534"/>
+    <nd ref="200535"/>
+    <nd ref="200536"/>
+    <nd ref="200537"/>
+    <nd ref="200539"/>
+    <nd ref="200541"/>
+    <nd ref="200540"/>
+    <nd ref="200543"/>
+    <nd ref="200542"/>
+    <nd ref="200544"/>
+    <nd ref="200545"/>
+    <nd ref="200627"/>
+    <nd ref="200628"/>
+    <nd ref="200629"/>
+    <nd ref="200630"/>
+    <nd ref="200631"/>
+    <nd ref="200632"/>
+    <nd ref="200633"/>
+    <nd ref="200650"/>
+    <nd ref="200651"/>
+    <nd ref="200652"/>
+    <nd ref="200653"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="name" v="Maney Hill Road"/>
+    <tag k="abutters" v="residential"/>
+    <tag k="highway" v="residential"/>
+  </way>
+  <way id="54" visible="true" timestamp="2006-03-29T09:51:45+01:00" user="blackadder">
+    <nd ref="200545"/>
+    <nd ref="200546"/>
+    <nd ref="200547"/>
+    <nd ref="200548"/>
+    <nd ref="200549"/>
+    <tag k="name" v="Mottrams Close"/>
+    <tag k="abutters" v="residential"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="highway" v="residential"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="created_by" v="JOSM"/>
+  </way>
+  <way id="55" visible="true" timestamp="2006-03-22T21:55:16+00:00" user="blackadder">
+    <nd ref="200758"/>
+    <nd ref="200757"/>
+    <nd ref="200756"/>
+    <nd ref="200754"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="highway" v="residential"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="name" v="East View Road"/>
+    <tag k="created_by" v="JOSM"/>
+  </way>
+  <way id="57" visible="true" timestamp="2007-09-26T14:35:13+01:00" user="blackadder">
+    <nd ref="200571"/>
+    <nd ref="200565"/>
+    <nd ref="200572"/>
+    <nd ref="200573"/>
+    <nd ref="200751"/>
+    <nd ref="200752"/>
+    <nd ref="200753"/>
+    <nd ref="200754"/>
+    <nd ref="200755"/>
+    <nd ref="200771"/>
+    <nd ref="200759"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="name" v="East View Road"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="highway" v="unclassified"/>
+  </way>
+  <way id="395" visible="true" timestamp="2007-12-19T17:50:08+00:00" user="blackadder">
+    <nd ref="200552"/>
+    <nd ref="200553"/>
+    <nd ref="200554"/>
+    <nd ref="200555"/>
+    <nd ref="200556"/>
+    <nd ref="200557"/>
+    <nd ref="200558"/>
+    <nd ref="200559"/>
+    <nd ref="200560"/>
+    <nd ref="200561"/>
+    <nd ref="200566"/>
+    <nd ref="200563"/>
+    <nd ref="200564"/>
+    <nd ref="200565"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="name" v="Shooters Hill"/>
+    <tag k="abutters" v="residential"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="highway" v="residential"/>
+  </way>
+  <way id="418" visible="true" timestamp="2006-03-25T11:39:32+00:00" user="blackadder">
+    <nd ref="200562"/>
+    <nd ref="200563"/>
+    <tag k="place_name" v="Sutton Coldfield"/>
+    <tag k="highway" v="residential"/>
+    <tag k="postal_code" v="B72"/>
+    <tag k="abutters" v="residential"/>
+    <tag k="name" v="Corncrake Close"/>
+    <tag k="created_by" v="JOSM"/>
+  </way>
+  <way id="4685537" visible="true" timestamp="2007-05-30T14:21:35+01:00" user="blackadder">
+    <nd ref="29783472"/>
+    <nd ref="29783473"/>
+    <nd ref="29783474"/>
+    <nd ref="29783476"/>
+    <nd ref="29783477"/>
+    <nd ref="29783478"/>
+    <nd ref="29783479"/>
+    <nd ref="29783468"/>
+    <nd ref="29783470"/>
+    <nd ref="29783471"/>
+    <nd ref="29783472"/>
+    <tag k="name" v="Maney Hill School"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="landuse" v="school"/>
+    <tag k="amenity" v="school"/>
+  </way>
+  <way id="4685542" visible="true" timestamp="2007-05-30T14:25:15+01:00" user="blackadder">
+    <nd ref="29783570"/>
+    <nd ref="29783571"/>
+    <nd ref="29783572"/>
+    <nd ref="29783564"/>
+    <nd ref="29783565"/>
+    <nd ref="29783566"/>
+    <nd ref="29783567"/>
+    <nd ref="29783568"/>
+    <nd ref="29783569"/>
+    <nd ref="29783570"/>
+    <tag k="landuse" v="school"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="amenity" v="school"/>
+  </way>
+  <way id="14166897" visible="true" timestamp="2007-11-26T18:40:45+00:00" user="blackadder">
+    <nd ref="135352210"/>
+    <nd ref="653123"/>
+    <nd ref="653122"/>
+    <nd ref="653121"/>
+    <nd ref="653120"/>
+    <nd ref="653118"/>
+    <nd ref="653119"/>
+    <nd ref="653117"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="name" v="Freight Line"/>
+    <tag k="railway" v="rail"/>
+  </way>
+  <way id="16966783" visible="true" timestamp="2007-12-17T23:11:00+00:00" user="blackadder">
+    <nd ref="175922965"/>
+    <nd ref="175922968"/>
+    <nd ref="175922970"/>
+    <nd ref="175922972"/>
+    <nd ref="175922965"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+  <way id="16966792" visible="true" timestamp="2007-12-17T23:11:01+00:00" user="blackadder">
+    <nd ref="175923064"/>
+    <nd ref="175923066"/>
+    <nd ref="175923068"/>
+    <nd ref="175923070"/>
+    <nd ref="175923072"/>
+    <nd ref="175923077"/>
+    <nd ref="175923081"/>
+    <nd ref="175923083"/>
+    <nd ref="175923086"/>
+    <nd ref="175923089"/>
+    <nd ref="175923092"/>
+    <nd ref="175923093"/>
+    <nd ref="175923094"/>
+    <nd ref="175923095"/>
+    <nd ref="175923096"/>
+    <nd ref="175923099"/>
+    <nd ref="175923064"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+  <way id="17060325" visible="true" timestamp="2007-12-18T15:37:01+00:00" user="blackadder">
+    <nd ref="177128255"/>
+    <nd ref="177128262"/>
+    <nd ref="177128259"/>
+    <nd ref="177128257"/>
+    <nd ref="177128255"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+  <way id="17060326" visible="true" timestamp="2007-12-18T15:37:01+00:00" user="blackadder">
+    <nd ref="177128265"/>
+    <nd ref="177128270"/>
+    <nd ref="177128268"/>
+    <nd ref="177128266"/>
+    <nd ref="177128265"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+  <way id="17060327" visible="true" timestamp="2007-12-18T15:37:01+00:00" user="blackadder">
+    <nd ref="177128275"/>
+    <nd ref="177128273"/>
+    <nd ref="177128288"/>
+    <nd ref="177128291"/>
+    <nd ref="177128294"/>
+    <nd ref="177128297"/>
+    <nd ref="177128299"/>
+    <nd ref="177128301"/>
+    <nd ref="177128303"/>
+    <nd ref="177128306"/>
+    <nd ref="177128308"/>
+    <nd ref="177128310"/>
+    <nd ref="177128275"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+  <way id="17060329" visible="true" timestamp="2007-12-18T15:33:58+00:00" user="blackadder">
+    <nd ref="177128278"/>
+    <nd ref="177128280"/>
+    <nd ref="177128281"/>
+    <nd ref="177128283"/>
+    <nd ref="177128278"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="amenity" v="parking"/>
+  </way>
+  <way id="17067452" visible="true" timestamp="2007-12-18T16:53:49+00:00" user="blackadder">
+    <nd ref="177230963"/>
+    <nd ref="177230965"/>
+    <nd ref="177230968"/>
+    <nd ref="177230972"/>
+    <nd ref="177230975"/>
+    <nd ref="177230979"/>
+    <nd ref="177230981"/>
+    <nd ref="177230983"/>
+    <nd ref="177230985"/>
+    <nd ref="177230988"/>
+    <nd ref="177230989"/>
+    <nd ref="177230996"/>
+    <nd ref="177231000"/>
+    <nd ref="177231003"/>
+    <nd ref="177231007"/>
+    <nd ref="177231010"/>
+    <nd ref="177231014"/>
+    <nd ref="177231016"/>
+    <nd ref="177231019"/>
+    <nd ref="177231022"/>
+    <nd ref="177230963"/>
+    <tag k="created_by" v="JOSM"/>
+    <tag k="building" v="residential"/>
+  </way>
+</osm>

examples/outOfRangeMarkers.html

@@ -1,10 +1,11 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <style type="text/css">
+    <title>Using maxResolution to control overlays</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style>
         #map {
-            width: 650px;
-            height: 550px;
-            border: 1px solid black;
+            height: 350px;
         }
     </style>
       <!-- this gmaps key generated for http://openlayers.org/dev/ -->
@@ -18,17 +19,17 @@
         function init(){
             
             // Variables
-            map = new OpenLayers.Map('map', { controls: [] });
+            map = new OpenLayers.Map('map', {
+                controls: [
+                    new OpenLayers.Control.PanZoomBar(),
+                    new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+                    new OpenLayers.Control.MousePosition(),
+                    new OpenLayers.Control.Navigation()
+                ]
+            });
             var lon = 35;
             var lat = -6;
             var zoom = 6;
-            var map, layer;
-
-            // Map Controls
-            map.addControl(new OpenLayers.Control.PanZoomBar());
-            map.addControl(new OpenLayers.Control.MouseToolbar());
-            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
-            map.addControl(new OpenLayers.Control.MousePosition());
 
 
             // Map Layers
@@ -40,7 +41,6 @@
             // Add Layers
             map.addLayers([GMapsHybr, GMapsStreets, GMapsSat, MarkersLayer2]);            
 
-
             // Visual
             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
             if (!map.getCenter()) map.zoomToMaxExtent();
@@ -50,8 +50,12 @@
 
 
  <body onload="init()">
-
-    <div id="map"></div>
+    <h3 id="title">Using maxResolution to control overlays</h3>
+    <p id="shortdesc">
+      See how to control the maximum resolution for a markers layer, 
+      causing it to not be displayed beyond a certain point.
+    </p>  
+    <div id="map" class="smallmap"></div>
 
   </body>
 </html>

examples/overviewmap.html

@@ -1,47 +1,105 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>Overview Map Example</title>
-<script src="../lib/OpenLayers.js" type="text/javascript"></script>
-<style>
-#map{
-    width:100%; 
-    height:500px;
-    border:1px solid;
-}
-</style>
-</head>
-<body>
-  <div id="map"></div>
+<html>
+    <head>
+        <title>Overview Map 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" type="text/javascript"></script>
+        <style>
+        #map1 {
+            width: 500px; 
+            height: 300px;
+            border: 1px solid gray;
+        }
+        #map2 {
+            width: 500px; 
+            height: 300px;
+            border: 1px solid gray;
+        }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Overview Map</h1>
+
+        <div id="tags">
+        </div>
+        <p id="shortdesc">
+            Enable a small Overview Map that moves/interacts with your main map.
+        </p>
+        <div id="map1"></div>
+        <p>The above map has an overview map control that is created with
+        the default options.  Much like a regular map, the map contained by
+        the overview map control defaults to a geographic projection.</p>
+        <div id="map2"></div>
+        <p>The second map has an overview map control that is created with
+        non-default options.  In this case, the mapOptions property of the
+        control has been set to use non-default projection related properties.
+        In addition, any other properties of the overview map control can be
+        set in this way.</p>
         <script defer="defer" type="text/javascript">
-    var map = new OpenLayers.Map('map');
-    // my city
-    var constantina = new OpenLayers.LonLat(-5.6165,37.8623);
-    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-        "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
-    var nasa_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic", 
-        "http://wms.jpl.nasa.gov/wms.cgi", {layers: "modis,global_mosaic"} );
         
-    map.addLayers([    
-        nasa_wms,
-        wms
-    ]);
+        // create the top map (with default overview map control)
+        var map1 = new OpenLayers.Map('map1');
         
-    map.addControl(new OpenLayers.Control.LayerSwitcher());
+        var ol = new OpenLayers.Layer.WMS(
+            "OpenLayers WMS", 
+            "http://labs.metacarta.com/wms/vmap0",
+            {layers: 'basic'}
+        );
         
-    var options = {
-      layers: [wms.clone()],
-      minRatio: 8,
-      maxRatio: 128
+        var jpl = new OpenLayers.Layer.WMS(
+            "NASA Global Mosaic", 
+            "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
+            {layers: "landsat7"}
+        );
+        
+        map1.addLayers([ol, jpl]);
+        map1.addControl(new OpenLayers.Control.LayerSwitcher());
+        
+        // create an overview map control with the default options
+        var overview1 = new OpenLayers.Control.OverviewMap();
+        map1.addControl(overview1);
+        
+        map1.setCenter(new OpenLayers.LonLat(0, 0), 2);
+        
+        // expand the overview map control
+        overview1.maximizeControl();
+        
+        
+        // create the bottom map (with advanced overview map control)
+        var mapOptions = {
+            maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), 
+            maxResolution: 296985/1024,
+            projection: "EPSG:2805",
+            units: "m"
         };
-    var overview = new OpenLayers.Control.OverviewMap(options);
 
-    map.addControl(overview);
+        var map2 = new OpenLayers.Map('map2', mapOptions);
         
-    map.setCenter(constantina, 4);
+        var bos = new OpenLayers.Layer.WMS(
+            "Boston", 
+            "http://boston.freemap.in/cgi-bin/mapserv",
+            {
+                map: '/www/freemap.in/boston/map/gmaps.map', 
+                layers: 'border,water,roads,rapid_transit,buildings', 
+                format: 'png'
+            }
+        );
+        
+        map2.addLayers([bos]);
+        map2.addControl(new OpenLayers.Control.LayerSwitcher());
+        
+        // create an overview map control with non-default options
+        var controlOptions = {
+            mapOptions: mapOptions
+        }
+        var overview2 = new OpenLayers.Control.OverviewMap(controlOptions);
+        map2.addControl(overview2);
+        
+        map2.setCenter(new OpenLayers.LonLat(182500, 868500), 3);
+        
+        // expand the overview map control
+        overview2.maximizeControl();
 
-    overview.maximizeControl();    
         </script>
-</body>
+    </body>
 </html>

examples/pan-zoom-panels.html

@@ -0,0 +1,56 @@
+<html>
+<head>
+    <title>Pan and Zoom Panels</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+
+    <!-- 
+      -- Special stylesheet inclusion for ie6, which doesn't handle the alpha 
+      -- channel of images correctly. The special ie6 stylesheet will only 
+      -- be included if the browser running is ie6. For now, the only thing it
+      -- does is load alternative, non-alpha pngs for the zoom/pan panels.
+      -->
+
+    <!--[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 type="text/javascript" src="../lib/OpenLayers.js"></script>
+    <script>
+    var map;
+    var lon = 5;
+    var lat = 40;
+    var zoom = 5;
+    function init(){
+        map = new OpenLayers.Map("map", {
+            controls: [
+                new OpenLayers.Control.Navigation(),
+                new OpenLayers.Control.PanPanel(),
+                new OpenLayers.Control.ZoomPanel()
+            ]
+        });
+        
+        var wms = new OpenLayers.Layer.WMS(
+            "OpenLayers WMS",
+            "http://labs.metacarta.com/wms/vmap0",
+            {layers: 'basic'}
+        );
+        map.addLayers([wms]);
+        
+        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+    }
+    </script>
+</head>
+<body onload='init();'>
+    <h1 id="title">Pan and Zoom Panels</h1>
+    <div id="tags"></div>
+    <p id="shortdesc">Customizable pan and zoom panels</p>
+    </p>
+    <div id="map" class="smallmap"></div>
+    <p id="docs">
+        The pan and zoom panels allow you to use CSS styling to change the
+        look and feel of the panels, including changing their position
+        and their icons without needing to change any code.
+    </p>   
+</body>
+</html>

examples/panel.html

@@ -1,11 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
         .olControlPanel div { 
           display:block;
           width:  24px;
@@ -51,8 +48,8 @@
         }
         
     </style>
+    <script src="../lib/Firebug/firebug.js"></script>
     <script src="../lib/OpenLayers.js"></script>
-    <script src="../lib/Firebug/debug.js"></script>
     <script type="text/javascript">
         var lon = 5;
         var lat = 40;
@@ -69,13 +66,16 @@
             map.addLayer(vlayer);
             
             
-            zb = new OpenLayers.Control.ZoomBox();
+            zb = new OpenLayers.Control.ZoomBox(
+                {title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."});
             var panel = new OpenLayers.Control.Panel({defaultControl: zb});
             panel.addControls([
-                new OpenLayers.Control.MouseDefaults(),
+                new OpenLayers.Control.MouseDefaults(
+                    {title:'You can use the default mouse configuration'}), 
                 zb,
-                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path),
-                new OpenLayers.Control.ZoomToMaxExtent()
+                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
+                    {title:'Draw a feature'}),
+                new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"}) 
             ]);
             map.addControl(panel);
 
@@ -84,7 +84,12 @@
     </script>
   </head>
   <body onload="init()">
+    <h3 id="title">Custom Control.Panel</h3>
+    <p id="shortdesc">
+      Create a custom control.panel, styled entirely with
+      CSS, and add your own controls to it.
+    </p>  
     <div id="panel"></div>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>