Tagging the x.y rcZ Release

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

apidoc_config/Menu.txt

@@ -69,7 +69,7 @@ Group: OpenLayers  {
       File: Control  (no auto-title, OpenLayers/Control.js)
       File: ArgParser  (no auto-title, OpenLayers/Control/ArgParser.js)
       File: Attribution  (no auto-title, OpenLayers/Control/Attribution.js)
-      File: Control.Button  (no auto-title, OpenLayers/Control/Button.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)
@@ -104,6 +104,14 @@ Group: OpenLayers  {
       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)
+      }  # Group: Filter
+
    Group: Format  {
 
       File: Format  (no auto-title, OpenLayers/Format.js)
@@ -113,10 +121,18 @@ Group: OpenLayers  {
       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: SLD  (no auto-title, OpenLayers/Format/SLD.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
+
       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: WMC  {
 
@@ -126,7 +142,6 @@ Group: OpenLayers  {
          File: v1_1_0  (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
          }  # Group: WMC
 
-      File: XML  (no auto-title, OpenLayers/Format/XML.js)
       }  # Group: Format
 
    Group: Geometry  {
@@ -142,7 +157,6 @@ 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  {
@@ -166,6 +180,7 @@ Group: OpenLayers  {
    Group: Lang  {
 
       File: Lang  (no auto-title, OpenLayers/Lang.js)
+      File: Lang["cs-CZ"]  (OpenLayers/Lang/cs-CZ.js)
       File: Lang["de"]  (no auto-title, OpenLayers/Lang/de.js)
       File: Lang["en"]  (no auto-title, OpenLayers/Lang/en.js)
       File: Lang["en-CA"]  (no auto-title, OpenLayers/Lang/en-CA.js)
@@ -217,6 +232,8 @@ Group: OpenLayers  {
       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  (OpenLayers/Popup/Framed.js)
+      File: FramedCloud  (OpenLayers/Popup/FramedCloud.js)
       }  # Group: Popup
 
    File: Projection  (no auto-title, OpenLayers/Projection.js)
@@ -229,14 +246,7 @@ Group: OpenLayers  {
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 
-   Group: Rule  {
-
-      File: Rule  (no auto-title, OpenLayers/Rule.js)
-      File: Comparison  (no auto-title, OpenLayers/Rule/Comparison.js)
-      File: FeatureId  (no auto-title, OpenLayers/Rule/FeatureId.js)
-      File: Logical  (no auto-title, OpenLayers/Rule/Logical.js)
-      }  # Group: Rule
-
+   File: Rule  (no auto-title, OpenLayers/Rule.js)
    File: Style  (no auto-title, OpenLayers/Style.js)
    File: StyleMap  (no auto-title, OpenLayers/StyleMap.js)
 

build/README.txt

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

build/full.cfg

@@ -13,7 +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/cs-CZ.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,9 +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/cs-CZ.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

@@ -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,10 +19,5 @@ OpenLayers/Tile.js
 OpenLayers/Tile/Image.js
 
 [exclude]
-Firebug/firebug.js
-Firebug/firebugx.js
-OpenLayers/Lang/de.js
-OpenLayers/Lang/en-CA.js
-OpenLayers/Lang/fr.js
-OpenLayers/Lang/cs-CZ.js
+
 

doc/Jugl.js

@@ -1,74 +0,0 @@
-/**
- * Jugl.js -- JavaScript Template Attribute Language
- * This code is not yet licensed for release or distribution.
- *
- * Copyright 2007 Tim Schaub
- */
-
-/**
- * Contains portions of OpenLayers.js -- OpenLayers Map Viewer Library
- *
- * Copyright 2005-2006 MetaCarta, Inc., released under a modified BSD license.
- * Please see http://svn.openlayers.org/trunk/openlayers/repository-license.txt
- * for the full text of the license.
- */
-
-/**
- * Contains portions of Prototype.js:
- *
- * Prototype JavaScript framework, version 1.4.0
- *  (c) 2005 Sam Stephenson <sam@conio.net>
- *
- *  Prototype is freely distributable under the terms of an MIT-style license.
- *  For details, see the Prototype web site: http://prototype.conio.net/
- */
-
-(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl={singleFile:true};window[uri]=Jugl;})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var singleFile=(typeof window[uri]=="object"&&window[uri].singleFile);var Jugl={prefix:"jugl",namespaceURI:"http://namespace.jugl.org/",scriptName:(!singleFile)?"lib/Jugl.js":"Jugl.js",getScriptLocation:function(){var scriptLocation="";var scriptName=Jugl.scriptName;var scripts=document.getElementsByTagName('script');for(var i=0;i<scripts.length;i++){var src=scripts[i].getAttribute('src');if(src){var index=src.lastIndexOf(scriptName);if((index>-1)&&(index+scriptName.length==src.length)){scriptLocation=src.slice(0,-scriptName.length);break;}}}
-return scriptLocation;}};if(!singleFile){var jsfiles=new Array("Jugl/Util.js","Jugl/Class.js","Jugl/Async.js","Jugl/Node.js","Jugl/Attribute.js","Jugl/Console.js","Jugl/Template.js");var allScriptTags="";var host=Jugl.getScriptLocation()+"lib/";for(var i=0;i<jsfiles.length;i++){if(/MSIE/.test(navigator.userAgent)||/Safari/.test(navigator.userAgent)){var currentScriptTag="<script src='"+host+jsfiles[i]+"'></script>";allScriptTags+=currentScriptTag;}else{var s=document.createElement("script");s.src=host+jsfiles[i];var h=document.getElementsByTagName("head").length?document.getElementsByTagName("head")[0]:document.body;h.appendChild(s);}}
-if(allScriptTags){document.write(allScriptTags);}}
-window[uri]=Jugl;})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Class=function(){var Class=function(){this.initialize.apply(this,arguments);}
-var extended={};var parent;for(var i=0;i<arguments.length;++i){if(typeof arguments[i]=="function"){parent=arguments[i].prototype;}else{parent=arguments[i];}
-Jugl.Util.extend(extended,parent);}
-Class.prototype=extended;return Class;};})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Util=new Object();Jugl.Util.extend=function(destination,source){for(property in source){destination[property]=source[property];}
-return destination;};Jugl.Util.indexOf=function(array,obj){for(var i=0;i<array.length;i++){if(array[i]==obj)return i;}
-return-1;};Jugl.Util.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);}};})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];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.Util.extend(Jugl.Console,console);break;}}}})();})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Attribute=Jugl.Class({node:null,element:null,type:null,nodeValue:null,template:null,initialize:function(node,element,type){this.node=node;this.element=element;this.type=type;this.nodeValue=element.nodeValue;this.nodeName=element.nodeName;this.template=node.template;},splitAttributeValue:function(value){value=(value!=null)?value:this.nodeValue;var matches=this.template.regExes.trimSpace.exec(value);var items;if(matches.length==3){items=[matches[1],matches[2]];}
-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.node.removeAttributeNode(this);},process:function(){return this.processAttribute[this.type].apply(this,[]);},evalInScope:function(str){var expression="with(this.node.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.node.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";message+="attribute: "+this.nodeName;Jugl.Console.error(message);Jugl.Console.dirxml(this.node.element);Jugl.Console.log(this.node.scope);}
-this.removeSelf();if(!proceed){this.node.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 node;var previousSibling=this.node;var length=list.length;for(var i=0;i<length;++i){node=this.node.clone();node.scope[key]=list[i];node.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(node);node.process();previousSibling=node;}
-this.node.removeSelf();return false;},"content":function(){var str;try{str=this.evalInScope(this.nodeValue);}catch(err){Jugl.Console.error("Failed to eval in node scope: "+
-this.nodeValue);throw err;}
-this.removeSelf();var child=new Jugl.Node(this.template,document.createTextNode(str));this.node.removeChildNodes();this.node.appendChild(child);return true;},"replace":function(){var str;try{str=this.evalInScope(this.nodeValue);}catch(err){Jugl.Console.error("Failed to eval in node scope: "+
-this.nodeValue);throw err;}
-this.removeSelf();var replacement=new Jugl.Node(this.template,document.createTextNode(str));this.node.insertBefore(replacement);this.node.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.node.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 node scope: "+
-this.nodeValue);throw err;}
-this.removeSelf();if(omit){var children=this.node.getChildNodes();var child;for(var i=0;i<children.length;++i){this.node.insertBefore(children[i]);}
-this.node.removeSelf();}}},CLASS_NAME:"Jugl.Attribute"});})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Template=Jugl.Class({element:null,usingNS:false,xhtmlns:"http://www.w3.org/1999/xhtml",xmldom:null,regExes:null,loaded:false,loading:false,initialize:function(element,options){if(typeof(element)=="string"){element=document.getElementById(element);}
-if(element){this.element=element;this.loaded=true;}
-this.regExes={trimSpace:(/^\s*(\w+)\s+(.*?)\s*$/)};if(window.ActiveXObject){this.xmldom=new ActiveXObject("Microsoft.XMLDOM");}},process:function(context,clone,toString){if(this.element.getAttributeNodeNS){if(this.element.getAttributeNodeNS(Jugl.xhtmlns,Jugl.prefix)){this.usingNS=true;}}
-var node=new Jugl.Node(this,this.element);if(clone){node=node.clone();}
-if(context){node.scope=context;}
-try{node.process();}catch(err){Jugl.Console.error("Failed to process "+
-this.element+" node");}
-var data;if(toString){if(node.element.innerHTML){data=node.element.innerHTML;}else{if(this.xmldom){data=node.element.xml;}else{var serializer=new XMLSerializer();data=serializer.serializeToString(node.element);}}}else{data=node.element;}
-return data;},load:function(url){this.loading=true;var setElement=function(request){var doc=request.responseXML;this.element=doc.documentElement;this.loading=false;this.loaded=true;this.onLoad();}
-Jugl.Async.loadUrl(url,setElement,this);},onLoad:function(){},CLASS_NAME:"Jugl.Template"});})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Node=Jugl.Class({template:null,element:null,scope:null,initialize:function(template,element){this.template=template;this.element=element;this.scope=new Object();this.scope.repeat=new Object();},clone:function(){var element=this.element.cloneNode(true);var node=new Jugl.Node(this.template,element);Jugl.Util.extend(node.scope,this.scope);return node;},getAttribute:function(localName){var element;if(this.element.nodeType==1){if(this.template.usingNS){element=this.element.getAttributeNodeNS(Jugl.namespaceURI,localName);}else{element=this.element.getAttributeNode(Jugl.prefix+":"+
-localName);}
-if(element&&!element.specified){element=false;}}
-var attribute;if(element){attribute=new Jugl.Attribute(this,element,localName);}else{attribute=element;}
-return attribute;},setAttribute:function(name,value){this.element.setAttribute(name,value);},removeAttributeNode:function(attribute){this.element.removeAttributeNode(attribute.element);},getChildNodes:function(){var children=[];var node,scope;for(var i=0;i<this.element.childNodes.length;++i){node=new Jugl.Node(this.template,this.element.childNodes[i]);node.scope=Jugl.Util.extend({},this.scope);children.push(node);}
-return children;},removeChildNodes:function(){while(this.element.hasChildNodes()){this.element.removeChild(this.element.firstChild);}},removeChild:function(node){this.element.removeChild(node.element);return node;},removeSelf:function(){this.element.parentNode.removeChild(this.element);},appendChild:function(node){this.element.appendChild(node.element);},insertAfter:function(node){var parent=this.element.parentNode;var sibling=this.element.nextSibling;if(sibling){parent.insertBefore(node.element,sibling);}else{parent.appendChild(node.element);}},insertBefore:function(node){var parent=this.element.parentNode;parent.insertBefore(node.element,this.element);},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;}}},processChildNodes:function(){var element,child;var children=this.getChildNodes();for(var i=0;i<children.length;++i){try{children[i].process();}catch(err){Jugl.Console.error("Failed to process "+
-children[i]+" node");throw err;}}},CLASS_NAME:"Jugl.Node"});})();(function(){var uri="http://jugl.tschaub.net/trunk/lib/Jugl.js";var Jugl=window[uri];Jugl.Async={loadTemplate:function(url,onComplete,caller){var createTemplate=function(request){var doc=request.responseXML;var template=new Jugl.Template(doc.documentElement);var complete=Jugl.Util.bind(onComplete,caller);complete(template);}
-Jugl.Async.loadUrl(url,createTemplate);},loadUrl:function(url,onComplete,caller){var complete=(caller)?Jugl.Util.bind(onComplete,caller):onComplete;var request=Jugl.Async.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");}}};})();

doc/authors.txt

@@ -22,11 +22,14 @@ 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
 

doc/examples.html

@@ -1,55 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
-<html>
-    <head>
-        <title>OL Docs</title>
-        <style type="text/css">
-            html, body {margin: 0;padding: 0.5em 1em;font: 0.9em Verdana, Arial, sans serif;}
-            .exampleContainer{width:90%; padding:5px; border-bottom:1px solid grey; }
-            .exampleNumber{display:inline; font-weight:bold; color:#333; }
-            .exampleTitle{display:inline; font-weight:bold; color:#333; }
-            .exampleName{display:inline; color:#333; }
-            .exampleDescription{color:#222; padding:3px; font-size:1.2em; }
-            .exampleClasses{font-size:.7em; color:grey;display:none;}
-        </style>
-        <script type="text/javascript" src="./Jugl.js"></script>
-        <script type="text/javascript" src="examples.js"></script>
-        <script type="text/javascript">
-            // import
-            var uri = "http://jugl.tschaub.net/trunk/lib/Jugl.js";
-            var Jugl = window[uri];
-            // this part does the actual template processing
-            window.onload = function() {
-                var template = new Jugl.Template("basic");
-                template.process();
-            }
-        </script>
-    </head>
-    <body>
-        <div id="basic" style="margin: 0 auto;">
-            <div class="exampleContainer" jugl:repeat="example examples">
-                <div class="exampleNumber" jugl:content="repeat.example.number">
-                    Example # goes here
-                </div>
-                <div class="exampleTitle" jugl:content="example.title">
-                    Title goes here
-                </div>
-                <div class="exampleName">
-                    <a jugl:content="example.example"
-                     jugl:attributes="href example.link">
-                    Example Filename and Link
-                    </a>
-                </div>
-                <div class="exampleDescription">
-                    <span jugl:content="example.shortdesc">
-                    Short Description goes here
-                    </span>
-                </div>
-                <div class="exampleClasses" >
-                    <span jugl:content="example.classes">
-                    Related Classes go here
-                    </span>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>

doc_config/Menu.txt

@@ -69,7 +69,7 @@ Group: OpenLayers  {
       File: Control  (no auto-title, OpenLayers/Control.js)
       File: ArgParser  (no auto-title, OpenLayers/Control/ArgParser.js)
       File: Attribution  (no auto-title, OpenLayers/Control/Attribution.js)
-      File: Control.Button  (no auto-title, OpenLayers/Control/Button.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)
@@ -104,6 +104,14 @@ Group: OpenLayers  {
       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)
+      }  # Group: Filter
+
    Group: Format  {
 
       File: Format  (no auto-title, OpenLayers/Format.js)
@@ -113,10 +121,18 @@ Group: OpenLayers  {
       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: SLD  (no auto-title, OpenLayers/Format/SLD.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
+
       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: WMC  {
 
@@ -126,7 +142,6 @@ Group: OpenLayers  {
          File: v1_1_0  (no auto-title, OpenLayers/Format/WMC/v1_1_0.js)
          }  # Group: WMC
 
-      File: XML  (no auto-title, OpenLayers/Format/XML.js)
       }  # Group: Format
 
    Group: Geometry  {
@@ -142,7 +157,6 @@ 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  {
@@ -166,6 +180,7 @@ Group: OpenLayers  {
    Group: Lang  {
 
       File: Lang  (no auto-title, OpenLayers/Lang.js)
+      File: Lang["cs-CZ"]  (OpenLayers/Lang/cs-CZ.js)
       File: Lang["de"]  (no auto-title, OpenLayers/Lang/de.js)
       File: Lang["en"]  (no auto-title, OpenLayers/Lang/en.js)
       File: Lang["en-CA"]  (no auto-title, OpenLayers/Lang/en-CA.js)
@@ -217,6 +232,8 @@ Group: OpenLayers  {
       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  (OpenLayers/Popup/Framed.js)
+      File: FramedCloud  (OpenLayers/Popup/FramedCloud.js)
       }  # Group: Popup
 
    File: Projection  (no auto-title, OpenLayers/Projection.js)
@@ -229,14 +246,7 @@ Group: OpenLayers  {
       File: VML  (no auto-title, OpenLayers/Renderer/VML.js)
       }  # Group: Renderer
 
-   Group: Rule  {
-
-      File: Rule  (no auto-title, OpenLayers/Rule.js)
-      File: Comparison  (no auto-title, OpenLayers/Rule/Comparison.js)
-      File: FeatureId  (no auto-title, OpenLayers/Rule/FeatureId.js)
-      File: Logical  (no auto-title, OpenLayers/Rule/Logical.js)
-      }  # Group: Rule
-
+   File: Rule  (no auto-title, OpenLayers/Rule.js)
    File: Style  (no auto-title, OpenLayers/Style.js)
    File: StyleMap  (no auto-title, OpenLayers/StyleMap.js)
 

examples/GMLParser.html

@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-      <title>OpenLayers GML Parser</title>
+    <title>OpenLayers GML Parser</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         function parseData(req) {

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,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <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) {

examples/accessible.html

@@ -2,13 +2,8 @@
     <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: 512px;
-                border: 1px solid #eee;
-            }
             table {
                 border: 1 px solid white;
                 padding: 0;
@@ -90,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">

examples/animated_panning.html

@@ -2,18 +2,7 @@
   <head>
     <title>Animated Panning of the Map via map.panTo</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid black;
-        }
-        #map2 {
-            width: 512px;
-            height: 256px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer, running = false;
@@ -86,7 +75,7 @@
     <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"></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
@@ -94,7 +83,7 @@
         </p>
     </div>
     <button onclick="setCenterInterval()">Start/stop random recenter</button>
-     <div id="map2"></div>
+    <div id="map2" class="smallmap"></div>
     <div>    
     <p>To turn off Animated Panning, create a map with an panMethod set to
         null. </p>

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

@@ -2,15 +2,9 @@
     <head>
         <title>OpenLayers Attribution Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
+
         <script type="text/javascript">
             var map;
             function init(){
@@ -20,11 +14,15 @@
                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
                     {'attribution': 'Provided by <a href="http://labs.metacarta.com/">MetaCarta</a>'});
 
-            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
-                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"},{attribution:"Provided by Telascience"});
+                var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
+                    "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);
@@ -36,18 +34,21 @@
         <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"></div>
+        <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.
+            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

@@ -3,13 +3,8 @@
         <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: 512;
-                height: 512px;
-                border: 1px solid black;
-                background-color: blue;
-            }
             #controls
             {
                 width: 512px;
@@ -21,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">
@@ -89,7 +84,7 @@
         </p>
 
         <div id="controls">
-            <div id="map"></div>
+            <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>

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

@@ -2,13 +2,7 @@
     <head>
         <title>OpenLayers Boxes Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var box_extents = [
@@ -53,7 +47,7 @@
             Demonstrate marker and box type annotations on a map.
         </p>
         
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs"></div>
     </body>

examples/boxes.html

@@ -2,13 +2,7 @@
     <head>
         <title>OpenLayers Boxes Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var box_extents = [
@@ -52,7 +46,7 @@
             Demonstrate marker and box type annotations on a map.
         </p>
         
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs"></div>
     </body>

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

@@ -2,13 +2,7 @@
     <head>
         <title>OpenLayers Buffer Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var lon = 0;
@@ -45,7 +39,7 @@
             This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs">
             Use the buffer property to control how many tiles are included

examples/click-handler.html

@@ -3,6 +3,7 @@
         <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;
@@ -161,7 +162,7 @@
                 This example shows the use of the click handler.
             </p>
     
-            <div id="map"></div>
+            <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

examples/click.html

@@ -3,16 +3,10 @@
         <title>OpenLayers Click Event Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <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, {                
+            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                 defaultHandlerOptions: {
                     'single': true,
                     'double': false,
@@ -30,7 +24,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                     ); 
                     this.handler = new OpenLayers.Handler.Click(
                         this, {
-                            'click': this.trigger,
+                            'click': this.trigger
                         }, this.handlerOptions
                     );
                 }, 
@@ -39,7 +33,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                     var lonlat = map.getLonLatFromViewPortPx(e.xy);
                     alert("You clicked near " + lonlat.lat + " N, " +
                                               + lonlat.lon + " E");
-                },
+                }
 
             });
             var map;
@@ -78,7 +72,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
 
         </p>
 
-        <div id="map"></div>
+        <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. 

examples/controls.html

@@ -3,28 +3,27 @@
         <title>OpenLayers Map Controls Example</title>
 
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <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.ScaleLine());
-                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",
@@ -57,7 +56,7 @@
         </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>

examples/custom-control-point.html

@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-      <title>OpenLayers Custom Control Point Examle</title>
+    <title>OpenLayers Custom Control Point Examle</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -54,7 +48,7 @@
           Demonstrate the addition of a point reporting control to the OpenLayers window.
       </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <div id="bounds"></div>
 
     <div id="docs"></div>

examples/custom-control.html

@@ -2,13 +2,7 @@
     <head>
         <title>Custom Control Example</title>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var lon = 5;
@@ -58,7 +52,7 @@
             Demonstrate the addition of a draggable rectangle to the OpenLayers window.
         </p>
       
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs"></div>
     </body>

examples/custom-style.html

@@ -3,12 +3,8 @@
         <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: 512px;
-                height: 512px;
-                border: 1px solid gray;
-            }
             p {
                 width: 500px;
             }
@@ -47,7 +43,7 @@
             Demonstrate changing CSS styles on controls in the OpenLayers window.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs">
            <p>If you care to modify the style of any OpenLayers element, include

examples/debug.html

@@ -3,7 +3,7 @@
 <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">

examples/doubleSetCenter.html

@@ -4,12 +4,7 @@
        
         <script src="../lib/OpenLayers.js"></script>
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width:512px;
-                height:521px;
-            }
-        </style>
+        <link rel="stylesheet" href="style.css" type="text/css" />
     </head>
     <body>
         <h1 id="title">Double Set Center Example</h1>
@@ -20,7 +15,7 @@
             Demonstrate the behavior of two calls to set the center after instatiating the layer object.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
     
         <script defer="defer" type="text/javascript">
             var map = new OpenLayers.Map('map');

examples/drag-feature.html

@@ -3,12 +3,8 @@
         <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: 512px;
-                border: 1px solid gray;
-            }
             #controls {
                 width: 512px;
             }
@@ -72,7 +68,7 @@
             Demonstrates point, line and polygon creation and editing.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
         
         <div id="controls">
             <ul id="controlToggle">

examples/draw-feature.html

@@ -3,12 +3,8 @@
         <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: 512px;
-                border: 1px solid gray;
-            }
             #controlToggle li {
                 list-style: none;
             }
@@ -74,7 +70,7 @@
             Demonstrate on-screen digitizing tools for point, line, and polygon creation.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
     
         <ul id="controlToggle">
             <li>

examples/editingtoolbar-outside.html

@@ -2,6 +2,7 @@
 <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;
@@ -9,11 +10,6 @@
             height: 30px; 
             width: 150px;
         }
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid gray;
-        }
     </style>
     <script src="../lib/Firebug/firebug.js"></script>
     <script src="../lib/OpenLayers.js"></script>
@@ -45,8 +41,11 @@
     </script>
   </head>
   <body onload="init()">
-    <h3>OpenLayers EditingToolbar Outside Viewport</h3>
-    <div id="map"></div>
+    <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

@@ -4,13 +4,7 @@
         <title>OpenLayers Editing Toolbar Example</title>
         
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 512px;
-                border: 1px solid black;
-            }
-        </style>
+        <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">
@@ -20,15 +14,17 @@
             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);
             }
@@ -44,7 +40,7 @@
         </p>
 
         <div id="panel"></div>
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
 
         <div id="docs"></div>
     </body>

examples/events.html

@@ -1,12 +1,8 @@
 <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">
-            #map {
-                width: 512px;
-                height: 256px;
-                border: 1px solid gray;
-            }
             #panel {
                 margin: 5px;
                 height: 30px; 
@@ -146,7 +142,7 @@
             Demonstrating various styles of event handling in OpenLayers.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
         <div id="panel"></div>
         <textarea id="output"></textarea>
         <div id="docs"></div>

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

@@ -2,13 +2,7 @@
   <head>
     <title>OpenLayers Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <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
@@ -17,79 +11,46 @@
 
         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 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",
+            var jpl_wms = new OpenLayers.Layer.WMS(
+                "NASA Global Mosaic",
                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
-                {layers: "landsat7"}, options2);
+                {layers: "landsat7"}
+            );
 
-            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," +
-                         "prov_bound,fedlimit,rail,road,popplace",
-                 transparent: "true", format: "image/png"},
-                 {minResolution: 0.17578125,
-                  maxResolution: 0.703125});
+                {
+                    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;">OpenLayers Example</h1>
-    <h3 id="browserHeader" style="display:inline;"></h3>
-
+    <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"></div>
-
+    <div id="map" class="smallmap"></div>
     <div id="docs"></div>
   </body>
 </html>

examples/fractional-zoom.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid gray;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -51,7 +45,7 @@
             Shows the use of a map with fractional (or non-discrete) zoom levels.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
         <input type="checkbox" name="fractional"
                id="fractional" checked="checked" onclick="update(this)" />
         <label for="fractional">Fractional Zoom</label>

examples/fullScreen.html

@@ -1,19 +1,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
-        <title>Full Screen Example</title>
-        
+        <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: 0px;
-                left:0px;
+                bottom: 1em;
+                left: 1em;
                 width: 512px;
             }
         </style>

examples/fullScreen2.html

@@ -1,52 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <title>Full Screen Example 2</title>
-        
-        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-                border: 1px solid black;
-            }
-        </style>
-        <script src="../lib/OpenLayers.js"></script>
-        <script type="text/javascript">
-            var map;
-            function init(){
-                map = new OpenLayers.Map('map');
-
-                var options = {numZoomLevels: 3};
-
-                var docImage = new OpenLayers.Layer.Image(
-                    'Full Screen',
-                    'fullscreen.jpg',
-                    new OpenLayers.Bounds(-156, -90, 156, 90),
-                    new OpenLayers.Size(1121, 650),
-                    options);
-
-                map.addLayers([docImage]);
-                // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-                map.zoomToMaxExtent();
-            }
-        </script>
-    </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

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -62,6 +56,7 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="map"></div>
+    <h1 id="title">GeoJSON Example</h1>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/georss-flickr.html

@@ -1,13 +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: 400px;
-            border: 1px solid black;
-        }
-        
         .olPopupContent {
             font-size: smaller;
         }
@@ -31,28 +26,48 @@
             // the thumbail attribute of the rss item
             style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
             
-            // make the thumbnails larger when we select them
-            selectStyle = new OpenLayers.Style({pointRadius: 35});
-            
             // create a rule with a point symbolizer that will make the thumbnail
-            // larger if the title of the rss item conatins "powder"
-            var rule = new OpenLayers.Rule.Comparison({
-                    type: OpenLayers.Rule.Comparison.LIKE,
+            // 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*",
-                    symbolizer: {"Point": {pointRadius: 30}}});
-            rule.value2regex("*");
+                    value: "*powder*"
+                })
+            });
+            rule.filter.value2regex("*");
             
             // If the above rule does not apply, use a smaller pointRadius.
             var elseRule = new OpenLayers.Rule({
-                    elseFilter: true,
-                    symbolizer: {"Point": {pointRadius: 20}}});
+                elseFilter: true,
+                symbolizer: {pointRadius: 20}
+            });
             
             style.addRules([rule, elseRule]);
             
-            markerLayer = new OpenLayers.Layer.Vector("", {styleMap: new OpenLayers.StyleMap({
-                "default": style,
-                "select": selectStyle})});
+            // 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
@@ -74,36 +89,12 @@
             map.addControl(popupControl);
             
             popupControl.activate();
-            
-            OpenLayers.loadURL("xml/georss-flickr.xml", null, window, afterload);
-            
-        }
-        
-        function afterload(req) {
-            // extended version of OpenLayers.Format.GeoRSS.createFeatureFromItem;
-            // adds the thumbnail attribute to the feature
-            function createFeatureFromItem(item) {
-                var feature = OpenLayers.Format.GeoRSS.prototype
-                        .createFeatureFromItem.apply(this, arguments);
-                feature.attributes.thumbnail =
-                        this.getElementsByTagNameNS(
-                        item, "*", "thumbnail")[0].getAttribute("url");
-                return feature;
-            }
-
-            var store = new OpenLayers.Format.GeoRSS({
-                    createFeatureFromItem: createFeatureFromItem});
-
-            rss = store.read(req.responseText);
-
-            markerLayer.setName("Some images from Flickr");
-            markerLayer.addFeatures(rss);
         }
     </script>
   </head>
   <body onload="init()">
-    <h1>GeoRSS from Flickr in OpenLayers</h1>
+    <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"></div>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/georss-markers.html

@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-      <title>OpenLayers GeoRSS Marker Example</title>
+    <title>OpenLayers GeoRSS Marker Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -38,7 +32,7 @@
         Demonstrate loading a GeoRSS feed using the GeoRSS parser.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs"></div>
   </body>

examples/georss-serialize.html

@@ -1,58 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-      <title>OpenLayers GeoRSS Serialize Example</title>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            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 id="title">Draw Point Example</h1>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Demonstrate serialization of features in a Vector layer to GeoRSS.
-    </p>
-
-    <div style="float:right;width:50%">
-        <textarea id="gml" style="width:100%" rows="30"></textarea>
-    </div>
-
-    <div id="map"></div>
-
-    <div id="docs"></div>
-  </body>
-</html>

examples/georss.html

@@ -1,14 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-      <title>OpenLayers GeoRSS Example</title>
+    <title>OpenLayers GeoRSS Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -41,7 +35,7 @@
         Display a couple of locally cached georss feeds on an a basemap.
     </p>
 
-    <div id="map"></div>
+    <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

examples/getfeatureinfo.html

@@ -3,6 +3,7 @@
     <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>
@@ -24,7 +25,7 @@
         <div id="nodeList">
         </div>
     </div>
-      <div id="map" style="width:512px; height:512px"></div>
+      <div id="map" class="smallmap"></div>
 
   <script defer="defer" type="text/javascript">
     OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";

examples/gml-layer.html

@@ -2,13 +2,7 @@
   <head>
       <title>OpenLayers GML Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -35,7 +29,7 @@
           Loads locally stored GML vector data on a basemap. Includes GML example file.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs"></div>
   </body>

examples/gml-serialize.html

@@ -1,97 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-      <title>OpenLayers GML Serialization Example</title>
-    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <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 id="title">GML Serialization Example</h1>
-
-    <div id="tags"></div>
-
-    <p id="shortdesc">
-        Demonstrate the serialization of features drawn in the OpenLayers window.
-    </p>
-
-    <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>
-
-    <div id="docs"></div>
-  </body>
-</html>

examples/google-reproject.html

@@ -2,14 +2,7 @@
   <head>
     <title>OpenLayers Google with Overlay Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
-
+    <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>
@@ -38,7 +31,6 @@
 
             map.setCenter(new OpenLayers.LonLat(10.205188,48.857593), 5);
             map.addControl( new OpenLayers.Control.LayerSwitcher() );
-            map.addControl( new OpenLayers.Control.PanZoomBar() );
         }
     </script>
   </head>
@@ -51,7 +43,7 @@
         Demonstrate a Google basemap used with boundary overlay layer.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs">
         An overlay in a Geographic projection can be stretched to somewhat

examples/google.html

@@ -2,14 +2,7 @@
   <head>
     <title>OpenLayers Google Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
-
+    <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>
@@ -52,7 +45,7 @@
         Demonstrate use of the various types of Google layers.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs">
         For best performance, you must be using a version of the Google Maps

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

@@ -2,12 +2,8 @@
   <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: 521px;
-            height: 512px;
-            border: 1px solid gray;
-        }
         p.caption {
             width: 512px;
         }
@@ -43,7 +39,7 @@
         Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs">
         <p class="caption">

examples/hover-handler.html

@@ -2,7 +2,7 @@
     <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;
@@ -149,7 +149,7 @@
                 This example shows the use of the hover handler.
             </p>
     
-            <div id="map"></div>
+            <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

examples/image-layer.html

@@ -2,15 +2,11 @@
   <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: 512px;
-            border: 1px solid gray;
-        }
     </style>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
@@ -46,10 +42,10 @@
         Demonstrate a single non-tiled image as a selectable base layer.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs">
-        <p>
+        <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.

examples/intersects.html

@@ -2,6 +2,7 @@
   <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;
@@ -159,8 +160,11 @@
   </head>
   <body onload="init()">
     <div id="leftcol">
-        <h2>OpenLayers Geometry Intersection Example</h2>
-        <div id="map"></div>
+        <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();" />

examples/kamap.html

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

examples/kml-layer.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -41,7 +35,7 @@
           Demonstrates loading and displaying a KML file on top of a basemap.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs"></div>
   </body>

examples/layer-opacity.html

@@ -2,15 +2,11 @@
   <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: 512px;
-            border: 1px solid lightgray;
-        }
         p {
             width: 512px;
         }
@@ -49,23 +45,20 @@
         }
         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>
@@ -78,7 +71,7 @@
         Demonstrate a change in the opacity for an overlay layer.
     </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
 
     <div id="docs">
         <p>

examples/layerLoadMonitoring.html

@@ -1,13 +1,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-      <title>OpenLayers Layer Load Monitoring Example</title>
+    <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 {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
         #controls {
             float: left;
             text-align: right;

examples/layerswitcher.html

@@ -2,13 +2,7 @@
   <head>
       <title>OpenLayers Layer Switcher Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -50,8 +44,8 @@
         Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
     </p>
 
-    <div id="layerswitcher" style="float:right; width: 20em;"></div>
-    <div id="map"></div>
+    <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

@@ -2,13 +2,7 @@
   <head>
     <title>OpenLayers Basic Single WMS Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -29,7 +23,7 @@
 
     <div id="shortdesc">Show a Simple Map</div>
 
-    <div id="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.

examples/mapguide.html

@@ -1,5 +1,8 @@
 <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;
@@ -18,14 +21,24 @@
     <script type="text/javascript">
     
         var map, layer;
-        var url = "http://demo01.dmsolutions.ca/mapguide/mapagent/mapagent.fcgi";
+        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(){
         
-            OpenLayers.DOTS_PER_INCH = 96;
             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 = {
@@ -52,7 +65,6 @@
         //un-tiled version
         function initUntiled() {
         
-          OpenLayers.DOTS_PER_INCH = 96;
           var extent = new OpenLayers.Bounds(-87.865114442365922,43.665065564837931,-87.595394059497067,43.823852564430069);
           var mapOptions = {
                 maxExtent: extent, 
@@ -94,6 +106,14 @@
             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);
@@ -103,8 +123,17 @@
     </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"></div>
+    <div id="map" class="smallmap"></div>
     <div id="map2"></div>
   </body>
 </html>

examples/mapserver.html

@@ -2,13 +2,7 @@
   <head>
     <title>MapServer Layer</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -33,7 +27,7 @@
     <div id="title">MapServer Layer</div>
     <div id="tags"></div>
     <div id="shortdesc">Shows MapServer Layer</div>
-    <div id="map"></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>

examples/mapserver_untiled.html

@@ -2,6 +2,7 @@
   <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%;
@@ -26,7 +27,7 @@
     <div id="title">MapServer Single Tile Mode</div>
     <div id="tags"></div>
     <div id="shortdesc">Shows single tile MapServer Layer</div>
-    <div id="map"></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>

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

@@ -2,13 +2,7 @@
   <head>
     <title>Resize a Marker</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -48,7 +42,7 @@
     <div id="title">Resize a Marker</div>
     <div id="tags"></div>
     <div id="shortdesc">Dynamically resize a marker</div>
-    <div id="map"></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>

examples/markers.html

@@ -2,13 +2,7 @@
   <head>
     <title>Markers Layer Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -51,7 +45,7 @@
     <div id="title">Markers Layer Example</div>
     <div id="tags"></div>
     <div id="shortdesc">Show markers layer with different markers</div>
-    <div id="map"></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>

examples/markersTextLayer.html

@@ -2,13 +2,7 @@
   <head>
     <title>Using a Layer.Text to display markers</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -35,6 +29,6 @@
       The Layer.Text class reads a Tab seperated values file and displays it as markers on
       the map.
     </p>  
-    <div id="map"></div>
+    <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

@@ -2,6 +2,7 @@
   <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%;
@@ -52,7 +53,7 @@
     <p id="shortdesc">
       An example of using the Layer.MultiMap class.
     </p>  
-    <div id="map"></div>
+    <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

@@ -2,12 +2,8 @@
   <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;
         }
@@ -33,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),
@@ -57,8 +47,7 @@
                 regular: new OpenLayers.Control.DrawFeature(vectors,
                             OpenLayers.Handler.RegularPolygon,
                             {handlerOptions: {sides: 5}}),
-                modify: new OpenLayers.Control.ModifyFeature(vectors,
-                                                             modifyOptions)
+                modify: new OpenLayers.Control.ModifyFeature(vectors)
             };
             
             for(var key in controls) {
@@ -112,7 +101,7 @@
   <body onload="init()">
     <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"></div>
+    <div id="map" class="smallmap"></div>
     <div id="controls">
         <ul id="controlToggle">
             <li>

examples/mouse-position.html

@@ -4,16 +4,7 @@
   <head>
     <title>MousePosition Control</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        #map {
-            width: 512px;
-            height: 256px;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -42,7 +33,7 @@
       Use the MousePosition Control to display the coordinates of the cursor
       inside or outside the map div.
     </p>  
-    <div id="map"></div>
+    <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

@@ -2,6 +2,7 @@
   <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%;
@@ -59,6 +60,6 @@
       multimap layer does not fully support the sphericalMercator projection at
       this time.
     </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/multiserver.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var lon = 5;
@@ -37,7 +31,7 @@
       Load your tiles faster by pointing to the same server, but with different urls
   </p>
 
-    <div id="map"></div>
+    <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>

examples/navigation-control.html

@@ -2,13 +2,7 @@
   <head>
     <title>OpenLayers Navigation Control</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 512px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -31,7 +25,7 @@
 
     <div id="shortdesc">Demonstrate Navigation Control features</div>
 
-    <div id="map"></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.

examples/navigation-history.html

@@ -1,12 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>OpenLayers Navigation History Example</title>
-        <style type="text/css">
-            #map {
-                width: 512px;
-                height: 256px;
-                border: 1px solid gray;
-            }
+        <link rel="stylesheet" href="style.css" type="text/css" />
+        <style>
             #panel {
                 right: 0px;
                 height: 30px; 
@@ -16,24 +12,12 @@
                 float: left;
                 margin: 5px;
             }
-                
         </style>
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, nav, panel;
 
-            // preload images if you care
-            var preload = [
-                "../theme/default/img/view_previous_on.png",
-                "../theme/default/img/view_next_on.png"
-            ];
-            var img = new Array(preload.length);
-            for(var i=0; i<preload.length; ++i) {
-                img[i] = new Image();
-                img[i].src = preload[i];
-            }
-            
-            function init(){
+            function init() {
                 map = new OpenLayers.Map('map');
 
                 nav = new OpenLayers.Control.NavigationHistory();
@@ -53,8 +37,6 @@
                 );
                 map.addLayer(layer);
                 map.zoomToMaxExtent();
-
-
             }
         </script>
     </head>
@@ -68,7 +50,7 @@
             A control for zooming to previous and next map extents.
         </p>
 
-        <div id="map"></div>
+        <div id="map" class="smallmap"></div>
         Map navigation history controls<div id="panel"></div>
         <div id="docs"></div>
     </body>

examples/navtoolbar-outsidemap.html

@@ -1,16 +1,13 @@
 <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; 
+            top: 10px; 
         }
         
     </style>
@@ -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,15 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 475px;
-            border: 1px solid black;
-            float:right;
-        }
-        
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <title>NavToolbar Demo</title>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
@@ -37,6 +29,6 @@
        Demo the NavToolbar, a subclass of Control.Panel which shows icons for
        navigation.
     </p> 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/notile.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #mapDiv {
-            width: 400px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -35,7 +29,7 @@
       Create an untiled WMS layer using the singleTile: true, option or the deprecated
       WMS.Untiled layer.
     </p>  
-    <div id="mapDiv"></div>
+    <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,16 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 600px;
-            height: 475px;
-            border: 1px solid black;
-        }
-        #info {
-            float: right;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer;
@@ -118,27 +109,8 @@
     </script>
   </head>
   <body onload="init()">
-    <div id="info">
-      <ul>
-        <li>Streams: Feature Count <span id="stream_features">0</span></li>
-        <li>Plat: Feature Count <span id="plat_features">0</span></li>
-        <li>Roads: Feature Count <span id="road_features">0</span></li>
-      </ul>
-      <div id="feature_info">
-      </div>
-      <ul>
-        <li>
-            <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
-            <label for="selectToggle">select road</label>
-        </li>
-        <li>
-            <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
-            <label for="selectToggle">select polygon</label>
-        </li>
-    </ul>
-    </div>
     <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
-    <div id="map"></div>
+    <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
@@ -158,5 +130,24 @@
             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>
+        <li>Plat: Feature Count <span id="plat_features">0</span></li>
+        <li>Roads: Feature Count <span id="road_features">0</span></li>
+      </ul>
+      <div id="feature_info">
+      </div>
+      <ul>
+        <li>
+            <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
+            <label for="selectToggle">select road</label>
+        </li>
+        <li>
+            <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
+            <label for="selectToggle">select polygon</label>
+        </li>
+    </ul>
+    </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

@@ -1,11 +1,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css" />
+    <style>
         #map {
-            width: 70%;
-            height: 475px;
-            border: 1px solid black;
+            height: 350px;
         }
     </style>
     <script src="../lib/OpenLayers.js"></script>
@@ -103,7 +102,9 @@
     </script>
   </head>
   <body onload="init()">
-    <div style="width:28%; float:right" id="download">
+    <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>
@@ -111,7 +112,6 @@
       </ul>
     <div id="status">Loading...</div>
     </div>
-    <div id="map"></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>

examples/outOfRangeMarkers.html

@@ -2,11 +2,10 @@
 <head>
     <title>Using maxResolution to control overlays</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style 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/ -->
@@ -20,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,8 +39,7 @@
             var MarkersLayer2 = new OpenLayers.Layer.Text( "Region info", {location: "outOfRangeMarkers.txt", maxResolution: 0.02});
 
             // Add Layers
-            map.addLayers([GMapsHybr, GMapsStreets, GMapsSat, MarkersLayer2]);
-            
+            map.addLayers([GMapsHybr, GMapsStreets, GMapsSat, MarkersLayer2]);            
 
             // Visual
             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
@@ -57,7 +55,7 @@
       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"></div>
+    <div id="map" class="smallmap"></div>
 
   </body>
 </html>

examples/overviewmap.html

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

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,12 +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;
@@ -94,6 +90,6 @@
       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>

examples/point-track-markers.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 800px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map, layer, rss, lineFeatures, popup;
@@ -57,13 +51,13 @@
     </script>
   </head>
   <body onload="init()">
-    <h1>GeoRSS PointTrack in OpenLayers</h1>
+    <h1 id="title">GeoRSS PointTrack in OpenLayers</h1>
     <p style="font-size:.9em;">This demo uses OpenLayers.Layer.GeoRSS and OpenLayers.Layer.PointTrack. The track is created by connecting the points of the GeoRSS feed.</a></p>
     <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;" />
     </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 'xml/track1.xml' will work by default.</p>
     <p>The example shows a track, displayed as a line connecting the points of the feed. It also shows markers at positions that have a title tag in the rss item. If clicked, a popup will show title and description.</p>   
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
   </body>
 </html>

examples/popupMatrix.html

@@ -1,6 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
   <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: 900px;
@@ -840,7 +841,7 @@
          */
         function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
 
-            var feature = new OpenLayers.Feature(layer, ll); 
+            var feature = new OpenLayers.Feature(markers, ll); 
             feature.closeBox = closeBox;
             feature.popupClass = popupClass;
             feature.data.popupContentHTML = popupContentHTML;
@@ -875,14 +876,27 @@
           All kinds of different popup configurations.
       </p>
 
-      <div id="map"></div>
+      <div id="map" class="smallmap"></div>
 
         <!-- preloading these images so the autosize will work correctly -->
-        <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 
+       <p> All of the images in this file a pre-cached, meaning they are 
+           loaded immediately when you load the page (they are just placed 
+           far offscreen, that's why you don't see them). 
+       </p>
+       <br>    
+       <p> The only image that is *not* preloaded is small.jpg, the brazilian
+           flag. We do this in order to test out to make sure that our auto-sizing
+             code does in fact activate itself as the images load. To verify 
+             this, clear your cache and reload this example page. Click on 
+             any of the markers in the 'AutoSize' row. If the popup autosizes
+             to correctly contain the entire flag: golden. If the popup is 
+             tiny and you can only see a corner of it, then this code is broken.
+        </p>
+
       <br/>      
 
       

examples/popups.html

@@ -1,13 +1,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 400px;
-            border: 1px solid black;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
@@ -118,7 +112,7 @@
       All kinds of ways to create and interact with Popups.
   </p>
 
-  <div id="map"></div>
+  <div id="map" class="smallmap"></div>
     <p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p>  
     <div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
     <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>

examples/projected-map.html

@@ -2,12 +2,8 @@
   <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">
-    body {
-    border: 0px;
-    margin: 0px;
-    padding: 0px;
-    }
     #map {
     width: 100%;
     height: 100%;
@@ -51,6 +47,7 @@
             
             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
             map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.addControl(new OpenLayers.Control.ScaleLine());
         }
     </script>
   </head>
@@ -63,7 +60,7 @@
   <p id="shortdesc">
       Use different (not default) projections with your map 
   </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <p>When using alternative projections, you still use OpenLayers.LonLat objects, even though
        the properties are actually X/Y values at that point.</p>
 </body>

examples/protocol-gears.html

@@ -0,0 +1,261 @@
+<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">
+        .float-left {
+            float: left;
+        }
+        .clear-left {
+            clear: left;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, vector, protocol, modify;
+
+        function init() {
+            // create Gears protocol
+            protocol = new OpenLayers.Protocol.SQL.Gears({
+                databaseName: "db_name",
+                tableName: "table_name",
+                saveFeatureState: false
+            });
+
+            if (!GearsIsSupported()) {
+                return;
+            }
+
+            map = new OpenLayers.Map("map");
+
+            // create base layer
+            var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0",
+                {"layers": "basic"}
+            );
+            map.addLayer(layer);
+
+            // create vector layer
+            vector = new OpenLayers.Layer.Vector("Vector", {
+                protocol: protocol,
+                strategies : [new OpenLayers.Strategy.Fixed()],
+                eventListeners: {
+                    featuremodified: function(obj) {
+                        if (obj.feature.state != OpenLayers.State.INSERT &&
+                            obj.feature.state != OpenLayers.State.DELETE) {
+
+                            obj.feature.state = OpenLayers.State.UPDATE;
+                        }
+                        displayStatus();
+                    }
+                }
+            });
+            map.addLayer(vector);
+
+            // create modify feature control
+            modify = new OpenLayers.Control.ModifyFeature(vector);
+
+            // create editing panel
+            var panel = new OpenLayers.Control.Panel({
+                displayClass: "olControlEditingToolbar"
+            });
+
+            var navigation = new OpenLayers.Control.Navigation({
+                eventListeners: {
+                    activate: function(obj) {
+                        modify.activate();
+                    },
+                    deactivate: function(obj) {
+                        modify.deactivate();
+                    }
+                }
+            });
+
+            var editing = new OpenLayers.Control.DrawFeature(
+                vector, OpenLayers.Handler.Polygon, {
+                displayClass: "olControlDrawFeaturePolygon",
+                eventListeners: {
+                    featureadded: function(obj) {
+                        obj.feature.state = OpenLayers.State.INSERT;
+                        displayStatus();
+                    }
+                }
+            });
+            panel.addControls([navigation, editing]);
+            panel.defaultControl = navigation;
+
+            // add controls to the map
+            map.addControl(modify);
+            map.addControl(panel);
+
+            // center the map
+            map.setCenter(new OpenLayers.LonLat(5, 40), 5);
+        }
+
+        function displayResult(txt) {
+            if (window.resultDomElement === undefined) {
+                window.resultDomElement = OpenLayers.Util.getElement("last-result");
+            }
+            resultDomElement.innerHTML = txt;
+            displayStatus();
+        }
+
+        function displayStatus() {
+            if (window.statusDomElement === undefined) {
+                window.statusDomElement = OpenLayers.Util.getElement("status");
+            }
+
+            var createCnt = 0;
+            var updateCnt = 0;
+            var deleteCnt = 0;
+            var i, len, state;
+            for (i = 0, len = vector.features.length; i < len; i++) {
+                state = vector.features[i].state;
+                if (state == OpenLayers.State.INSERT) {
+                    createCnt++;
+                } else if (state == OpenLayers.State.UPDATE) {
+                    updateCnt++;
+                } else if (state == OpenLayers.State.DELETE) {
+                    deleteCnt++;
+                }
+            }
+            statusDomElement.innerHTML = createCnt + " features to create, " +
+                                         updateCnt + " features to update, " +
+                                         deleteCnt + " features to delete";
+        }
+
+        function GearsIsSupported() {
+            if (!protocol.supported()) {
+                OpenLayers.Console.userError("You must install Gears prior to using this example");
+                return false;
+            }
+            return true;
+        }
+
+        function featuresWithState(state) {
+            var list = [];
+            var i, len, feature;
+            for (i = 0, len = vector.features.length; i < len; i++) {
+                feature = vector.features[i];
+                if (feature.state == state) {
+                    list.push(feature);
+                }
+            }
+            return list;
+        }
+
+        function _sync() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var resp = protocol.read();
+            if (!resp.success()) {
+                OpenLayers.Console.error("reading from Gears DB failed");
+                return;
+            }
+            vector.destroyFeatures();
+            if (!resp.features || resp.features.length <= 0) {
+                displayResult("No features to read");
+                return;
+            }
+            vector.addFeatures(resp.features);
+            displayResult("features successfully read");
+        }
+
+        function _commit() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var error = false;
+            function callback(resp) {
+                if (error) {
+                    return;
+                }
+                if (!resp.success()) {
+                    OpenLayers.Console.error("Commiting to Gears DB failed");
+                    error = true;
+                    return;
+                }
+                modify.selectControl.unselectAll()
+
+                if (resp.reqFeatures) {
+                    vector.destroyFeatures(resp.reqFeatures);
+                }
+                if (resp.features) {
+                    vector.addFeatures(resp.features);
+                }
+            }
+            if (vector.features.length > 0) {
+                protocol.commit(vector.features, {
+                    "create": {
+                        callback: callback
+                    },
+                    "update": {
+                        callback: callback
+                    },
+                    "delete": {
+                        callback: callback
+                    }
+                });
+                if (!error) {
+                    displayResult("features successfully committed");
+                }
+            } else {
+                displayResult("no features to commit");
+            }
+        }
+
+        function _delete() {
+            if (!GearsIsSupported()) {
+                return;
+            }
+            var feature = vector.selectedFeatures[0];
+            if (feature) {
+                modify.selectControl.unselectAll()
+                feature.state = OpenLayers.State.DELETE;
+                displayStatus();
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+    <h1 id="title">Gears Protocol Example</h1>
+
+    <div id="tags">
+    </div>
+    <p id="shortdesc">
+        Shows the usage of the Gears protocol.
+    </p>
+
+    <div class="float-left">
+      <div id="map" class="smallmap"></div>
+    </div>
+
+    <div>
+      <a href="javascript:_sync()">Sync</a>
+      <p>The Sync link destroys the features currently in the layer, reads
+         features from the Gears database, and adds them to the layer.
+         Uncommitted features will be lost.</p>
+
+      <a href="javascript:_commit()">Commit</a>
+      <p>The Commit link commits to the Gears database the features that are
+         marked as INSERT, UPDATE or DELETE.</p>
+
+      <a href="javascript:_delete()">Delete</a>
+      <p>The Delete link marks the selected feature as DELETE. To select a feature
+         click choose the navigation control in the editing toolbar.</p>
+    </div>
+
+    <div style="margin-top: 30px">
+      <p>Status: <span id="status"></span></p>
+      <p>Result: <span id="last-result"></span></p>
+    </div>
+
+    <div class="clear-left" id="docs">
+      <p>This example demonstrates the usage of OpenLayers Gears protocol to
+         read/create/update/delete features from/to the Gears database.
+         <a href="http://gears.google.com/">Gears</a> must obviously be installed
+         in your browser for this example to work.</p>
+    </div>
+  </body>
+</html>

examples/proxy.cgi

@@ -18,6 +18,7 @@ import sys, os
 allowedHosts = ['www.openlayers.org', 'openlayers.org', 
                 'labs.metacarta.com', 'world.freemap.in', 
                 'prototype.openmnnd.org', 'geo.openplans.org',
+                'sigma.openplans.org',
                 'www.openstreetmap.org']
 
 method = os.environ["REQUEST_METHOD"]
@@ -39,8 +40,8 @@ try:
         print "Status: 502 Bad Gateway"
         print "Content-Type: text/plain"
         print
-        print "This proxy does not allow you to access that location."
-        print 
+        print "This proxy does not allow you to access that location (%s)." % (host,)
+        print
         print os.environ
   
     elif url.startswith("http://") or url.startswith("https://"):

examples/regular-polygons.html

@@ -2,20 +2,8 @@
   <head>
     <title>OpenLayers Regular Polygon 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">
-        html, body {
-            margin: 0;
-            padding: 1em;
-            font: 0.9em Verdana, Arial, sans serif;
-        }
-        input, select, textarea {
-            font: 1em Verdana, Arial, sans serif;
-        }
-        #map {
-            width: 512px;
-            height: 350px;
-            border: 1px solid gray;
-        }
         p {
             width: 512px;
         }
@@ -85,7 +73,7 @@
       Shows how to use the RegularPolygon handler to draw features with
       different numbers of sides.
     </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <div id="config">
         
         <ul id="controls"><b>Map Controls</b>

examples/resize-features.html

@@ -2,12 +2,8 @@
   <head>
     <title>OpenLayers Resize Features 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 #ccc;
-        }
         p {
             width: 500px;
         }
@@ -88,7 +84,7 @@
       Demonstration of how to use the geometry resize methods to
       change feature sizes programatically.
     </p>  
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <p>This example demonstrates how features can be resized.  There is not yet
     a control built that provides a tool for resizing, but the geometry.resize
     method can be accessed to resize programmatically.</p>

examples/restricted-extent.html

@@ -2,13 +2,7 @@
   <head>
     <title>OpenLayers Restricted Extent Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
-    <style type="text/css">
-        #map {
-            width: 512px;
-            height: 256px;
-            border: 1px solid #ccc;
-        }
-    </style>
+    <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">
@@ -47,7 +41,7 @@
       Don't let users drag outside the map extent: instead, limit dragging such
       that the extent of the layer is the maximum viewable area.
     </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <p>
         Map navigation is limited by a combination of map and layer properties.
         The base layer resolutions array controls the resolutions (or zoom

examples/rotate-features.html

@@ -2,12 +2,8 @@
   <head>
     <title>OpenLayers Rotate Features 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 #ccc;
-        }
         p {
             width: 500px;
         }
@@ -81,12 +77,12 @@
             };
             var center = new OpenLayers.Feature.Vector(origin, null, style);
             vectorLayer.addFeatures([center]);
-            window.setInterval(rotateFeature, 100,
-                               pointFeature, 360 / 20, origin);
-            window.setInterval(rotateFeature, 100,
-                               lineFeature, 360 / 40, origin);
-            window.setInterval(rotateFeature, 100,
-                               polygonFeature, -360 / 20, origin);
+            window.setInterval(function() {rotateFeature(
+                               pointFeature, 360 / 20, origin)}, 100);
+            window.setInterval(function() {rotateFeature(
+                               lineFeature, 360 / 40, origin)}, 100);
+            window.setInterval(function(){rotateFeature(
+                               polygonFeature, -360 / 20, origin)}, 100);
         }
 
         function rotateFeature(feature, angle, origin) {
@@ -104,7 +100,7 @@
       Details on how to create and rotate vector features programmatically
   </p>
 
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <div id="docs">This example shows a few features rotating.  There is not yet a control
     built that provides a tool for rotating, but the geometry.rotate method
     can be accessed to rotate programmatically.</div>

examples/select-feature-openpopup.html

@@ -3,12 +3,8 @@
     <title>Open Popup on Layer.Vector</title> 
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
     <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />
+    <link rel="stylesheet" href="style.css" type="text/css" />
     <style type="text/css">
-        #map {
-            width: 800px;
-            height: 350px;
-            border: 1px solid gray;
-        }
         #controlToggle li {
             list-style: none;
         }
@@ -79,7 +75,7 @@
     <p id="shortdesc">
       Using a Control.SelectFeature, open a popup on click.
     </p>
-    <div id="map"></div>
+    <div id="map" class="smallmap"></div>
     <ul id="controlToggle">
         <li>
             <input type="radio" name="type" value="none" id="noneToggle"