ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge the excellent documentation work done during foss4g into trunk. Many

Browse Source 
thanks to all the contributors who helped put this together. 
I'm not exactly sure of what's going to happen with this, but for now,
at http://openlayers.org/dev/doc/examples.html you can see links to all the
examples *with descriptions*. Hooray!


git-svn-id: http://svn.openlayers.org/trunk/openlayers@5362 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2007-12-08 14:21:53 +00:00
parent ebf611c932
commit 7da6a3540e
90 changed files with 4188 additions and 1294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
doc/Jugl.js Normal file
View File

@@ -0,0 +1,74 @@
/**
* 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");}}};})();

55
doc/examples.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>

21
examples/GMLParser.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GML Parser</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 800px;
@@ -21,13 +22,27 @@
} }
html += "</ul>" html += "</ul>"
} }
document.body.innerHTML = html; document.getElementById('output').innerHTML = html;
} }
function load() { function load() {
OpenLayers.loadURL("gml/owls.xml", "", null, parseData); OpenLayers.loadURL("gml/owls.xml", "", null, parseData);
} }
</script> </script>
</head> </head>
<body onload="load()"> <body onload="load()">
<h1 id="title">GML Parser Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate the operation of the GML parser.
</p>
<div id="output"></div>
<div id="docs">
This script reads data from a GML file and parses out the coordinates, appending them to a HTML string with markup tags.
This markup is dumped to an element in the page.
</div>
</body> </body>
</html> </html>

28
examples/KMLParser.html
View File

@@ -1,12 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers KML Parser Example</title>
#map {
width: 800px;
height: 475px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function parseData(req) { function parseData(req) {
@@ -21,13 +15,27 @@
} }
html += "</ul>" html += "</ul>"
} }
document.body.innerHTML = html; document.getElementById('output').innerHTML = html;
} }
function load() { function load() {
OpenLayers.loadURL("kml/lines.kml", "", null, parseData); OpenLayers.loadURL("kml/lines.kml", "", null, parseData);
} }
</script> </script>
</head> </head>
<body onload="load()"> <body onload="load()">
<h1 id="title">KML Parser Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate the operation of the KML parser.
</p>
<div id="output"></div>
<div id="docs">
This script reads data from a KML file and parses out the coordinates, appending them to a HTML string with markup tags.
This markup is dumped to an element in the page.
</div>
</body> </body>
</html> </html>

79
examples/accessible.html
View File

@@ -1,9 +1,11 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Accessible Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
height: 256px; height: 512px;
border: 1px solid #eee; border: 1px solid #eee;
} }
table { table {
@@ -21,10 +23,14 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
text-decoration: underline; text-decoration: underline;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
a.api {
font-size:1em;
text-decoration:underline;
}
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
@@ -35,7 +41,7 @@
}; };
map = new OpenLayers.Map('map', options); map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS( var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS", "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", "http://labs.metacarta.com/wms/vmap0?",
{layers: 'basic'} {layers: 'basic'}
); );
@@ -45,7 +51,15 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3>OpenLayers Example</h3> <h1 id="title">Accessible Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate how to use the KeyboardDefaults option parameter for layer types.
</p>
<table> <table>
<tbody> <tbody>
<tr> <tr>
@@ -95,30 +109,35 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>Navigate the map in one of three ways:
<ul> <div id="docs">
<li>Click on the named links to zoom and pan</li> <p>Navigate the map in one of three ways:
<li>Use following keys to pan and zoom: <ul>
<ul> <li>Click on the named links to zoom and pan</li>
<li>+ (zoom in)</li> <li>Use following keys to pan and zoom:
<li>- (zoom out)</li> <ul>
<li>up-arrow (pan north)</li> <li>+ (zoom in)</li>
<li>down-arrow (pan south)</li> <li>- (zoom out)</li>
<li>left-arrow (pan east)</li> <li>up-arrow (pan north)</li>
<li>right-arrow (pan west)</li> <li>down-arrow (pan south)</li>
</ul> <li>left-arrow (pan east)</li>
</li> <li>right-arrow (pan west)</li>
<li>If access keys work for links in your browser, use: </ul>
<ul> </li>
<li>i (zoom in)</li> <li>If access keys work for links in your browser, use:
<li>o (zoom out)</li> <ul>
<li>n (pan north)</li> <li>i (zoom in)</li>
<li>s (pan south)</li> <li>o (zoom out)</li>
<li>e (pan east)</li> <li>n (pan north)</li>
<li>w (pan west)</li> <li>s (pan south)</li>
</ul> <li>e (pan east)</li>
</li> <li>w (pan west)</li>
</ul> </ul>
</p> </li>
</ul>
</p>
This is an example of using alternate methods to control panning and zooming. This approach uses map.pan() and map.zoom(). You'll note that to pan, additional math is necessary along with map.size() in order to set the distance to pan.
</div>
</body> </body>
</html> </html>

74
examples/attribution.html
View File

@@ -1,36 +1,52 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Attribution Example</title>
#map {
width: 512px; <style type="text/css">
height: 512px; #map {
border: 1px solid black; width: 512px;
} height: 512px;
</style> border: 1px solid black;
<script src="../lib/OpenLayers.js"></script> }
<script type="text/javascript"> </style>
var map; <script src="../lib/OpenLayers.js"></script>
function init(){ <script type="text/javascript">
map = new OpenLayers.Map('map'); var map;
function init(){
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", map = new OpenLayers.Map('map');
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},
{'attribution': 'Provided by <a href="http://labs.metacarta.com/">MetaCarta</a>'}); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"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", var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"},{attribution:"Provided by Telascience"}); {layers: "landsat7"},{attribution:"Provided by Telascience"});
map.addLayers([ol_wms, jpl_wms]); map.addLayers([ol_wms, jpl_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Attribution()); map.addControl(new OpenLayers.Control.Attribution());
// map.setCenter(new OpenLayers.LonLat(0, 0), 0); // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Attribution Example</h1>
<div id="map"></div>
</body> <div id="tags">
</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="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.
</div>
</body>
</html> </html>

152
examples/baseLayers.html
View File

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

97
examples/boxes.html
View File

@@ -1,47 +1,58 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Boxes Example</title>
#map { <style type="text/css">
width: 512px; #map {
height: 512px; width: 512px;
border: 1px solid black; height: 512px;
} border: 1px solid black;
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var box_extents = [
[-10, 50, 5, 60],
[-75, 41, -71, 44],
[-122.6, 37.6, -122.3, 37.9],
[10, 10, 20, 20]
];
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
var boxes = new OpenLayers.Layer.Boxes( "Boxes" );
for (var i = 0; i < box_extents.length; i++) {
ext = box_extents[i];
bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
box = new OpenLayers.Marker.Box(bounds);
box.events.register("click", box, function (e) {
this.setBorder("yellow");
});
boxes.addMarker(box);
} }
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var box_extents = [
[-10, 50, 5, 60],
[-75, 41, -71, 44],
[-122.6, 37.6, -122.3, 37.9],
[10, 10, 20, 20]
];
var map;
function init(){
map = new OpenLayers.Map('map');
map.addLayers([ol_wms, boxes]); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
map.addControl(new OpenLayers.Control.LayerSwitcher()); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
map.zoomToMaxExtent();
} var boxes = new OpenLayers.Layer.Boxes( "Boxes" );
</script>
</head> for (var i = 0; i < box_extents.length; i++) {
<body onload="init()"> ext = box_extents[i];
<h1>OpenLayers Example</h1> bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]);
<div id="map"></div> box = new OpenLayers.Marker.Box(bounds);
</body> box.events.register("click", box, function (e) {
this.setBorder("yellow");
});
boxes.addMarker(box);
}
map.addLayers([ol_wms, boxes]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Boxes Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate marker and box type annotations on a map.
</p>
<div id="map"></div>
<div id="docs"></div>
</body>
</html> </html>

89
examples/buffer.html
View File

@@ -1,41 +1,54 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Buffer Example</title>
#map { <style type="text/css">
width: 694px; #map {
height: 464px; width: 512px;
border: 1px solid black; height: 512px;
} border: 1px solid black;
</style> }
<script src="../lib/OpenLayers.js"></script> </style>
<script type="text/javascript"> <script src="../lib/OpenLayers.js"></script>
var lon = 0; <script type="text/javascript">
var lat = 0; var lon = 0;
var zoom = 2; var lat = 0;
var map, layer; var zoom = 2;
var map, layer;
function init(){ function init(){
map = new OpenLayers.Map( 'map' ); map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "0 buffer: OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "0 buffer: OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {'buffer':0} ); {layers: 'basic'}, {'buffer':0} );
map.addLayer(layer); map.addLayer(layer);
layer = new OpenLayers.Layer.WMS( "1 buffer: OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "1 buffer: OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {'buffer':1} ); {layers: 'basic'}, {'buffer':1} );
map.addLayer(layer); map.addLayer(layer);
layer = new OpenLayers.Layer.WMS( "4 buffer: OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "4 buffer: OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {'buffer':4} ); {layers: 'basic'}, {'buffer':4} );
map.addLayer(layer); map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher()) map.addControl(new OpenLayers.Control.LayerSwitcher())
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">Buffer Example</h1>
<p>Use the buffer property to control how many tiles are included
outside the visible map area. Default is 2</p> <div id="tags">
</body> </div>
<p id="shortdesc">
This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
</p>
<div id="map"></div>
<div id="docs">
Use the buffer property to control how many tiles are included
outside the visible map area. Default is 2.
</div>
</body>
</html> </html>

78
examples/click.html
View File

@@ -1,41 +1,53 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Click Event Example</title>
#map {
width: 512px; <style type="text/css">
height: 512px; #map {
border: 1px solid black; width: 512px;
} height: 512px;
</style> border: 1px solid black;
<script src="../lib/OpenLayers.js"></script> }
<script type="text/javascript"> </style>
var map; <script src="../lib/OpenLayers.js"></script>
function init(){ <script type="text/javascript">
map = new OpenLayers.Map('map'); var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}); {layers: "landsat7"});
jpl_wms.setVisibility(false); jpl_wms.setVisibility(false);
map.addLayers([ol_wms, jpl_wms]); map.addLayers([ol_wms, jpl_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
// map.setCenter(new OpenLayers.LonLat(0, 0), 0); // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
map.events.register("click", map, function(e) { map.events.register("click", map, function(e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy); var lonlat = map.getLonLatFromViewPortPx(e.xy);
alert("You clicked near " + lonlat.lat + " N, " + alert("You clicked near " + lonlat.lat + " N, " +
+ lonlat.lon + " E"); + lonlat.lon + " E");
}); });
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Click Event Example</h1>
<div id="map"></div>
</body> <div id="tags">
</div>
<p id="shortdesc">
This example shows the use of the register and getLonLatFromViewPortPx functions to trigger events on mouse click.
</p>
<div id="map"></div>
<div id="docs"></div>
</body>
</html> </html>

97
examples/controls.html
View File

@@ -1,52 +1,61 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Map Controls Example</title>
#map { <style type="text/css">
width: 512px; #map {
height: 512px; width: 512px;
border: 1px solid black; height: 512px;
} border: 1px solid black;
</style> }
<script src="../lib/OpenLayers.js"></script> </style>
<script type="text/javascript"> <script src="../lib/OpenLayers.js"></script>
var map; <script type="text/javascript">
function init(){ var map;
map = new OpenLayers.Map('map', { controls: [] }); function init(){
map = new OpenLayers.Map('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.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon:true})); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
map.addControl(new OpenLayers.Control.MouseToolbar()); "http://labs.metacarta.com/wms/vmap0",
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); {layers: 'basic'} );
map.addControl(new OpenLayers.Control.Permalink()); var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
map.addControl(new OpenLayers.Control.Permalink('permalink')); "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
map.addControl(new OpenLayers.Control.MousePosition()); {layers: "landsat7"});
map.addControl(new OpenLayers.Control.OverviewMap()); var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
map.addControl(new OpenLayers.Control.KeyboardDefaults()); "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" });
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", jpl_wms.setVisibility(false);
"http://labs.metacarta.com/wms/vmap0", dm_wms.setVisibility(false);
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic", map.addLayers([ol_wms, jpl_wms, dm_wms]);
"http://t1.hypercube.telascience.org/tiles/landsat7", if (!map.getCenter()) map.zoomToMaxExtent();
{layers: "landsat7"}); }
</script>
</head>
<body onload="init()">
<h1 id="title">Map Controls Example</h1>
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo", <div id="tags">
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", </div>
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
jpl_wms.setVisibility(false); <p id="shortdesc">
dm_wms.setVisibility(false); Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
</p>
map.addLayers([ol_wms, jpl_wms, dm_wms]); <a style="float:right" href="" id="permalink">Permalink</a>
if (!map.getCenter()) map.zoomToMaxExtent(); <div id="map"></div>
}
</script> <div id="docs"></div>
</head> </body>
<body onload="init()">
<h1>OpenLayers Example</h1>
<a style="float:right" href="" id="permalink">Permalink</a>
<div id="map"></div>
</body>
</html> </html>

16
examples/custom-control-point.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Custom Control Point Examle</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -45,7 +46,18 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Custom Control Point Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate the addition of a point reporting control to the OpenLayers window.
</p>
<div id="map"></div> <div id="map"></div>
<div id="bounds"></div> <div id="bounds"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

100
examples/custom-control.html
View File

@@ -1,49 +1,61 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>Custom Control Example</title>
#map { <style type="text/css">
width: 800px; #map {
height: 475px; width: 512px;
border: 1px solid black; height: 512px;
} border: 1px solid black;
</style> }
<script src="../lib/OpenLayers.js"></script> </style>
<script type="text/javascript"> <script src="../lib/OpenLayers.js"></script>
<!-- <script type="text/javascript">
var lon = 5; <!--
var lat = 40; var lon = 5;
var zoom = 5; var lat = 40;
var map, layer; var zoom = 5;
var map, layer;
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var control = new OpenLayers.Control();
OpenLayers.Util.extend(control, {
draw: function () {
// this Handler.Box will intercept the shift-mousedown
// before Control.MouseDefault gets to see it
this.box = new OpenLayers.Handler.Box( control,
{"done": this.notice},
{keyMask: OpenLayers.Handler.MOD_SHIFT});
this.box.activate();
},
notice: function (bounds) { var control = new OpenLayers.Control();
alert(bounds); OpenLayers.Util.extend(control, {
} draw: function () {
}); // this Handler.Box will intercept the shift-mousedown
// before Control.MouseDefault gets to see it
this.box = new OpenLayers.Handler.Box( control,
{"done": this.notice},
{keyMask: OpenLayers.Handler.MOD_SHIFT});
this.box.activate();
},
map.addLayer(layer); notice: function (bounds) {
map.addControl(control); alert(bounds);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); }
} });
// -->
</script> map.addLayer(layer);
</head> map.addControl(control);
<body onload="init()"> map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
<div id="map"></div> }
</body> // -->
</script>
</head>
<body onload="init()">
<h1 id="title">Custom Control Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate the addition of a draggable rectangle to the OpenLayers window.
</p>
<div id="map"></div>
<div id="docs"></div>
</body>
</html> </html>

114
examples/custom-style.html
View File

@@ -1,53 +1,67 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <title>Custom Style Example</title>
<style type="text/css">
#map { <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
width: 500px; <style type="text/css">
height: 350px; #map {
border: 1px solid gray; width: 512px;
} height: 512px;
p { border: 1px solid gray;
width: 500px; }
} p {
div.olControlMousePosition { width: 500px;
font-family: Verdana; }
font-size: 0.5em; div.olControlMousePosition {
color: red; font-family: Verdana;
} font-size: 0.5em;
</style> color: red;
<script src="../lib/OpenLayers.js"></script> }
<script type="text/javascript"> </style>
<!-- <script src="../lib/OpenLayers.js"></script>
var lon = 5; <script type="text/javascript">
var lat = 40; <!--
var zoom = 5; var lon = 5;
var map, layer; var lat = 40;
var zoom = 5;
var map, layer;
function init(){ function init(){
var options = {theme: null}; var options = {theme: null};
map = new OpenLayers.Map('map', options); map = new OpenLayers.Map('map', options);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
map.addLayer(layer); map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
} }
// --> // -->
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">Custom Style Example</h1>
<p>If you care to modify the style of any OpenLayers element, include
the default stylesheet as a link and declare any style modifications <div id="tags">
below that link. These style declarations can be in other linked </div>
stylesheets or in style tags. In addition, construct your map with
options that include {theme: null}. This will disable the default <p id="shortdesc">
method of loading the stylesheet and allow you to declare style rules Demonstrate changing CSS styles on controls in the OpenLayers window.
in your own linked stylesheets or style tags.</p> </p>
<p>This example shows how to declare the font family, size, and color
for the mouse position. Note that only the style keys that you want to <div id="map"></div>
modify (change from the default) need to be specified.</p>
</body> <div id="docs">
<p>If you care to modify the style of any OpenLayers element, include
the default stylesheet as a link and declare any style modifications
below that link. These style declarations can be in other linked
stylesheets or in style tags. In addition, construct your map with
options that include {theme: null}. This will disable the default
method of loading the stylesheet and allow you to declare style rules
in your own linked stylesheets or style tags.</p>
<p>This example shows how to declare the font family, size, and color
for the mouse position. Note that only the style keys that you want to
modify (change from the default) need to be specified.</p>
</div>
</body>
</html> </html>

131
examples/debug.html
View File

@@ -1,64 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<script src="../lib/Firebug/firebug.js"></script> <title>OpenLayers Debug Example</title>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script src="../lib/Firebug/firebug.js"></script>
<!-- <script src="../lib/OpenLayers.js"></script>
function consoleLog() { <script type="text/javascript">
OpenLayers.Console.log("This is the result of an OpenLayers.Console.log() call"); <!--
} function consoleLog() {
function consoleWarn() { OpenLayers.Console.log("This is the result of an OpenLayers.Console.log() call");
OpenLayers.Console.warn("This is the result of an OpenLayers.Console.warn() call"); }
} function consoleWarn() {
function consoleError() { OpenLayers.Console.warn("This is the result of an OpenLayers.Console.warn() call");
OpenLayers.Console.error("This is the result of an OpenLayers.Console.error() call"); }
} function consoleError() {
function consoleDir() { OpenLayers.Console.error("This is the result of an OpenLayers.Console.error() call");
OpenLayers.Console.dir(OpenLayers); }
} function consoleDir() {
function consoleDirxml() { OpenLayers.Console.dir(OpenLayers);
OpenLayers.Console.dirxml(document.getElementsByTagName('body')[0]); }
} function consoleDirxml() {
// --> OpenLayers.Console.dirxml(document.getElementsByTagName('body')[0]);
</script> }
</head> // -->
<body> </script>
<h1>OpenLayers Debug Example</h1> </head>
<p>To run OpenLayers in debug mode, include the following script <body>
tag <b>before</b> the tag that loads OpenLayers: <h1 id="title">Debug Example</h1>
<pre>
&lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt; <div id="tags"></div>
</pre>
The path to firebug.js must be relative to your <p id="shortdesc">
html file. With this script included calls to OpenLayers.Console Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.
will be displayed in the Firebug console. For browsers without </p>
the Firebug extension, the script creates a Firebug Lite console.
This console can be opened by hitting <b>F12</b> or <b>Ctrl+Shift+L</b> <div id="docs">
(<b>?+Shift+L</b> on a Mac). If you want the Firebug Lite console <p>To run OpenLayers in debug mode, include the following script
to be open when the page loads, add <b>debug="true"</b> to the opening tag <b>before</b> the tag that loads OpenLayers:
html tag of your page. Open the console and click on the links below
to see console calls.</p> <pre> &lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt;</pre>
<ul>
<li> The path to firebug.js must be relative to your
<a href="javascript: void(consoleLog());">OpenLayers.Console.log()</a> html file. With this script included calls to OpenLayers.Console
</li> will be displayed in the Firebug console. For browsers without
<li> the Firebug extension, the script creates a Firebug Lite console.
<a href="javascript: void(consoleWarn());">OpenLayers.Console.warn()</a> This console can be opened by hitting <b>F12</b> or <b>Ctrl+Shift+L</b>
</li> (<b>?+Shift+L</b> on a Mac). If you want the Firebug Lite console
<li> to be open when the page loads, add <b>debug="true"</b> to the opening
<a href="javascript: void(consoleError());">OpenLayers.Console.error()</a> html tag of your page. Open the console and click on the links below
</li> to see console calls.</p>
<li> <ul>
<a href="javascript: void(consoleDir());">OpenLayers.Console.dir()</a> <li>
</li> <a href="javascript: void(consoleLog());">OpenLayers.Console.log()</a>
<li> </li>
<a href="javascript: void(consoleDirxml());">OpenLayers.Console.dirxml()</a> <li>
</li> <a href="javascript: void(consoleWarn());">OpenLayers.Console.warn()</a>
</ul> </li>
<p>The Firebug website has a complete list of <li>
<a href="http://www.getfirebug.com/console.html">console calls</a>. <a href="javascript: void(consoleError());">OpenLayers.Console.error()</a>
Note that not all are supported with Firebug Lite.</p> </li>
</body> <li>
<a href="javascript: void(consoleDir());">OpenLayers.Console.dir()</a>
</li>
<li>
<a href="javascript: void(consoleDirxml());">OpenLayers.Console.dirxml()</a>
</li>
</ul>
<p>The Firebug website has a complete list of
<a href="http://www.getfirebug.com/console.html">console calls</a>.
Note that not all are supported with Firebug Lite.</p>
</div>
</body>
</html> </html>

47
examples/doubleSetCenter.html
View File

@@ -1,17 +1,36 @@
<html> <html>
<head> <head>
<script src="../lib/OpenLayers.js"></script> <title>OpenLayers Double Set Center Example</title>
</head>
<body> <script src="../lib/OpenLayers.js"></script>
<div style="width:100%; height:100%" id="map"></div> <style type="text/css">
<script defer="defer" type="text/javascript"> #map {
var map = new OpenLayers.Map('map'); width:512px;
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", height:521px;
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); }
map.addLayer(wms); </style>
map.setCenter(new OpenLayers.LonLat(100,10)); </head>
map.setCenter(new OpenLayers.LonLat(1,1)); <body>
</script> <h1 id="title">Double Set Center Example</h1>
</body>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate the behavior of two calls to set the center after instatiating the layer object.
</p>
<div id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.setCenter(new OpenLayers.LonLat(100,10));
map.setCenter(new OpenLayers.LonLat(1,1));
</script>
<div id="docs"></div>
</body>
</html> </html>

191
examples/drag-feature.html
View File

@@ -1,97 +1,108 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Drag Feature</title> <title>Drag Feature Example</title>
<style type="text/css">
#map { <style type="text/css">
width: 512px; #map {
height: 350px; width: 512px;
border: 1px solid gray; height: 512px;
} border: 1px solid gray;
#controls {
width: 512px;
}
#controlToggle {
padding-left: 1em;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
controls = {
point: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
drag: new OpenLayers.Control.DragFeature(vectors)
};
for(var key in controls) {
map.addControl(controls[key]);
} }
#controls {
map.setCenter(new OpenLayers.LonLat(0, 0), 3); width: 512px;
document.getElementById('noneToggle').checked = true; }
} #controlToggle {
padding-left: 1em;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
function toggleControl(element) { map.addLayers([wms, vectors]);
for(key in controls) { map.addControl(new OpenLayers.Control.LayerSwitcher());
var control = controls[key]; map.addControl(new OpenLayers.Control.MousePosition());
if(element.value == key && element.checked) {
control.activate(); controls = {
} else { point: new OpenLayers.Control.DrawFeature(vectors,
control.deactivate(); OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
drag: new OpenLayers.Control.DragFeature(vectors)
};
for(var key in controls) {
map.addControl(controls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function toggleControl(element) {
for(key in controls) {
var control = controls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
} }
} }
}
// -->
</script>
</head>
<body onload="init()">
<h1 id="title">Drag Feature Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates point, line and polygon creation and editing.
</p>
<div id="map"></div>
// --> <div id="controls">
</script> <ul id="controlToggle">
</head> <li>
<body onload="init()"> <input type="radio" name="type" value="none" id="noneToggle"
<h1>OpenLayers Drag Feature Example</h1> onclick="toggleControl(this);" checked="checked" />
<div id="map"></div> <label for="noneToggle">navigate</label>
<div id="controls"> </li>
<ul id="controlToggle"> <li>
<li> <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<input type="radio" name="type" value="none" id="noneToggle" <label for="pointToggle">draw point</label>
onclick="toggleControl(this);" checked="checked" /> </li>
<label for="noneToggle">navigate</label> <li>
</li> <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<li> <label for="lineToggle">draw line</label>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> </li>
<label for="pointToggle">draw point</label> <li>
</li> <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<li> <label for="polygonToggle">draw polygon</label>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> </li>
<label for="lineToggle">draw line</label> <li>
</li> <input type="radio" name="type" value="drag" id="dragToggle"
<li> onclick="toggleControl(this);" />
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> <label for="dragToggle">drag feature</label>
<label for="polygonToggle">draw polygon</label> </li>
</li> </ul>
<li> </div>
<input type="radio" name="type" value="drag" id="dragToggle"
onclick="toggleControl(this);" /> <div id="docs"></div>
<label for="dragToggle">drag feature</label> </body>
</li>
</ul>
</div>
</body>
</html> </html>

192
examples/draw-feature.html
View File

@@ -1,96 +1,108 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>Draw Feature Example</title>
#map {
width: 512px; <style type="text/css">
height: 350px; #map {
border: 1px solid gray; width: 512px;
} height: 512px;
#controlToggle li { border: 1px solid gray;
list-style: none;
}
p {
width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, drawControls;
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'});
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
var options = {handlerOptions: {freehand: true}};
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path, options),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon, options)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
} }
#controlToggle li {
map.setCenter(new OpenLayers.LonLat(0, 0), 3); list-style: none;
}
document.getElementById('noneToggle').checked = true; p {
} width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, drawControls;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
map = new OpenLayers.Map('map');
function toggleControl(element) { var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
for(key in drawControls) { "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var control = drawControls[key];
if(element.value == key && element.checked) { var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
control.activate(); var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
} else { var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
control.deactivate();
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
var options = {handlerOptions: {freehand: true}};
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path, options),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon, options)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
} }
} }
} // -->
// --> </script>
</script> </head>
</head> <body onload="init()">
<body onload="init()"> <h1 id="title">OpenLayers Draw Feature Example</h1>
<h1>OpenLayers Draw Feature Example</h1>
<div id="map"></div> <div id="tags"></div>
<ul id="controlToggle">
<li> <p id="shortdesc">
<input type="radio" name="type" value="none" id="noneToggle" Demonstrate on-screen digitizing tools for point, line, and polygon creation.
onclick="toggleControl(this);" checked="checked" /> </p>
<label for="noneToggle">navigate</label>
</li> <div id="map"></div>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> <ul id="controlToggle">
<label for="pointToggle">draw point</label> <li>
</li> <input type="radio" name="type" value="none" id="noneToggle"
<li> onclick="toggleControl(this);" checked="checked" />
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> <label for="noneToggle">navigate</label>
<label for="lineToggle">draw line</label> </li>
</li> <li>
<li> <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> <label for="pointToggle">draw point</label>
<label for="polygonToggle">draw polygon</label> </li>
</li> <li>
</ul> <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<p>Feature digitizing is in freehand mode by default. In freehand mode, the mouse is treated as a pen. <label for="lineToggle">draw line</label>
Drawing begins on mouse down, continues with every mouse move, and ends with mouse up.</p> </li>
<p>To turn freehand mode off, hold down the shift key while digitizing. With freehand mode off, one <li>
vertex is added with each click and double-clicks finish drawing. Freehand mode can be toggled on and off <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
at any time while drawing.</p> <label for="polygonToggle">draw polygon</label>
</li>
</body> </ul>
<div id="docs">
<p>Feature digitizing is in freehand mode by default. In freehand mode, the mouse is treated as a pen.
Drawing begins on mouse down, continues with every mouse move, and ends with mouse up.</p>
<p>To turn freehand mode off, hold down the shift key while digitizing. With freehand mode off, one
vertex is added with each click and double-clicks finish drawing. Freehand mode can be toggled on and off
at any time while drawing.</p>
</div>
</body>
</html> </html>

82
examples/editingtoolbar.html
View File

@@ -1,40 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>OpenLayers Editing Toolbar Example</title>
#map {
width: 800px; <style type="text/css">
height: 475px; #map {
border: 1px solid black; width: 512px;
} height: 512px;
</style> border: 1px solid black;
<script src="../lib/Firebug/firebug.js"></script> }
<script src="../lib/OpenLayers.js"></script> </style>
<script type="text/javascript"> <script src="../lib/OpenLayers.js"></script>
<!-- <script src="../lib/Firebug/debug.js"></script>
var lon = 5; <script type="text/javascript">
var lat = 40; <!--
var zoom = 5; var lon = 5;
var map, layer; var lat = 40;
var zoom = 5;
var map, layer;
function init(){ function init(){
map = new OpenLayers.Map( 'map', { controls: [] } ); map = new OpenLayers.Map( 'map', { controls: [] } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); 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.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
// -->
</script>
</head>
<body onload="init()">
<h1 id="title">Editing Toolbar Example</h1>
vlayer = new OpenLayers.Layer.Vector( "Editable" ); <div id="tags"></div>
map.addLayer(vlayer);
map.addControl(new OpenLayers.Control.PanZoomBar()); <p id="shortdesc">
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer)); Demonstrate polygon, polyline and point creation and editing tools.
</p>
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
} <div id="panel"></div>
// --> <div id="map"></div>
</script>
</head> <div id="docs"></div>
<body onload="init()"> </body>
<div id="panel"></div>
<div id="map"></div>
</body>
</html> </html>

37
examples/example.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -17,7 +18,7 @@
function init(){ function init(){
//set title name to include Browser Detection //set title name to include Browser Detection
// this is the only way to test the functionality // this is the only way to test the functionality
// of the getBrowserName() function // of the getBrowserName() function
// //
var header = OpenLayers.Util.getElement("browserHeader"); var header = OpenLayers.Util.getElement("browserHeader");
@@ -39,27 +40,27 @@
case "mozilla": case "mozilla":
browserName = "Mozilla"; browserName = "Mozilla";
break; break;
default: default:
browserName = "detection error" browserName = "detection error"
break; break;
} }
header.innerHTML += browserName + ")"; header.innerHTML += browserName + ")";
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var options = { 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] 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 = { 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] 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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}, options2); {layers: "landsat7"}, options2);
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo", var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
@@ -79,11 +80,17 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<table><tr><td> <h1 id="title" style="display:inline;">OpenLayers Example</h1>
<h1>OpenLayers Example</h1> <h3 id="browserHeader" style="display:inline;"></h3>
</td><td>
<h3 id="browserHeader"></h3> <div id="tags"></div>
</td></tr></table>
<p id="shortdesc">
Demonstrate a simple map with an overlay that includes layer switching controls.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

83
examples/fullScreen.html
View File

@@ -1,39 +1,60 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style type="text/css"> <title>Full Screen Example</title>
#map {
width: 100%; <style type="text/css">
height: 100%; #map {
border: 1px solid black; width: 100%;
} height: 100%;
</style> border: 1px solid black;
<script src="../lib/OpenLayers.js"></script> }
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", #text {
"http://labs.metacarta.com:80/wms/vmap0?", {layers: 'basic'}); position: absolute;
bottom: 0px;
left:0px;
width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}); {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", "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," + {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace", "prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" }); transparent: "true", format: "image/png" });
map.addLayers([ol_wms, jpl_wms, dm_wms]); map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
// map.setCenter(new OpenLayers.LonLat(0, 0), 0); // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <div id="map"></div>
</body>
<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> </html>

51
examples/fullScreen2.html Normal file
View File

@@ -0,0 +1,51 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full Screen Example 2</title>
<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>

BIN
examples/fullscreen.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

18
examples/georss-markers.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GeoRSS Marker Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 400px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -14,7 +15,7 @@
OpenLayers.ProxyHost = "/proxy/?url="; OpenLayers.ProxyHost = "/proxy/?url=";
function init(){ function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'}); map = new OpenLayers.Map('map', {maxResolution:'auto'});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0); map.setCenter(new OpenLayers.LonLat(0, 0), 0);
@@ -28,7 +29,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>GeoRSS in OpenLayers</h1> <h1 id="title">GeoRSS Marker Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate loading a GeoRSS feed using the GeoRSS parser.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

29
examples/georss-serialize.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GeoRSS Serialize Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 45%; width: 512px;
height: 350px; height: 512px;
border: 1px solid gray; border: 1px solid gray;
} }
</style> </style>
@@ -20,9 +21,9 @@
function init(){ function init(){
g = new OpenLayers.Format.GeoRSS(); g = new OpenLayers.Format.GeoRSS();
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var pointLayer = new OpenLayers.Layer.Vector("Point Layer"); var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
pointLayer.onFeatureInsert = serialize; pointLayer.onFeatureInsert = serialize;
@@ -30,17 +31,27 @@
map.addLayers([wmsLayer, pointLayer]); map.addLayers([wmsLayer, pointLayer]);
map.addControl(new OpenLayers.Control.EditingToolbar(pointLayer)); map.addControl(new OpenLayers.Control.EditingToolbar(pointLayer));
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
map.setCenter(new OpenLayers.LonLat(0, 0), 3); map.setCenter(new OpenLayers.LonLat(0, 0), 3);
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Draw Point Example</h1> <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%"> <div style="float:right;width:50%">
<textarea id="gml" style="width:100%" rows="30"></textarea> <textarea id="gml" style="width:100%" rows="30"></textarea>
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

40
examples/georss.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GeoRSS Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 400px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -14,14 +15,14 @@
OpenLayers.ProxyHost = "/proxy/?url="; OpenLayers.ProxyHost = "/proxy/?url=";
function init(){ function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'}); map = new OpenLayers.Map('map', {maxResolution:'auto'});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0); map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
} }
function addUrl() { function addUrl() {
var urlObj = OpenLayers.Util.getElement('url'); var urlObj = OpenLayers.Util.getElement('url');
var value = urlObj.value; var value = urlObj.value;
var parts = value.split("/"); var parts = value.split("/");
var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value); var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value);
@@ -31,12 +32,31 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>GeoRSS in OpenLayers</h1> <h1 id="title">GeoRSS Example</h1>
<p style="font-size:.9em;">This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are currently supported. <a href="http://trac.openlayers.org/wiki/HowToDownload">Get the code!</a></p>
<form onsubmit="return false;"> <div id="tags"></div>
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 id="shortdesc">
<p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page -- for example, entering 'georss.xml' will work by default, because there is a local file in the directory called georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p> Display a couple of locally cached georss feeds on an a basemap.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
<p>This demo uses the OpenLayers GeoRSS parser, which supports GeoRSS Simple and W3C GeoRSS. Only points are
currently supported. The OpenLayers GeoRSS parser will automatically connect an information bubble to the map
markers, similar to Google maps. In addition, the parser can use custom PNG icons for markers. A sample GeoRSS
file (georss.xml) is included.
<form onsubmit="return false;">
GeoRSS URL: <input type="text" id="url" size="50" value="georss.xml" />
<input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
</form>
<p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
for example, entering 'georss.xml' will work by default, because there is a local file in the directory called
georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any
HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
</div>
</body> </body>
</html> </html>

2
examples/georss.xml
View File

@@ -375,4 +375,4 @@
<dc:creator>crschmidt</dc:creator> <dc:creator>crschmidt</dc:creator>
<dc:date>2006-01-03T23:23:26.706763+00:00</dc:date> <dc:date>2006-01-03T23:23:26.706763+00:00</dc:date>
</item> </item>
</rdf:RDF> </rdf:RDF>

51
examples/getfeatureinfo.html
View File

@@ -1,25 +1,35 @@
<html> <html>
<head> <head>
<script src="../lib/OpenLayers.js"></script> <title>OpenLayers Feature Info Example</title>
<style type="text/css"> <script src="../lib/OpenLayers.js"></script>
ul, li { padding-left: 0px; margin-left: 0px; } <style type="text/css">
</style> ul, li { padding-left: 0px; margin-left: 0px; }
<title>World Map Query</title> </style>
</head> </head>
<body> <body>
<a id='permalink' href="">Permalink</a><br /> <h1 id="title">Feature Info Example</h1>
<div style="float:right;width:28%">
<h1 style="font-size:1.3em;">CIA Factbook</h1> <div id="tags"></div>
<p style='font-size:.8em;'>Click a country to see statistics about the country below.</p>
<div id="nodeList"> <p id="shortdesc">
Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV.
</p>
<a id="permalink" href="">Permalink</a><br />
<div style="float:right;width:28%">
<h1 style="font-size:1.3em;">CIA Factbook</h1>
<p style="font-size:.8em;">Click a country to see statistics about the country below.</p>
<div id="nodeList">
</div>
</div> </div>
</div> <div id="map" style="width:512px; height:512px"></div>
<div id="map" style="width:70%; height:90%"></div>
<script defer="defer" type="text/javascript"> <script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url="; OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
var map = new OpenLayers.Map('map', {'maxResolution':'auto'}); var map = new OpenLayers.Map('map', {'maxResolution':'auto'});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} ); "http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} );
map.addLayer(wms); map.addLayer(wms);
map.addControl(new OpenLayers.Control.Permalink('permalink')); map.addControl(new OpenLayers.Control.Permalink('permalink'));
@@ -39,9 +49,12 @@ ul, li { padding-left: 0px; margin-left: 0px; }
OpenLayers.loadURL(url, '', this, setHTML); OpenLayers.loadURL(url, '', this, setHTML);
OpenLayers.Event.stop(e); OpenLayers.Event.stop(e);
}); });
function setHTML(response) { function setHTML(response) {
OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText; OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
} }
</script> </script>
</body>
<div id="docs">
</div>
</body>
</html> </html>

17
examples/gml-layer.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GML Layer Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -16,7 +17,7 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833)); map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833));
@@ -25,6 +26,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">GML Layer Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Loads locally stored GML vector data on a basemap. Includes GML example file.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

63
examples/gml-serialize.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers GML Serialization Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -15,14 +16,14 @@
var name = prompt("Name for feature?"); var name = prompt("Name for feature?");
feature.attributes['name'] = name; feature.attributes['name'] = name;
var data = g.write(feature.layer.features); var data = g.write(feature.layer.features);
OpenLayers.Util.getElement("gml").value = data; OpenLayers.Util.getElement("gml").value = data;
} }
function init(){ function init(){
g = new OpenLayers.Format.GML(); g = new OpenLayers.Format.GML();
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var pointLayer = new OpenLayers.Layer.Vector("Point Layer"); var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
pointLayer.onFeatureInsert = serialize; pointLayer.onFeatureInsert = serialize;
@@ -30,18 +31,18 @@
map.addLayers([wmsLayer, pointLayer]); map.addLayers([wmsLayer, pointLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
drawControls = { drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer, point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point), OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(pointLayer, line: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Path) OpenLayers.Handler.Path)
}; };
for(var key in drawControls) { for(var key in drawControls) {
map.addControl(drawControls[key]); map.addControl(drawControls[key]);
} }
map.setCenter(new OpenLayers.LonLat(0, 0), 3); map.setCenter(new OpenLayers.LonLat(0, 0), 3);
} }
@@ -58,26 +59,38 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Draw Point Example</h1> <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"> <div style="float:right">
<ul id="controlToggle"> <ul id="controlToggle">
<li> <li>
<input type="radio" name="type" value="none" id="noneToggle" <input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" /> onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label> <label for="noneToggle">navigate</label>
</li> </li>
<li> <li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label> <label for="pointToggle">draw point</label>
</li> </li>
<li> <li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label> <label for="lineToggle">draw line</label>
</li> </li>
</ul> </ul>
<p>Check the box to draw points. Uncheck to navigate normally.</p>
<textarea id="gml" cols="80" rows="30"></textarea> <p>Check the box to draw points. Uncheck to navigate normally.</p>
<textarea id="gml" cols="80" rows="30"></textarea>
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

35
examples/google.html
View File

@@ -1,8 +1,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Google Layer Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 512px; height: 512px;
border: 1px solid black; border: 1px solid black;
background-color: red; background-color: red;
@@ -21,19 +22,19 @@
var map, layer; var map, layer;
function init(){ function init(){
map = new OpenLayers.Map( 'map' , map = new OpenLayers.Map( 'map' ,
{ controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20}); { controls: [new OpenLayers.Control.MouseDefaults()] , 'numZoomLevels':20});
var satellite = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} ); var satellite = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );
map.addLayers([satellite]); map.addLayers([satellite]);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic', 'transparent':true}, "http://labs.metacarta.com/wms/vmap0", {layers: 'basic', 'transparent':true},
{isBaseLayer: false} ); {isBaseLayer: false} );
layer.setVisibility(false); layer.setVisibility(false);
var twms = new OpenLayers.Layer.WMS( "World Map", var twms = new OpenLayers.Layer.WMS( "World Map",
"http://world.freemap.in/cgi-bin/mapserv?", "http://world.freemap.in/cgi-bin/mapserv?",
{map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true', {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true',
layers: 'factbook', 'format':'png'}, {'reproject': true} ); layers: 'factbook', 'format':'png'}, {'reproject': true} );
map.addLayer(twms); map.addLayer(twms);
@@ -45,14 +46,14 @@
map.addControl( new OpenLayers.Control.PanZoomBar() ); map.addControl( new OpenLayers.Control.PanZoomBar() );
} }
function add() { function add() {
var url = 'http://boston.openguides.org/markers/AQUA.png'; var url = 'http://boston.openguides.org/markers/AQUA.png';
var sz = new OpenLayers.Size(10, 17); var sz = new OpenLayers.Size(10, 17);
var calculateOffset = function(size) { var calculateOffset = function(size) {
return new OpenLayers.Pixel(-(size.w/2), -size.h); return new OpenLayers.Pixel(-(size.w/2), -size.h);
}; };
var icon = new OpenLayers.Icon(url, sz, null, calculateOffset); var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
var barcelona = new OpenLayers.LonLat(2.13134765625, var barcelona = new OpenLayers.LonLat(2.13134765625,
41.37062534198901); 41.37062534198901);
@@ -67,9 +68,21 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers With Google Layer Example</h1> <h1 id="title">Google Layer Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a Google basemap used with boundary and marker overlay layers.
</p>
<div id="map"></div> <div id="map"></div>
<div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
<div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div> <div style="width:512px">
<div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
<div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
</div>
<div id="docs"></div>
</body> </body>
</html> </html>

102
examples/gutter.html
View File

@@ -1,47 +1,57 @@
<html> <html>
<head> <head>
<style type="text/css"> <title>OpenLayers Gutter Example</title>
#map { <style type="text/css">
width: 500px; #map {
height: 300px; width: 521px;
border: 1px solid gray; height: 512px;
} border: 1px solid gray;
p.caption { }
width: 500px; p.caption {
} width: 512px;
</style> }
<script src="../lib/OpenLayers.js"></script> </style>
<script type="text/javascript"> <script src="../lib/OpenLayers.js"></script>
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2; <script type="text/javascript">
var map; OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
window.onload = function() { var map;
options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318, window.onload = function() {
-69.9097, 42.8883), options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318,
maxResolution: 0.0003} -69.9097, 42.8883),
map = new OpenLayers.Map('map', options); maxResolution: 0.0003}
var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)", map = new OpenLayers.Map('map', options);
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&", var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)",
{layers: 'roads_200_40'}, "http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
{gutter: 15}); {layers: 'roads_200_40'},
var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)", {gutter: 15});
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&", var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)",
{layers: 'roads_200_40'}); "http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
map.addLayers([roads, roads15]); {layers: 'roads_200_40'});
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addLayers([roads, roads15]);
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0); map.addControl(new OpenLayers.Control.LayerSwitcher());
} map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0);
</script> }
</head> </script>
<body> </head>
<h1>OpenLayers Gutter Example</h1> <body>
<div id="map"></div> <h1 id="title">Gutter Example</h1>
<p class="caption">
When you render tiles with certain types of symbols, there are artifacts <div id="tags"></div>
at tile edges that make symbology not look continuous. In the center of
the above map (when it first loads), the large orange road is split <p id="shortdesc">
vertically by a tile. Open the layer switcher and change to the layer Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
with a 15 pixel gutter to see how the symbology looks nicer. </p>
</p>
<div id="map"></div>
</body>
<div id="docs">
<p class="caption">
When you render tiles with certain types of symbols, there are artifacts
at tile edges that make symbology not look continuous. In the center of
the above map (when it first loads), the large orange road is split
vertically by a tile. Open the layer switcher and change to the layer
with a 15 pixel gutter to see how the symbology looks nicer.
</p>
</div>
</body>
</html> </html>

35
examples/image-layer.html
View File

@@ -1,12 +1,13 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Image Layer Example</title>
<style type="text/css"> <style type="text/css">
p { p {
width: 512px; width: 512px;
} }
#map { #map {
width: 512px; width: 512px;
height: 256px; height: 512px;
border: 1px solid gray; border: 1px solid gray;
} }
</style> </style>
@@ -17,7 +18,7 @@
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var options = {numZoomLevels: 3}; var options = {numZoomLevels: 3};
var graphic = new OpenLayers.Layer.Image( var graphic = new OpenLayers.Layer.Image(
'City Lights', 'City Lights',
'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif', 'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
@@ -26,7 +27,7 @@
options); options);
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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}, options); {layers: "landsat7"}, options);
map.addLayers([graphic, jpl_wms]); map.addLayers([graphic, jpl_wms]);
@@ -36,15 +37,25 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Image Layer Example</h1> <h1 id="title">Image Layer Example</h1>
<div id="map"></div>
<p> <div id="tags"></div>
The "City Lights" layer above is created from a single web accessible
image. If you construct it without any resolution related options, <p id="shortdesc">
the layer will be given a single resolution based on the extent/size. Demonstrate a single non-tiled image as a selectable base layer.
Otherwise, it behaves much like a regular layer. This is primarily
intended to be used in an overview map - where another layer type
might not make a good overview.
</p> </p>
<div id="map"></div>
<div id="docs">
<p>
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.
Otherwise, it behaves much like a regular layer. This is primarily
intended to be used in an overview map - where another layer type
might not make a good overview.
</p>
</div>
</body> </body>
</html> </html>

16
examples/kamap.html
View File

@@ -1,9 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers KaMap Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -28,7 +29,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">KaMap Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

16
examples/kml-layer.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -16,7 +16,7 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
map.addLayer(new OpenLayers.Layer.GML("KML", "kml/lines.kml", {format: OpenLayers.Format.KML})); map.addLayer(new OpenLayers.Layer.GML("KML", "kml/lines.kml", {format: OpenLayers.Format.KML}));
@@ -25,6 +25,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">KML Layer Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates loading and displaying a KML file on top of a basemap.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"></div>
</body> </body>
</html> </html>

37
examples/layer-opacity.html
View File

@@ -1,12 +1,13 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Layer Opacity Example</title>
<style type="text/css"> <style type="text/css">
body { body {
font-family: sans-serif; font-family: sans-serif;
} }
#map { #map {
width: 512px; width: 512px;
height: 350px; height: 512px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
p { p {
@@ -58,7 +59,7 @@
"http://terraservice.net/ogcmap.ashx", "http://terraservice.net/ogcmap.ashx",
{layers: "DRG"}); {layers: "DRG"});
shade = new OpenLayers.Layer.WMS("Shaded Relief", shade = new OpenLayers.Layer.WMS("Shaded Relief",
"http://ims.cr.usgs.gov/servlet19/com.esri.wms.Esrimap/USGS_EDC_Elev_NED_3", "http://ims.cr.usgs.gov/servlet19/com.esri.wms.Esrimap/USGS_EDC_Elev_NED_3",
{layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'}, {layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'},
{isBaseLayer: false, opacity: 0.3}); {isBaseLayer: false, opacity: 0.3});
map.addLayers([drg, shade]); map.addLayers([drg, shade]);
@@ -68,17 +69,27 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h2>OpenLayers Layer Opacity Example</h2> <h1 id="title">Layer Opacity Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a change in the opacity for an overlay layer.
</p>
<div id="map"></div> <div id="map"></div>
<p>
Note that if you also have the setOpacity method defined on the Layer <div id="docs">
class, you can tweak the layer opacity after it has been added to the map. <p>
</p> Note that if you also have the setOpacity method defined on the Layer
<p>Opacity: class, you can tweak the layer opacity after it has been added to the map.
<a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a> </p>
<input id="opacity" type="text" value="0.3" size="3" disabled="true" /> <p>Opacity:
<a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a> <a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a>
</p> <input id="opacity" type="text" value="0.3" size="3" disabled="true" />
<p class="note">IE users: Wait until the shade layer has finished loading to try this.</p> <a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
</p>
<p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
</div>
</body> </body>
</html> </html>

87
examples/layerLoadMonitoring.html
View File

@@ -1,18 +1,18 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Layer Load Monitoring Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
position: absolute; width: 512px;
top: 5px; height: 512px;
left: 5px;
width: 450px;
height: 475px;
border: 1px solid black; border: 1px solid black;
} }
#controls {
float: left;
text-align: right;
}
#eventsLogID { #eventsLogID {
position: absolute; text-align: left;
top: 5px;
left: 460px;
width: 350px; width: 350px;
height: 475px; height: 475px;
overflow: auto; overflow: auto;
@@ -26,79 +26,79 @@
var lat = 40; var lat = 40;
var zoom = 5; var zoom = 5;
var map, layer; var map, layer;
function init(){ function init(){
eventsLog = OpenLayers.Util.getElement("eventsLogID"); eventsLog = OpenLayers.Util.getElement("eventsLogID");
map = new OpenLayers.Map( 'map' ); map = new OpenLayers.Map( 'map' );
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
buffer0 = new OpenLayers.Layer.WMS( "WMS Buffer 0", buffer0 = new OpenLayers.Layer.WMS( "WMS Buffer 0",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} , {layers: 'basic'} ,
{ singleTile: false, buffer:0} { singleTile: false, buffer:0}
); );
registerEvents(buffer0); registerEvents(buffer0);
buffer1 = new OpenLayers.Layer.WMS( "WMS Buffer 1", buffer1 = new OpenLayers.Layer.WMS( "WMS Buffer 1",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} , {layers: 'basic'} ,
{ singleTile: false, buffer:1} { singleTile: false, buffer:1}
); );
registerEvents(buffer1); registerEvents(buffer1);
buffer2 = new OpenLayers.Layer.WMS( "WMS Buffer 2", buffer2 = new OpenLayers.Layer.WMS( "WMS Buffer 2",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} , {layers: 'basic'} ,
{ singleTile: false, buffer:2 } { singleTile: false, buffer:2 }
); );
registerEvents(buffer2); registerEvents(buffer2);
singleTileLayer = new OpenLayers.Layer.WMS( "Single Tile Layer", singleTileLayer = new OpenLayers.Layer.WMS( "Single Tile Layer",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} , {layers: 'basic'} ,
{ singleTile: true} { singleTile: true}
); );
registerEvents(singleTileLayer); registerEvents(singleTileLayer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
} }
function registerEvents(layer) { function registerEvents(layer) {
layer.logEvent = function(event) { layer.logEvent = function(event) {
eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " + eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " +
this.name + ": " + event; this.name + ": " + event;
} }
layer.events.register("loadstart", layer, function() { layer.events.register("loadstart", layer, function() {
this.logEvent("Load Start"); this.logEvent("Load Start");
}); });
layer.events.register("tileloaded", layer, function() { layer.events.register("tileloaded", layer, function() {
this.logEvent("Tile loaded. " + this.numLoadingTiles + " left."); this.logEvent("Tile loaded. " + this.numLoadingTiles + " left.");
}); });
layer.events.register("loadend", layer, function() { layer.events.register("loadend", layer, function() {
this.logEvent("Load End. Grid:" + this.grid.length + "x" + this.grid[0].length); this.logEvent("Load End. Grid:" + this.grid.length + "x" + this.grid[0].length);
}); });
map.addLayer(layer); map.addLayer(layer);
} }
function getTimeStamp() { function getTimeStamp() {
var date = new Date(); var date = new Date();
var timeParts = [ var timeParts = [
date.getHours(), date.getHours(),
date.getMinutes(), date.getMinutes(),
date.getSeconds() date.getSeconds()
]; ];
var timeStamp = timeParts.join(":"); var timeStamp = timeParts.join(":");
return timeStamp; return timeStamp;
} }
@@ -108,14 +108,25 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">Layer Load Monitoring Example</h1>
<div id="controls">
<div id="tags"></div>
<p id="shortdesc">
Demonstrate a method for monitoring tile loading performance.
</p>
<div id="map" style="float:left;"></div>
<div id="controls">
<div id="eventsLogID"> <div id="eventsLogID">
<b>Events Log:</b> <b>Events Log:</b>
</div> </div>
<input type="button" value="Clear" onclick="clearLog()"/>
</div> </div>
<div style="position:absolute; top: 500px; width: 700px">
<input type="button" value="Clear" style="float:right" onclick="clearLog()"/> <div id="docs">
</div> </div>
</body> </body>
</html> </html>

19
examples/layerswitcher.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Layer Switcher Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -15,12 +16,12 @@
map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')})); map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {'displayInLayerSwitcher':false} ); {layers: 'basic'}, {'displayInLayerSwitcher':false} );
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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}, {'isBaseLayer': false}); {layers: "landsat7"}, {'isBaseLayer': false});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo", var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
@@ -38,13 +39,21 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Layer Switcher Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
</p>
<div id="layerswitcher" style="float:right; width: 20em;"></div> <div id="layerswitcher" style="float:right; width: 20em;"></div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use <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 of the displayInLayerSwitcher option on the Layer to cause it to not display in the
LayerSwitcher.</p> LayerSwitcher.</p>
</div> </div>
</body> </body>
</html> </html>

19
examples/lite.html
View File

@@ -1,14 +1,19 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Basic Single WMS Example</title>
<style type="text/css"> <style type="text/css">
#map { width:512px; height:256px; border:1px solid black; } #map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var map, layer; var map, layer;
function init(){ function init(){
map = new OpenLayers.Map( 'map' ); map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} ); {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
@@ -17,6 +22,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Basic Single WMS Example</h1>
<div id="tags"></div>
<div id="shortdesc">Show a Simple Map</div>
<div id="map"></div> <div id="map"></div>
<div id="docs">
This example shows a very simple layout with minimal controls. This example uses a single WMS base layer.
</div>
</body> </body>
</html> </html>

7
examples/mapserver.html
View File

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

7
examples/mapserver_untiled.html
View File

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

10
examples/markerResize.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Resize a Marker</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -43,8 +44,13 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <div id="title">Resize a Marker</div>
<div id="map"></div> <div id="tags"></div>
<div id="shortdesc">Dynamically resize a marker</div>
<div id="map"></div>
<div id="docs">
This example shows how to create a OpenLayers.Layer.Markers layer, add an icon, put it into a marker, and add the marker to the layer. Once the marker has been added it is possible to use setSize() on the icon in order to resize the marker.
</div>
<div style="background-color:purple" onclick="resize()"> click to resize marker</div> <div style="background-color:purple" onclick="resize()"> click to resize marker</div>
</body> </body>
</html> </html>

10
examples/markers.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Markers Layer Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -46,7 +47,12 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <div id="title">Markers Layer Example</div>
<div id="map"></div> <div id="tags"></div>
<div id="shortdesc">Show markers layer with different markers</div>
<div id="map"></div>
<div id="docs">
This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers. Also demonstrated is registering a mousedown effect on a marker.
</div>
</body> </body>
</html> </html>

7
examples/markersTextLayer.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Using a Layer.Text to display markers</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -28,7 +29,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Using a Layer.Text to display markers</h1>
<p id="shortdesc">
The Layer.Text class reads a Tab seperated values file and displays it as markers on
the map.
</p>
<div id="map"></div> <div id="map"></div>
</body> </body>
</html> </html>

6
examples/mm.html
View File

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

3
examples/modify-feature.html
View File

@@ -96,7 +96,8 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3>OpenLayers Modify Feature Example</h3> <h3 id="title">OpenLayers Modify Feature Example</h3>
<div id="shortdesc">A demonstraton of the ModifyFeature control for editing vector features.</div>
<div id="map"></div> <div id="map"></div>
<div id="controls"> <div id="controls">
<ul id="controlToggle"> <ul id="controlToggle">

6
examples/mouse-position.html
View File

@@ -2,6 +2,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head> <head>
<title>MousePosition Control</title>
<style type="text/css"> <style type="text/css">
body { body {
margin: 0; margin: 0;
@@ -35,6 +36,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3 id="title">MousePosition Control</h3>
<p id="shortdesc">
Use the MousePosition Control to display the coordinates of the cursor
inside or outside the map div.
</p>
<div id="map"></div> <div id="map"></div>
<div id="coords"></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> <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>

8
examples/multimap-mercator.html
View File

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

12
examples/multiserver.html
View File

@@ -28,6 +28,18 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Multiple Server URLS</h1>
<div id="tags">
</div>
<p id="shortdesc">
Load your tiles faster by pointing to the same server, but with different urls
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
This is an example of using a WFS layer type.
</div>
</body> </body>
</html> </html>

2
examples/mvs.html
View File

@@ -88,7 +88,7 @@ function runMVS() {
case 'nasa': case 'nasa':
theMVS.addLayer( theMVS.addLayer(
new OpenLayers.Layer.WMS("NASA Mosaic", new OpenLayers.Layer.WMS("NASA Mosaic",
"http://t1.hypercube.telascience.org/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{"EXCEPTIONS" : "application/vnd.ogc.se_inimage", {"EXCEPTIONS" : "application/vnd.ogc.se_inimage",
"format" : "image/jpeg", "format" : "image/jpeg",
layers:"landsat7"} layers:"landsat7"}

8
examples/navtoolbar.html
View File

@@ -9,6 +9,7 @@
} }
</style> </style>
<title>NavToolbar Demo</title>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var lon = 5; var lon = 5;
@@ -16,7 +17,7 @@
var zoom = 5; var zoom = 5;
var map, layer; var map, layer;
function init(){ function init() {
map = new OpenLayers.Map( 'map', { controls: [new OpenLayers.Control.PanZoom()] } ); map = new OpenLayers.Map( 'map', { controls: [new OpenLayers.Control.PanZoom()] } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
@@ -30,6 +31,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3 id="title">NavToolbar Demo</h3>
<p id="shortdesc">
Demo the NavToolbar, a subclass of Control.Panel which shows icons for
navigation.
</p>
<div id="map"></div> <div id="map"></div>
</body> </body>
</html> </html>

6
examples/notile.html
View File

@@ -29,7 +29,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Untiled Example</h1>
<p id="shortdesc">
Create an untiled WMS layer using the singleTile: true, option or the deprecated
WMS.Untiled layer.
</p>
<div id="mapDiv"></div> <div id="mapDiv"></div>
<p> The first layer is an old OpenLayers.Layer.WMS.Untiled layer, using <p> The first layer is an old OpenLayers.Layer.WMS.Untiled layer, using
a default ratio value of 1.5. a default ratio value of 1.5.

102
examples/openmnnd.html
View File

@@ -17,60 +17,60 @@
function init(){ function init(){
OpenLayers.ProxyHost="/proxy/?url="; OpenLayers.ProxyHost="/proxy/?url=";
map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } ); map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} ); ["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} );
map.addLayer(layer); map.addLayer(layer);
wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map"; wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map";
wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'}); wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'});
map.addLayer(wms); map.addLayer(wms);
wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4}); wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4});
// preFeatureInsert can be used to set style before the feature is drawn // preFeatureInsert can be used to set style before the feature is drawn
wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue"; wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
} }
wfs.onFeatureInsert = function(feature) { wfs.onFeatureInsert = function(feature) {
OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length; OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
} }
map.addLayer(wfs); map.addLayer(wfs);
// Or a style can be set on the layer. // Or a style can be set on the layer.
pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'}); OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'});
pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url, pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url,
{'typename':'plat'}, {'typename':'plat'},
{ {
ratio:1.25, ratio:1.25,
minZoomLevel:8, minZoomLevel:8,
extractAttributes: true, extractAttributes: true,
style: pwfsstyle style: pwfsstyle
}); });
pwfs.onFeatureInsert= function(feature) { pwfs.onFeatureInsert= function(feature) {
OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length; OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length;
} }
map.addLayer(pwfs); map.addLayer(pwfs);
rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWIdth: "4"}); OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWIdth: "4"});
rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'}, rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
{ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle}); {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});
rwfs.onFeatureInsert= function(feature) { rwfs.onFeatureInsert= function(feature) {
OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length; OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length;
} }
map.addLayer(rwfs); map.addLayer(rwfs);
map.events.register('moveend', null, function() { map.events.register('moveend', null, function() {
OpenLayers.Util.getElement('stream_features').innerHTML = "0"; OpenLayers.Util.getElement('stream_features').innerHTML = "0";
OpenLayers.Util.getElement('road_features').innerHTML = "0"; OpenLayers.Util.getElement('road_features').innerHTML = "0";
OpenLayers.Util.getElement('plat_features').innerHTML = "0"; OpenLayers.Util.getElement('plat_features').innerHTML = "0";
}); });
var ls = new OpenLayers.Control.LayerSwitcher(); var ls = new OpenLayers.Control.LayerSwitcher();
map.addControl(ls); map.addControl(ls);
@@ -84,10 +84,10 @@
map.addControl(drawControls[key]); map.addControl(drawControls[key]);
} }
drawControls.selectPlat.activate(); drawControls.selectPlat.activate();
map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281)); map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281));
} }
function toggleControl(element) { function toggleControl(element) {
for(key in drawControls) { for(key in drawControls) {
var control = drawControls[key]; var control = drawControls[key];
@@ -100,13 +100,13 @@
} }
var displayedFeature = null; var displayedFeature = null;
function feature_info_hover(feature) { function feature_info_hover(feature) {
if (displayedFeature != feature && if (displayedFeature != feature &&
(!feature.layer.selectedFeatures.length || (!feature.layer.selectedFeatures.length ||
(feature.layer.selectedFeatures[0] == feature))) { (feature.layer.selectedFeatures[0] == feature))) {
feature_info(feature); feature_info(feature);
displayedFeature = feature; displayedFeature = feature;
} }
} }
function feature_info(feature) { function feature_info(feature) {
var html = "<ul>"; var html = "<ul>";
for(var i in feature.attributes) for(var i in feature.attributes)
@@ -119,13 +119,13 @@
<body onload="init()"> <body onload="init()">
<div id="info"> <div id="info">
<ul> <ul>
<li>Streams: Feature Count <span id="stream_features">0</span></li> <li>Streams: Feature Count <span id="stream_features">0</span></li>
<li>Plat: Feature Count <span id="plat_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> <li>Roads: Feature Count <span id="road_features">0</span></li>
</ul> </ul>
<div id="feature_info"> <div id="feature_info">
</div> </div>
<ul> <ul>
<li> <li>
<input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);" /> <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);" />
<label for="selectToggle">select road</label> <label for="selectToggle">select road</label>
@@ -134,8 +134,28 @@
<input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked /> <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
<label for="selectToggle">select polygon</label> <label for="selectToggle">select polygon</label>
</li> </li>
</ul> </ul>
</div> </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"></div>
<div id="docs">
<p>
This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For
more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
In this example there are 4 layers shown on the map. The base layer and parcel layer are created from a WMS serivce using the OpenLayers.Layer.WMS object.
The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
</p>
<p>
Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map. Testing has shown that when
you renderer more than 200 vectors in the browser the performance decreases dramatically. Also features that have a lot of vertices
can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
there where a handful of features that had too many vertices to render without killing the browser resources.
There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth.
You can also get feature attributes from the WFS services using the extractAttribute property. View the source to see the example code.
</p>
</div>
</body> </body>
</html> </html>

7
examples/outOfRangeMarkers.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Using maxResolution to control overlays</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 650px; width: 650px;
@@ -50,7 +51,11 @@
<body onload="init()"> <body onload="init()">
<h3 id="title">Using maxResolution to control overlays</h3>
<p id="shortdesc">
See how to control the maximum resolution for a markers layer,
causing it to not be displayed beyond a certain point.
</p>
<div id="map"></div> <div id="map"></div>
</body> </body>

9
examples/overviewmap.html
View File

@@ -16,6 +16,13 @@
</style> </style>
</head> </head>
<body> <body>
<h1 id="title">Overview Map</h1>
<div id="tags">
</div>
<p id="shortdesc">
Enable a small Overview Map that moves/interacts with your main map.
</p>
<div id="map1"></div> <div id="map1"></div>
<p>The above map has an overview map control that is created with <p>The above map has an overview map control that is created with
the default options. Much like a regular map, the map contained by the default options. Much like a regular map, the map contained by
@@ -39,7 +46,7 @@
var jpl = new OpenLayers.Layer.WMS( var jpl = new OpenLayers.Layer.WMS(
"NASA Global Mosaic", "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"} {layers: "landsat7"}
); );

5
examples/panel.html
View File

@@ -84,6 +84,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3 id="title">Custom Control.Panel</h3>
<p id="shortdesc">
Create a custom control.panel, styled entirely with
CSS, and add your own controls to it.
</p>
<div id="panel"></div> <div id="panel"></div>
<div id="map"></div> <div id="map"></div>
</body> </body>

13
examples/popups.html
View File

@@ -120,7 +120,15 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">Popup Mayhem</h1>
<div id="tags">
</div>
<p id="shortdesc">
All kinds of ways to create and interact with Popups.
</p>
<div id="map"></div>
<p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p> <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: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> <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>
@@ -129,5 +137,8 @@
<div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div> <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div>
<div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div> <div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div>
<div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div> <div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div>
<div id="docs">
Detailed description of this example needs to be written.
</div>
</body> </body>
</html> </html>

7
examples/projected-map.html
View File

@@ -55,6 +55,13 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Layer Projections</h1>
<div id="tags">
</div>
<p id="shortdesc">
Use different (not default) projections with your map
</p>
<div id="map"></div> <div id="map"></div>
<p>When using alternative projections, you still use OpenLayers.LonLat objects, even though <p>When using alternative projections, you still use OpenLayers.LonLat objects, even though
the properties are actually X/Y values at that point.</p> the properties are actually X/Y values at that point.</p>

6
examples/regular-polygons.html
View File

@@ -79,7 +79,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h2>OpenLayers Regular Polygon Example</h2> <h2 id="title">OpenLayers Regular Polygon Example</h2>
<p id="shortdesc">
Shows how to use the RegularPolygon handler to draw features with
different numbers of sides.
</p>
<div id="map"></div> <div id="map"></div>
<div id="config"> <div id="config">

5
examples/resize-features.html
View File

@@ -82,6 +82,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3 id="title">Resize Features Programatically</h3>
<p id="shortdesc">
Demonstration of how to use the geometry resize methods to
change feature sizes programatically.
</p>
<div id="map"></div> <div id="map"></div>
<p>This example demonstrates how features can be resized. There is not yet <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 a control built that provides a tool for resizing, but the geometry.resize

7
examples/restricted-extent.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Restricted Extent Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -40,7 +41,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3>OpenLayers Restricted Extent Example</h3> <h3 id="title">OpenLayers Restricted Extent Example</h3>
<p id="shortdesc">
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"></div>
<p> <p>
Map navigation is limited by a combination of map and layer properties. Map navigation is limited by a combination of map and layer properties.

12
examples/rotate-features.html
View File

@@ -95,9 +95,17 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Rotate vector features</h1>
<div id="tags">
</div>
<p id="shortdesc">
Details on how to create and rotate vector features programmatically
</p>
<div id="map"></div> <div id="map"></div>
<p>This example shows a few features rotating. There is not yet a control <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 built that provides a tool for rotating, but the geometry.rotate method
can be accessed to rotate programmatically.</p> can be accessed to rotate programmatically.</div>
</body> </body>
</html> </html>

6
examples/select-feature-openpopup.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Open Popup on Layer.Vector</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 800px;
@@ -72,7 +73,10 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Draw Feature Example</h1> <h1 id="title">Open Popup on Layer.Vector</h1>
<p id="shortdesc">
Using a Control.SelectFeature, open a popup on click.
</p>
<div id="map"></div> <div id="map"></div>
<ul id="controlToggle"> <ul id="controlToggle">
<li> <li>

8
examples/select-feature.html
View File

@@ -1,6 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>Select Feature</title> <title>SelectFeature Control on Layer.Vector</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
@@ -64,7 +64,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3>OpenLayers Select Feature Example</h3> <h1 id="title">OpenLayers Select Feature Example</h1>
<p id="shortdesc">
Select a feature on hover or click with the Control.SelectFeature on a
vector layer.
</p>
<div id="map"></div> <div id="map"></div>
<ul id="controlToggle"> <ul id="controlToggle">
<li> <li>

5
examples/setextent.html
View File

@@ -4,7 +4,10 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
</head> </head>
<body> <body>
<h1>Setting a Visual Extent</h1> <h1 id="title">Setting a Visual Extent</h1>
<p id='shortdesc'>
Use a boxes layer to visually display the area of interest indicated by a user.
</p>
<p> <p>
Because the ability to set the map to a given extent is limited by the Because the ability to set the map to a given extent is limited by the
current resolutions available, zoomToExtent will not always set the map to current resolutions available, zoomToExtent will not always set the map to

36
examples/spherical-mercator.html
View File

@@ -2,7 +2,7 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 512px; height: 512px;
border: 1px solid gray; border: 1px solid gray;
} }
@@ -15,7 +15,7 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// make map available for easy debugging // make map available for easy debugging
var map; var map;
@@ -51,15 +51,15 @@
var veroad = new OpenLayers.Layer.VirtualEarth( var veroad = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Raods", "Virtual Earth Raods",
{'type': VEMapStyle.Road, 'sphericalMercator': true} {'type': VEMapStyle.Road, 'sphericalMercator': true}
); );
var veaer = new OpenLayers.Layer.VirtualEarth( var veaer = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Aerial", "Virtual Earth Aerial",
{'type': VEMapStyle.Aerial, 'sphericalMercator': true} {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
); );
var vehyb = new OpenLayers.Layer.VirtualEarth( var vehyb = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Hybrid", "Virtual Earth Hybrid",
{'type': VEMapStyle.Hybrid, 'sphericalMercator': true} {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
); );
// create Yahoo layer // create Yahoo layer
var yahoo = new OpenLayers.Layer.Yahoo( var yahoo = new OpenLayers.Layer.Yahoo(
@@ -99,7 +99,7 @@
// create a vector layer for drawing // create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors"); var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb, map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
yahoo, yahoosat, yahoohyb, mapnik, wms, vector]); yahoo, yahoosat, yahoohyb, mapnik, wms, vector]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -113,19 +113,33 @@
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom(); var z = this.map.getZoom();
var limit = Math.pow(2, z); var limit = Math.pow(2, z);
if (y < 0 || y >= limit) { if (y < 0 || y >= limit) {
return OpenLayers.Util.getImagesLocation() + "404.png"; return OpenLayers.Util.getImagesLocation() + "404.png";
} else { } else {
x = ((x % limit) + limit) % limit; x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type; return this.url + z + "/" + x + "/" + y + "." + this.type;
} }
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h3>OpenLayers Spherical Mercator Example</h3> <h1 id="title">OpenLayers Spherical Mercator Example</h1>
<div id="map"></div>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the Spherical Mercator Layers, for overlaying
Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
</p>
<div id="map"></div>
<div id="docs">
This is an example of using googles Mercator projection layers in a map window
</div>
</body> </body>
</html> </html>

22
examples/supports-vector.html
View File

@@ -1,22 +0,0 @@
<html>
<head>
<script>
function set() {
if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG", "1.1") ) {
document.getElementById("svg11").style.background="green";
}
if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVGDOM", "1.1") ) {
document.getElementById("svgdom").style.background="green";
}
}
</script>
</head>
<body onload="set()">
Vector Support:
<br />
Supports SVG 1.1: <div id="svg11" style="width:100px;height:100px;background-color:red"></div>
<br />
Supports SVG DOM: <div id="svgdom" style="width:100px;height:100px;background-color:red"></div>
</body>
</html>

29
examples/tilecache.html
View File

@@ -1,20 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers TileCache Example</title>
<style type="text/css"> <style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map { #map {
width: 100%; width: 512px;
height: 100%; height: 512px;
}
#title {
position: absolute;
left: 1em;
bottom: 1em;
z-index: 5000;
} }
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
@@ -46,10 +36,17 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">TileCache Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates a TileCache layer that loads tiles from from a web accessible disk-based cache only.
</p>
<div id="map"> <div id="map">
<div id="title">
<b>OpenLayers (Read-Only) TileCache Example</b> <div id="docs">
<br />from a web accessible disk-based cache only
</div> </div>
</body> </body>
</html> </html>

38
examples/tms.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Tiled Map Service Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 800px;
@@ -16,7 +17,7 @@
function init(){ function init(){
map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} ); map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
layer = new OpenLayers.Layer.TMS( "TMS", layer = new OpenLayers.Layer.TMS( "TMS",
"http://labs.metacarta.com/wms-c/Basic.py/", {layername: 'basic', type:'png'} ); "http://labs.metacarta.com/wms-c/Basic.py/", {layername: 'basic', type:'png'} );
map.addLayer(layer); map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -24,26 +25,37 @@
} }
function addTMS() { function addTMS() {
l = new OpenLayers.Layer.TMS( l = new OpenLayers.Layer.TMS(
OpenLayers.Util.getElement('layer').value, OpenLayers.Util.getElement('layer').value,
OpenLayers.Util.getElement('url').value, OpenLayers.Util.getElement('url').value,
{ {
'layername': OpenLayers.Util.getElement('layer').value, 'layername': OpenLayers.Util.getElement('layer').value,
'type': OpenLayers.Util.getElement('type').value 'type': OpenLayers.Util.getElement('type').value
}); });
map.addLayer(l); map.addLayer(l);
map.setBaseLayer(l); map.setBaseLayer(l);
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://labs.metacarta.com/wms-c/Basic.py/" /> layer_name <input type="text" id="layer" value="satellite" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit" onclick="addTMS()"/><br /> <h1 id="title">Tiled Map Service Example</h1>
<p>
Example: http://labs.metacarta.com/wms-c/Basic.py/, satellite, jpg<br /> <div id="tags"></div>
The first input must be an HTTP URL pointing to a TMS instance. The second
input must be a layer name available from that instance, and the third must <p id="shortdesc">
be the output format used by that layer. (Any other behavior will result in Demonstrate the initialization and modification of a Tiled Map Service layer.
broken images being displayed.) </p>
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://labs.metacarta.com/wms-c/Basic.py/" /> layer_name <input type="text" id="layer" value="satellite" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit" onclick="addTMS()"/><br />
<p>
Example: http://labs.metacarta.com/wms-c/Basic.py/, satellite, jpg<br />
The first input must be an HTTP URL pointing to a TMS instance. The second
input must be a layer name available from that instance, and the third must
be the output format used by that layer. (Any other behavior will result in
broken images being displayed.)
</p>
</div>
</body> </body>
</html> </html>

24
examples/urban.html
View File

@@ -1,5 +1,6 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers WorldWind Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 800px;
@@ -13,8 +14,8 @@
function init(){ function init(){
var mapOptions = { maxResolution: 1.6, numZoomLevels: 21}; var mapOptions = { maxResolution: 1.6, numZoomLevels: 21};
map = new OpenLayers.Map('map', mapOptions); map = new OpenLayers.Map('map', mapOptions);
var ww = new OpenLayers.Layer.WorldWind( "Urban", var ww = new OpenLayers.Layer.WorldWind( "Urban",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx?", .8, 9, "http://worldwind25.arc.nasa.gov/tile/tile.aspx?", .8, 9,
{T:"104"}, { tileSize: new OpenLayers.Size(512,512) }); {T:"104"}, { tileSize: new OpenLayers.Size(512,512) });
@@ -26,7 +27,24 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">WorldWind Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate the use of a NASA WorldWind base layer.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
<p>
Add the Nasa WorldWind "Urban" layer to your map. The "Urban" layer contains aerial imagery for urban areas only.
</p>
<p>
You can do it with a ...
</p>
</div>
</body> </body>
</html> </html>

39
examples/ve.html
View File

@@ -1,8 +1,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenLayers Virtual Earth Example</title>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 512px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
@@ -13,29 +14,29 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var lon = 5; var lon = 5;
var lat = 40; var lat = 40;
var zoom = 15; var zoom = 15;
var map, velayer, layer; var map, velayer, layer;
function init(){ function init(){
map = new OpenLayers.Map( 'map' , map = new OpenLayers.Map( 'map' ,
{controls:[new OpenLayers.Control.MouseDefaults()]}); {controls:[new OpenLayers.Control.MouseDefaults()]});
velayer = new OpenLayers.Layer.VirtualEarth( "VE", velayer = new OpenLayers.Layer.VirtualEarth( "VE",
{ minZoomLevel: 4, maxZoomLevel: 6, 'type': VEMapStyle.Aerial}); { minZoomLevel: 4, maxZoomLevel: 6, 'type': VEMapStyle.Aerial});
map.addLayer(velayer); map.addLayer(velayer);
var twms = new OpenLayers.Layer.WMS( "World Map", var twms = new OpenLayers.Layer.WMS( "World Map",
"http://world.freemap.in/cgi-bin/mapserv?", "http://world.freemap.in/cgi-bin/mapserv?",
{ map: '/www/freemap.in/world/map/factbooktrans.map', { map: '/www/freemap.in/world/map/factbooktrans.map',
transparent:'true', transparent:'true',
layers: 'factbook', layers: 'factbook',
'format':'png'}, 'format':'png'},
{'reproject': true}); {'reproject': true});
map.addLayer(twms); map.addLayer(twms);
markers = new OpenLayers.Layer.Markers("markers"); markers = new OpenLayers.Layer.Markers("markers");
map.addLayer(markers); map.addLayer(markers);
@@ -43,9 +44,9 @@
map.addControl( new OpenLayers.Control.LayerSwitcher() ); map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.addControl( new OpenLayers.Control.PanZoomBar() ); map.addControl( new OpenLayers.Control.PanZoomBar() );
} }
function add() { function add() {
marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41)); marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41));
markers.addMarker(marker); markers.addMarker(marker);
} }
@@ -56,9 +57,19 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers VE Example</h1> <h1 id="title">Virtual Earth Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates the use of a Virtual Earth base layer.
</p>
<div id="map"></div> <div id="map"></div>
<div style="background-color:green" onclick="add()"> click to add the marker to the map</div> <input type="button" onClick="javascript:add()"value="Add the marker from the map">
<div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div> <input type="button" onClick="javascript:remove()" value="Remove the marker from the map">
<div id="docs">This example demonstrates the ability to add VirtualEarth and the and remove markers.</div>
</body> </body>
</html> </html>

45
examples/vector-features.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -13,7 +13,7 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
@@ -24,14 +24,14 @@
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2; layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1; layer_style.graphicOpacity = 1;
/* /*
* Blue style * Blue style
*/ */
var style_blue = OpenLayers.Util.extend({}, layer_style); var style_blue = OpenLayers.Util.extend({}, layer_style);
style_blue.strokeColor = "blue"; style_blue.strokeColor = "blue";
style_blue.fillColor = "blue"; style_blue.fillColor = "blue";
/* /*
* Green style * Green style
*/ */
@@ -61,9 +61,9 @@
style_mark.graphicXOffset = -(style_mark.graphicWidth/2); // this is the default value style_mark.graphicXOffset = -(style_mark.graphicWidth/2); // this is the default value
style_mark.graphicYOffset = -style_mark.graphicHeight; style_mark.graphicYOffset = -style_mark.graphicHeight;
style_mark.externalGraphic = "../img/marker.png"; style_mark.externalGraphic = "../img/marker.png";
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style}); var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
// create a point feature // create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68); var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue); var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
@@ -71,7 +71,7 @@
var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green); var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68); var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark); var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
// create a line feature from a list of points // create a line feature from a list of points
var pointList = []; var pointList = [];
var newPoint = point; var newPoint = point;
@@ -82,7 +82,7 @@
} }
var lineFeature = new OpenLayers.Feature.Vector( var lineFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(pointList),null,style_green); new OpenLayers.Geometry.LineString(pointList),null,style_green);
// create a polygon feature from a linear ring of points // create a polygon feature from a linear ring of points
var pointList = []; var pointList = [];
for(var p=0; p<6; ++p) { for(var p=0; p<6; ++p) {
@@ -93,12 +93,12 @@
pointList.push(newPoint); pointList.push(newPoint);
} }
pointList.push(pointList[0]); pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList); var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector( var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing])); new OpenLayers.Geometry.Polygon([linearRing]));
map.addLayer(vectorLayer); map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5); map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]); vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]);
@@ -106,10 +106,20 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">Drawing Simple Vector Features Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the shows drawing simple vector features, in different styles.
</p>
<div id="map"></div>
<div id="docs">
<p>This example shows drawing simple vector features -- point, line, polygon <p>This example shows drawing simple vector features -- point, line, polygon
in different styles, created 'manually', by constructing the entire style in different styles, created 'manually', by constructing the entire style
object, via 'copy', extending the default style object, and by object, via 'copy', extending the default style object, and by
inheriting the default style from the layer.</p> inheriting the default style from the layer.</p>
<p>It also shows how to use external graphic files for point features <p>It also shows how to use external graphic files for point features
and how to set their size: If either graphicWidth or graphicHeight is set, and how to set their size: If either graphicWidth or graphicHeight is set,
@@ -118,5 +128,8 @@
and graphicHeight are omitted, pointRadius will be used to set the size and graphicHeight are omitted, pointRadius will be used to set the size
of the image, which will then be twice the value of pointRadius with the of the image, which will then be twice the value of pointRadius with the
original aspect ratio.</p> original aspect ratio.</p>
</div>
</body> </body>
</html> </html>

38
examples/vector-formats.html
View File

@@ -19,15 +19,15 @@
top: 0; top: 0;
left: 1em; left: 1em;
padding: 0; padding: 0;
width: 455px; width: 517px;
} }
#map { #map {
width: 450px; width: 512px;
height: 225px; height: 225px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#input { #input {
width: 450px; width: 512px;
} }
#text { #text {
font-size: 0.85em; font-size: 0.85em;
@@ -38,12 +38,12 @@
#info { #info {
position: relative; position: relative;
padding: 2em 0; padding: 2em 0;
margin-left: 470px; margin-left: 540px;
} }
#output { #output {
font-size: 0.8em; font-size: 0.8em;
width: 100%; width: 100%;
height: 500px; height: 512px;
border: 0; border: 0;
} }
p { p {
@@ -57,15 +57,15 @@
var map, vectors, formats; var map, vectors, formats;
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer"); vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]); map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.EditingToolbar(vectors)); map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
var options = { var options = {
hover: true, hover: true,
onSelect: serialize onSelect: serialize
@@ -73,7 +73,7 @@
var select = new OpenLayers.Control.SelectFeature(vectors, options); var select = new OpenLayers.Control.SelectFeature(vectors, options);
map.addControl(select); map.addControl(select);
select.activate(); select.activate();
formats = { formats = {
wkt: new OpenLayers.Format.WKT(), wkt: new OpenLayers.Format.WKT(),
geojson: new OpenLayers.Format.GeoJSON(), geojson: new OpenLayers.Format.GeoJSON(),
@@ -81,10 +81,10 @@
gml: new OpenLayers.Format.GML(), gml: new OpenLayers.Format.GML(),
kml: new OpenLayers.Format.KML() kml: new OpenLayers.Format.KML()
}; };
map.setCenter(new OpenLayers.LonLat(0, 0), 1); map.setCenter(new OpenLayers.LonLat(0, 0), 1);
} }
function serialize(feature) { function serialize(feature) {
var type = document.getElementById("formatType").value; var type = document.getElementById("formatType").value;
// second argument for pretty printing (geojson only) // second argument for pretty printing (geojson only)
@@ -110,7 +110,7 @@
} else { } else {
bounds.extend(features[i].geometry.getBounds()); bounds.extend(features[i].geometry.getBounds());
} }
} }
vectors.addFeatures(features); vectors.addFeatures(features);
map.zoomToExtent(bounds); map.zoomToExtent(bounds);
@@ -138,7 +138,14 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="leftcol"> <div id="leftcol">
<h2>OpenLayers Vector Formats Example</h2> <h1 id="title">Vector Formats Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows the wide variety of vector formats that open layers supports.
</p>
<div id="map"></div> <div id="map"></div>
<div id="input"> <div id="input">
<p>Use the drop-down below to select the input/output format <p>Use the drop-down below to select the input/output format
@@ -161,6 +168,10 @@
<br /> <br />
<input type="button" value="add feature" onclick="deserialize();" /> <input type="button" value="add feature" onclick="deserialize();" />
</div> </div>
<div id="docs">
</div>
</div> </div>
<div id="info"> <div id="info">
<p>Use the tools to the left to draw new polygons, lines, and points. <p>Use the tools to the left to draw new polygons, lines, and points.
@@ -168,5 +179,6 @@
serialized version below.</p> serialized version below.</p>
<textarea id="output"></textarea> <textarea id="output"></textarea>
</div> </div>
</body> </body>
</html> </html>

79
examples/wfs-scribble.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 80%; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -14,44 +14,44 @@
function init(){ function init(){
map = new OpenLayers.Map('map', {controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink() ]} ); map = new OpenLayers.Map('map', {controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink() ]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms-c/Basic.py", "http://labs.metacarta.com/wms-c/Basic.py",
{layers: 'basic'} ); {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
layer = new OpenLayers.Layer.WFS( "Scribble WFS", layer = new OpenLayers.Layer.WFS( "Scribble WFS",
"/geoserver/wfs", "/geoserver/wfs",
{ typename: 'topp:line' }, { typename: 'topp:line' },
{ {
typename: 'line', typename: 'line',
featureNS: 'http://www.openplans.org/topp', featureNS: 'http://www.openplans.org/topp',
extractAttributes: false extractAttributes: false
} ); } );
map.addLayer(layer); map.addLayer(layer);
var p = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'}); var p = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'});
df = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePath'}); df = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePath'});
df.featureAdded = function(feature) { df.featureAdded = function(feature) {
feature.state = OpenLayers.State.INSERT; feature.state = OpenLayers.State.INSERT;
feature.style['strokeColor'] = "#ff0000"; feature.style['strokeColor'] = "#ff0000";
feature.layer.drawFeature(feature); feature.layer.drawFeature(feature);
} }
p.addControls([ new OpenLayers.Control.Navigation(), df ]); p.addControls([ new OpenLayers.Control.Navigation(), df ]);
map.addControl(p); map.addControl(p);
p.activateControl(p.controls[0]) p.activateControl(p.controls[0])
map.setCenter(new OpenLayers.LonLat(0,0), 3); map.setCenter(new OpenLayers.LonLat(0,0), 3);
} }
function save() { function save() {
for(var i = 0; i < map.layers[1].features.length; i++) { for(var i = 0; i < map.layers[1].features.length; i++) {
var f = map.layers[1].features[i]; var f = map.layers[1].features[i];
f.style['strokeColor'] = '#ee9900'; f.style['strokeColor'] = '#ee9900';
map.layers[1].drawFeature(f); map.layers[1].drawFeature(f);
} }
map.layers[1].commit(); map.layers[1].commit();
return false; return false;
} }
function serialize(type) { function serialize(type) {
var xmls = new XMLSerializer(); var xmls = new XMLSerializer();
var serialize = new OpenLayers.Format[type]({},map.layers[1]); var serialize = new OpenLayers.Format[type]({},map.layers[1]);
@@ -62,18 +62,29 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h2>Draw Lines, Save to GeoServer</h2> <h1 id="title">Scribble on a WFS Example</h1>
<p>Using GeoServer and the WFS-T support in OpenLayers, draw on a map,
save the results, reload the page and see the results still there!<br /> <div id="tags">
Hold shift to turn on freehand mode while drawing.</p> </div>
<div style="float:right; text-align:right;"> <p id="shortdesc">
<a href="#serialize" onclick="serialize('WFS')">Show WFS Transaction</a> | Shows how you can draw features and save to GeoServer.
<a href="#serialize" onclick="serialize('GML')">Export GML</a> | </p>
<a href="#serialize" onclick="serialize('GeoRSS')">Export GeoRSS</a> | <div id="map"></div>
<a href="#" onclick="return save()">Save</a> |
<div id="docs">
Using GeoServer and the WFS-T support in OpenLayers, draw on a map, save the results, reload the page and see the results still there!
Hold shift to turn on freehand mode while drawing. </div>
<div style="float:left; text-align:right;">
<a href="#serialize" onclick="serialize('WFS')">Show WFS Transaction</a> |
<a href="#serialize" onclick="serialize('GML')">Export GML</a> |
<a href="#serialize" onclick="serialize('GeoRSS')">Export GeoRSS</a> |
<a href="#" onclick="return save()">Save</a> |
<a href="#" onclick="map.layers[1].refresh(); return false">Refresh</a> (removes all newly added lines)</div><br /> <a href="#" onclick="map.layers[1].refresh(); return false">Refresh</a> (removes all newly added lines)</div><br />
<div id="map"></div>
<textarea style="display:none" id="serialize" cols="100" rows="10"> <textarea style="display:none" id="serialize" cols="100" rows="10">
</textarea> </textarea>
</div>
</body> </body>
</html> </html>

37
examples/wfs-states.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 80%; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -13,24 +13,39 @@
var map, layer; var map, layer;
function init(){ function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.MouseDefaults() ]} ); map = new OpenLayers.Map('map', {controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.MouseDefaults() ]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms-c/Basic.py", "http://labs.metacarta.com/wms-c/Basic.py",
{layers: 'basic'} ); {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
layer = new OpenLayers.Layer.WFS( "States WFS", layer = new OpenLayers.Layer.WFS( "States WFS",
"/geoserver/wfs", "/geoserver/wfs",
{ typename: 'topp:states' } ); { typename: 'topp:states' } );
map.addLayer(layer); map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078)); map.zoomToExtent(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078));
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h2>GeoServer WFS</h2> <h1 id="title">WFS United States (GeoServer) Example</h1>
<div id="map"></div>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the WFS United States (GeoServer)
</p>
<div id="map"></div>
<div id="docs">see:
See <a href="WFS-js.html">WFS</a> for more info on Geoserver and WFS</div>
</body> </body>
</html> </html>
</div>

70
examples/wfs-t.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -13,57 +13,75 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "State", layer = new OpenLayers.Layer.WMS( "State",
"http://dev.openlayers.org/geoserver/wms", {layers: 'topp:tasmania_state_boundaries'} ); "http://dev.openlayers.org/geoserver/wms", {layers: 'topp:tasmania_state_boundaries'} );
map.addLayer(layer); map.addLayer(layer);
layer = new OpenLayers.Layer.WMS( "Water", layer = new OpenLayers.Layer.WMS( "Water",
"http://dev.openlayers.org/geoserver/wms", {layers: 'topp:tasmania_water_bodies', 'transparent': true, format: 'image/gif' } ); "http://dev.openlayers.org/geoserver/wms", {layers: 'topp:tasmania_water_bodies', 'transparent': true, format: 'image/gif' } );
map.addLayer(layer); map.addLayer(layer);
rlayer = new OpenLayers.Layer.WFS( "Roads", rlayer = new OpenLayers.Layer.WFS( "Roads",
"http://dev.openlayers.org/geoserver/wfs", {typename: 'topp:tasmania_roads'}, "http://dev.openlayers.org/geoserver/wfs", {typename: 'topp:tasmania_roads'},
{ {
typename: 'tasmania_roads', typename: 'tasmania_roads',
featureNS: 'http://www.openplans.org/topp', featureNS: 'http://www.openplans.org/topp',
extractAttributes: false extractAttributes: false
} ); } );
rlayer.onFeatureInsert=function(feature) { feature.style.strokeColor = "#ff0000"; feature.layer.drawFeature(feature); } rlayer.onFeatureInsert=function(feature) { feature.style.strokeColor = "#ff0000"; feature.layer.drawFeature(feature); }
map.addLayer(rlayer); map.addLayer(rlayer);
layer = new OpenLayers.Layer.WFS( "Cities", layer = new OpenLayers.Layer.WFS( "Cities",
"http://dev.openlayers.org/geoserver/wfs", {typename: 'topp:tasmania_cities'}, "http://dev.openlayers.org/geoserver/wfs", {typename: 'topp:tasmania_cities'},
{ {
typename: 'tasmania_cities', typename: 'tasmania_cities',
featureNS: 'http://www.openplans.org/topp', featureNS: 'http://www.openplans.org/topp',
extractAttributes: false extractAttributes: false
} ); } );
map.addLayer(layer); map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
var p = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'}); var p = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'});
df = new OpenLayers.Control.DrawFeature(rlayer, OpenLayers.Handler.Path, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePath'}); df = new OpenLayers.Control.DrawFeature(rlayer, OpenLayers.Handler.Path, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePath'});
df.featureAdded = function(feature) { df.featureAdded = function(feature) {
feature.state = OpenLayers.State.INSERT; feature.state = OpenLayers.State.INSERT;
feature.style['strokeColor'] = "#0000ff"; feature.style['strokeColor'] = "#0000ff";
feature.layer.drawFeature(feature); feature.layer.drawFeature(feature);
} }
dp = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePoint'}); dp = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePoint'});
dp.featureAdded = function(feature) { dp.featureAdded = function(feature) {
var oldgeom = feature.geometry; var oldgeom = feature.geometry;
feature.layer.renderer.eraseGeometry(oldgeom); feature.layer.renderer.eraseGeometry(oldgeom);
feature.geometry = new OpenLayers.Geometry.MultiPoint(oldgeom); feature.geometry = new OpenLayers.Geometry.MultiPoint(oldgeom);
feature.state = OpenLayers.State.INSERT; feature.state = OpenLayers.State.INSERT;
feature.style['strokeColor'] = "#0000ff"; feature.style['strokeColor'] = "#0000ff";
feature.layer.drawFeature(feature); feature.layer.drawFeature(feature);
} }
p.addControls([ new OpenLayers.Control.Navigation(), df, dp ]); p.addControls([ new OpenLayers.Control.Navigation(), df, dp ]);
map.addControl(p); map.addControl(p);
map.zoomToExtent(new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5)); map.zoomToExtent(new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5));
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br />
<a href="#" onclick="map.layers[3].commit();return false">Save Cities</a><br /> <h1 id="title">WFS Example</h1>
<div id="map"></div>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the WFS layer type.
</p>
<a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br />
<a href="#" onclick="map.layers[3].commit();return false">Save Cities</a><br />
<div id="map"></div>
<div id="docs">
This is an example of using a WFS layer type.
</div>
</body> </body>
</html> </html>

6
examples/wfs.html
View File

@@ -29,7 +29,11 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">WFS Points</h1>
<p id='shortdesc'>
Using a Layer.WFS with a featureClass, one can take in XML data
from a WFS class and display it any way you like.
</p>
<div id="map"></div> <div id="map"></div>
</body> </body>
</html> </html>

31
examples/wkt.html
View File

@@ -10,7 +10,7 @@
} }
#map { #map {
width: 512px; width: 512px;
height: 350px; height: 512px;
border: 1px solid gray; border: 1px solid gray;
} }
#controls { #controls {
@@ -31,15 +31,15 @@
var map, vectors, drawControls, wkt; var map, vectors, drawControls, wkt;
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer"); vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]); map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
var options = { var options = {
hover: true, hover: true,
onSelect: displayWKT onSelect: displayWKT
@@ -54,13 +54,13 @@
OpenLayers.Handler.Polygon), OpenLayers.Handler.Polygon),
hover: new OpenLayers.Control.SelectFeature(vectors, options) hover: new OpenLayers.Control.SelectFeature(vectors, options)
}; };
for(var key in drawControls) { for(var key in drawControls) {
map.addControl(drawControls[key]); map.addControl(drawControls[key]);
} }
wkt = new OpenLayers.Format.WKT(); wkt = new OpenLayers.Format.WKT();
map.setCenter(new OpenLayers.LonLat(0, 0), 3); map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true; document.getElementById('noneToggle').checked = true;
} }
@@ -75,7 +75,7 @@
} }
} }
} }
function displayWKT(feature) { function displayWKT(feature) {
var str = wkt.write(feature); var str = wkt.write(feature);
// not a good idea in general, just for this demo // not a good idea in general, just for this demo
@@ -97,7 +97,7 @@
} else { } else {
bounds.extend(features[i].geometry.getBounds()); bounds.extend(features[i].geometry.getBounds());
} }
} }
vectors.addFeatures(features); vectors.addFeatures(features);
map.zoomToExtent(bounds); map.zoomToExtent(bounds);
@@ -110,10 +110,18 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers WKT Example</h1> <h1 id="title">WKT Example</h1>
<div id="info"></div> <div id="info"></div>
<p id="shortdesc">
Shows the use of WKT (Well known text) to draw features in openlayers
</p>
<div id="map"></div> <div id="map"></div>
<div id="controls"> <div id="tags"></div>
<div id="docs">
<div id="controls">
<p>See <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects">Wikipedia</a> <p>See <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects">Wikipedia</a>
for a description and examples of WKT.</p> for a description and examples of WKT.</p>
<div id="wktInput"> <div id="wktInput">
@@ -145,6 +153,7 @@
<label for="hoverToggle">view WKT for feature</label> <label for="hoverToggle">view WKT for feature</label>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</body> </body>
</html> </html>

20
examples/wms-untiled.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 100%; width: 512px;
height: 100%; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -16,7 +16,7 @@
function init(){ function init(){
map = new OpenLayers.Map( 'map' ); map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS.Untiled( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS.Untiled( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
@@ -26,6 +26,20 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title"> WMS Untiled Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows an example of the Untiled wms layer, which requests a single image for the entire map view</a>.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
An untiled map will only request a single image at a time.
</div>
</body> </body>
</html> </html>

25
examples/wms.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -16,7 +16,7 @@
function init(){ function init(){
map = new OpenLayers.Map( 'map' ); map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
@@ -26,6 +26,23 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="map"></div> <h1 id="title">WMS Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows the basic use of openlayers using a WMS layer
</p>
<div id="map"></div>
<div id="docs">
This is an example of how to add an WMS layer to the OpenLayers window. The images are tiled in this instance if you wanted to not use a tiled WMS
please use this example and pass the option <20>singleTile<6C> as true.
</div>
</body> </body>
</html> </html>

35
examples/wmst.html
View File

@@ -3,7 +3,7 @@
<style type="text/css"> <style type="text/css">
#map { #map {
width: 512px; width: 512px;
height: 400px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -13,11 +13,11 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
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/tiles/landsat7", "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}); {layers: "landsat7"});
ia_wms = new OpenLayers.Layer.WMS("Nexrad","http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",{layers:"nexrad-n0r-wmst",transparent:true,format:'image/png',time:"2005-08-29T13:00:00Z"}); ia_wms = new OpenLayers.Layer.WMS("Nexrad","http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",{layers:"nexrad-n0r-wmst",transparent:true,format:'image/png',time:"2005-08-29T13:00:00Z"});
@@ -29,22 +29,31 @@
map.zoomToExtent(new OpenLayers.Bounds(-100.898437,22.148438,-78.398437,39.726563)); map.zoomToExtent(new OpenLayers.Bounds(-100.898437,22.148438,-78.398437,39.726563));
} }
function update_date() { function update_date() {
var string = OpenLayers.Util.getElement('year').value + "-" + var string = OpenLayers.Util.getElement('year').value + "-" +
OpenLayers.Util.getElement('month').value + "-" + OpenLayers.Util.getElement('month').value + "-" +
OpenLayers.Util.getElement('day').value + "T" + OpenLayers.Util.getElement('day').value + "T" +
OpenLayers.Util.getElement('hour').value + ":" + OpenLayers.Util.getElement('hour').value + ":" +
OpenLayers.Util.getElement('minute').value + ":00"; OpenLayers.Util.getElement('minute').value + ":00";
ia_wms.mergeNewParams({'time':string}); ia_wms.mergeNewParams({'time':string});
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title"> WMS Time Example</h1>
<p>WMS-T example: update the times, and the radar image will change. Uses Layer.mergeNewParams to update the date element with the strings from the input fields every time one of them is changed.</p> <div id="tags">
<p>The inputs below describe a timestamp: The minute increments can only be updated in units of 5.</p> </div>
<p id="shortdesc">
Shows the use of the layer WMS-T (time) layer</a>
</p>
<input size="4" type='text' id='year' value="2005" onchange="update_date()"/>-<input size="2" type="text" id="month" value="08" onchange="update_date()"/>-<input size="2" type="text" id="day" value="29" onchange="update_date()" />T<input type="text" size="2" id="hour" value="13" onchange="update_date()" />:<input type="text" size="2" id="minute" value="00" onchange="update_date()" />:00 <input size="4" type='text' id='year' value="2005" onchange="update_date()"/>-<input size="2" type="text" id="month" value="08" onchange="update_date()"/>-<input size="2" type="text" id="day" value="29" onchange="update_date()" />T<input type="text" size="2" id="hour" value="13" onchange="update_date()" />:<input type="text" size="2" id="minute" value="00" onchange="update_date()" />:00
<div id="map"></div> <div id="map"></div>
<div id="docs">
WMS-T example: update the times, and the radar image will change. Uses Layer.mergeNewParams to update the date element with the strings from the input fields every time one of them is changed.
The inputs below describe a timestamp: The minute increments can only be updated in units of 5.
</div>
</body> </body>
</html> </html>

32
examples/worldwind.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -13,13 +13,13 @@
function init(){ function init(){
map = new OpenLayers.Map('map', {'maxResolution': .28125, tileSize: new OpenLayers.Size(512, 512)}); map = new OpenLayers.Map('map', {'maxResolution': .28125, tileSize: new OpenLayers.Size(512, 512)});
ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
ww = new OpenLayers.Layer.WorldWind( "Bathy", ww = new OpenLayers.Layer.WorldWind( "Bathy",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx?", 36, 4, "http://worldwind25.arc.nasa.gov/tile/tile.aspx?", 36, 4,
{T:"bmng.topo.bathy.200406"}); {T:"bmng.topo.bathy.200406"});
ww2 = new OpenLayers.Layer.WorldWind( "LANDSAT", ww2 = new OpenLayers.Layer.WorldWind( "LANDSAT",
"http://worldwind25.arc.nasa.gov/tile/tile.aspx", 2.25, 4, "http://worldwind25.arc.nasa.gov/tile/tile.aspx", 2.25, 4,
{T:"105"}); {T:"105"});
@@ -32,9 +32,21 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">WorldWind layers Example</h1>
<div id="map"></div>
<p>This is a demonstration of using Tiled WorldWind layers. WorldWind requires you to define a "LZTD" -- the 3rd param of the constructor -- and the number of zoom levels it supports. When a worldwind layer is not visible at a given tile level, and empty tile is placed there instead. Note that the maxResolution of the map times 512px, must be a multiple of a power of two different from the LZTD -- in this case, .28125 * 512 is 144, which is 36*4, and 2.25*64.</p> <div id="tags">
<p>This example has a 'Bathy' layer, visible as you zoom out, and a 'landsat' layer, visible as you zoom in, both visible at zoom level 6.</p> </div>
</body> <p id="shortdesc">
Shows the use of the Tiled WorldWind layers.
</p>
<div id="map"></div>
<div id="docs">
This is a demonstration of using Tiled WorldWind layers. WorldWind requires you to define a "LZTD" -- the 3rd param of the constructor -- and the number of zoom levels it supports. When a worldwind layer is not visible at a given tile level, and empty tile is placed there instead. Note that the maxResolution of the map times 512px, must be a multiple of a power of two different from the LZTD -- in this case, .28125 * 512 is 144, which is 36*4, and 2.25*64.
This example has a 'Bathy' layer, visible as you zoom out, and a 'landsat' layer, visible as you zoom in, both visible at zoom level 6.
</div>
</body>
</html> </html>

32
examples/wrapDateLine.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 350px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -12,11 +12,11 @@
var map; var map;
function init(){ function init(){
map = new OpenLayers.Map( 'map', {maxResolution: 1.40625} ); map = new OpenLayers.Map( 'map', {maxResolution: 1.40625} );
var mapserv = new OpenLayers.Layer.MapServer( "OpenLayers Basic", var mapserv = new OpenLayers.Layer.MapServer( "OpenLayers Basic",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {layers: 'basic'},
{wrapDateLine: true} ); {wrapDateLine: true} );
var kamap = new OpenLayers.Layer.KaMap( "Blue Marble NG", var kamap = new OpenLayers.Layer.KaMap( "Blue Marble NG",
"http://www.openlayers.org/world/index.php", "http://www.openlayers.org/world/index.php",
{g: "satellite", map: "world"}, {g: "satellite", map: "world"},
@@ -30,7 +30,7 @@
{wrapDateLine: true, reproject: false}); {wrapDateLine: true, reproject: false});
/* TMS is broken, too */ /* TMS is broken, too */
tms = new OpenLayers.Layer.TMS( "OpenStreetMap", tms = new OpenLayers.Layer.TMS( "OpenStreetMap",
"http://labs.metacarta.com/wms-c/Basic.py/", "http://labs.metacarta.com/wms-c/Basic.py/",
{layername: 'osm-map', type:'png', wrapDateLine: true} ); {layername: 'osm-map', type:'png', wrapDateLine: true} );
@@ -41,7 +41,7 @@
{'maxResolution': .28125, {'maxResolution': .28125,
tileSize: new OpenLayers.Size(512, 512), tileSize: new OpenLayers.Size(512, 512),
wrapDateLine: true}); wrapDateLine: true});
map.addLayers([mapserv, kamap, wms]); map.addLayers([mapserv, kamap, wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.MousePosition());
@@ -52,28 +52,28 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">Wrapping the Date Line</h1> <h1 id="title">Wrapping the Date Line</h1>
<div id="tags"> <div id="tags">
Related to: Related to:
<a href="http://dev.openlayers.org/docs/OpenLayers/Layer/WMS.html">Layer.WMS</a>, <a href="http://dev.openlayers.org/docs/OpenLayers/Layer/WMS.html">Layer.WMS</a>,
<a href="http://dev.openlayers.org/docs2/OpenLayers/Layer/MapServer.html">Layer.MapServer</a>, <a href="http://dev.openlayers.org/docs2/OpenLayers/Layer/MapServer.html">Layer.MapServer</a>,
<a href="http://dev.openlayers.org/docs2/OpenLayers/Layer.html#wrapDateLine">wrapDateLine</a> <a href="http://dev.openlayers.org/docs2/OpenLayers/Layer.html#wrapDateLine">wrapDateLine</a>
</div> </div>
<p id="shortdesc">This example shows the use of the <a href="http://dev.openlayers.org/docs/OpenLayers/Layer.html#wrapDateLine">wrapDateLine</a> layer option on a number of layer types.</p> <p id="shortdesc">Shows how to work around dateline issues, by wrapping the dateline on a number of layer types.</p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p> <p>
This is an example that shows wrapping the date line. Wrapping the This is an example that shows wrapping the date line. Wrapping the
date line is an option on the layer. date line is an option on the layer.
</p> </p>
<p> <p>
You can do it with a 'Layer.WMS' or a 'Layer.MapServer' layer. You can do it with a 'Layer.WMS' or a 'Layer.MapServer' layer.
</p> </p>
<pre id="code"> <pre id="code">
var mapserv = new OpenLayers.Layer.MapServer( "OpenLayers Basic", var mapserv = new OpenLayers.Layer.MapServer( "OpenLayers Basic",
"http://labs.metacarta.com/wms/vmap0", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}, {layers: 'basic'},
<b>{wrapDateLine: true}</b> ); <b>{wrapDateLine: true}</b> );
</pre> </pre>
</div> </div>
</body> </body>
</html> </html>

27
examples/xhtml.html
View File

@@ -6,18 +6,31 @@
<script src="../lib/OpenLayers.js" type="text/javascript"></script> <script src="../lib/OpenLayers.js" type="text/javascript"></script>
</head> </head>
<body style="width:100%"> <body style="width:100%">
<div style="width:100%; height:500px" id="map"></div> <h1 id="title">XHTML Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows openlayers runnig in a XHTML 1.0 Strict Doctype
</p>
<div style="width:512px; height:512px;border:1px black solid;" id="map"></div>
<script defer="defer" type="text/javascript"> <script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms); map.addLayer(wms);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
</script> </script>
<p> <div id="docs">This example shows openlayers using a XHTML 1.0 Strict Doctype click on the below image to validate.
<a href="http://validator.w3.org/check/referer"><img <p>
src="http://www.w3.org/Icons/valid-xhtml10" <a href="http://validator.w3.org/check/referer"><img
alt="Valid XHTML 1.0!" height="31" width="88" /></a> src="http://www.w3.org/Icons/valid-xhtml10"
</p> alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</div>
</body> </body>
</html> </html>

94
examples/xml.html
View File

@@ -28,21 +28,21 @@
ul li { ul li {
padding-left: 0; padding-left: 0;
} }
</style> </style>
<script src="../lib/Firebug/firebug.js" type="text/javascript"></script> <script src="../lib/Firebug/firebug.js" type="text/javascript"></script>
<script src="../lib/OpenLayers.js" type="text/javascript"></script> <script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
var format = new OpenLayers.Format.XML(); var format = new OpenLayers.Format.XML();
var doc = null; var doc = null;
function init() { function init() {
var url = "xml/features.xml"; var url = "xml/features.xml";
OpenLayers.loadURL(url, null, null, loadSuccess, loadFailure); OpenLayers.loadURL(url, null, null, loadSuccess, loadFailure);
} }
function loadSuccess(request) { function loadSuccess(request) {
updateStatus("loaded"); updateStatus("loaded");
if(!request.responseXML.documentElement) { if(!request.responseXML.documentElement) {
@@ -51,11 +51,11 @@
doc = request.responseXML; doc = request.responseXML;
} }
} }
function loadFailure(request) { function loadFailure(request) {
updateStatus("failed to load"); updateStatus("failed to load");
} }
function updateStatus(msg) { function updateStatus(msg) {
document.getElementById("loadStatus").firstChild.nodeValue = msg; document.getElementById("loadStatus").firstChild.nodeValue = msg;
} }
@@ -63,12 +63,12 @@
function updateOutput(text) { function updateOutput(text) {
document.getElementById("output").firstChild.nodeValue = text; document.getElementById("output").firstChild.nodeValue = text;
} }
function write() { function write() {
var text = format.write(doc); var text = format.write(doc);
updateOutput(text); updateOutput(text);
} }
function getElementsByTagNameNS(node, uri, name) { function getElementsByTagNameNS(node, uri, name) {
var nodes = format.getElementsByTagNameNS(node, uri, name); var nodes = format.getElementsByTagNameNS(node, uri, name);
var pieces = []; var pieces = [];
@@ -77,7 +77,7 @@
} }
updateOutput(pieces.join(' ')); updateOutput(pieces.join(' '));
} }
function hasAttributeNS(node, uri, name) { function hasAttributeNS(node, uri, name) {
updateOutput(format.hasAttributeNS(node, uri, name)) updateOutput(format.hasAttributeNS(node, uri, name))
} }
@@ -92,7 +92,7 @@
var attributeValue = format.getAttributeNS(node, uri, name); var attributeValue = format.getAttributeNS(node, uri, name);
updateOutput('"' + attributeValue + '"') updateOutput('"' + attributeValue + '"')
} }
function createElementNS(uri, name) { function createElementNS(uri, name) {
var node = format.createElementNS(uri, name); var node = format.createElementNS(uri, name);
doc.documentElement.appendChild(node); doc.documentElement.appendChild(node);
@@ -106,40 +106,52 @@
} }
window.onload = init; window.onload = init;
//]]> //]]>
</script> </script>
</head> </head>
<body> <body>
<h3>OpenLayers XML Example</h3> <h1 id="title">XML Format Example</h1>
<p>OpenLayers has a very simple XML format class (OpenLayers.Format.XML)
that can be used to read/write XML docs. The methods available on the <div id="tags">
XML format (or parser if you like) allow for reading and writing of the </div>
various XML flavors used by the library - in particular the vector data
formats. It is by no means intended to be a full-fledged XML toolset. <p id="shortdesc">
Additional methods will be added only as needed elsewhere in the Shows the use of the OpenLayers XML format class
library.</p> </p>
<p>This page loads an XML document and demonstrates a few of the methods
available in the parser.</p> <div id="docs">
<p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p> <p>OpenLayers has a very simple XML format class (OpenLayers.Format.XML)
<p>After the XML document loads, see the result of a few of the methods that can be used to read/write XML docs. The methods available on the
below. Assume that you start with the following code: XML format (or parser if you like) allow for reading and writing of the
<br /> various XML flavors used by the library - in particular the vector data
<span class="code"> formats. It is by no means intended to be a full-fledged XML toolset.
var format = new OpenLayers.Format.XML(); Additional methods will be added only as needed elsewhere in the
</span> library.</p>
</p> <p>This page loads an XML document and demonstrates a few of the methods
Sample methods available in the parser.</p>
<ul> <p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p>
<li><a href="javascript:void write();">format.write()</a> - write the XML doc as text</li> <p>After the XML document loads, see the result of a few of the methods
<li><a href="javascript:void getElementsByTagNameNS(doc, 'http://www.opengis.net/gml', 'MultiPolygon');">format.getElementsByTagNameNS()</a> - get all gml:MultiPolygon</li> below. Assume that you start with the following code:
<li><a href="javascript:void hasAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.hasAttributeNS()</a> - test to see schemaLocation attribute exists in the http://www.w3.org/2001/XMLSchema-instance namespace</li> <br />
<li><a href="javascript:void getAttributeNodeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNodeNS()</a> - get schemaLocation attribute in the http://www.w3.org/2001/XMLSchema-instance namespace</li> <span class="code">
<li><a href="javascript:void getAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNS()</a> - get schemaLocation attribute value in the http://www.w3.org/2001/XMLSchema-instance namespace</li> var format = new OpenLayers.Format.XML();
<li><a href="javascript:void createElementNS('http://bar.com/foo', 'foo:TestNode');">format.createElementNS()</a> - create a foo:TestNode element (and append it to the doc)</li> </span>
<li><a href="javascript:void createTextNode('test text ');">format.createTextNode()</a> - create a text node (and append it to the doc)</li> </p>
</ul> Sample methods
Output: <ul>
<div id="output">&nbsp;</div> <li><a href="javascript:void write();">format.write()</a> - write the XML doc as text</li>
<li><a href="javascript:void getElementsByTagNameNS(doc, 'http://www.opengis.net/gml', 'MultiPolygon');">format.getElementsByTagNameNS()</a> - get all gml:MultiPolygon</li>
<li><a href="javascript:void hasAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.hasAttributeNS()</a> - test to see schemaLocation attribute exists in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
<li><a href="javascript:void getAttributeNodeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNodeNS()</a> - get schemaLocation attribute in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
<li><a href="javascript:void getAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNS()</a> - get schemaLocation attribute value in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
<li><a href="javascript:void createElementNS('http://bar.com/foo', 'foo:TestNode');">format.createElementNS()</a> - create a foo:TestNode element (and append it to the doc)</li>
<li><a href="javascript:void createTextNode('test text ');">format.createTextNode()</a> - create a text node (and append it to the doc)</li>
</ul>
Output:
<div id="output">&nbsp;</div>
</div>
</body> </body>
</html> </html>

24
examples/yahoo.html
View File

@@ -15,22 +15,36 @@
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
yahooLayer = new OpenLayers.Layer.Yahoo( "Yahoo"); yahooLayer = new OpenLayers.Layer.Yahoo( "Yahoo");
map.addLayer(yahooLayer); map.addLayer(yahooLayer);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(-5, 40), 4); map.setCenter(new OpenLayers.LonLat(-5, 40), 4);
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1>OpenLayers Example</h1> <h1 id="title">Yahoo Base Layer Example</h1>
<div id="map"></div>
<div id="tags">
</div>
<p id="shortdesc">
Shows how you would add a yahoo layer and add the LayerSwitcher control
</p>
<div id="map"></div>
<div id="docs">
This is an example of how to add a yahoo layer to the OpenLayers window. In order to enable a
yahoo layer. Also shown in this example is the LayerSwitcher() control for toggling between both the yahoo layer and
the open layer WMS.
</div>
</body> </body>
</html> </html>

2
examples/yelp-georss.xml
View File

@@ -144,4 +144,4 @@
<geo:long>-83.4692993164</geo:long> <geo:long>-83.4692993164</geo:long>
<geo:lat>42.3581008911</geo:lat> <geo:lat>42.3581008911</geo:lat>
</entry> </entry>
</feed> </feed>

48
examples/zoomLevels.html
View File

@@ -2,8 +2,8 @@
<head> <head>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 800px; width: 512px;
height: 475px; height: 512px;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
@@ -15,8 +15,8 @@
var map, layer; var map, layer;
function init(){ function init(){
OpenLayers.DOTS_PER_INCH = 72;
var options = { var options = {
// various ways of specifying similar things // various ways of specifying similar things
// resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101], // resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101],
@@ -26,28 +26,58 @@
// maxScale: 10000000, // maxScale: 10000000,
// minScale: 50000000, // minScale: 50000000,
// numZoomLevels: 5, // numZoomLevels: 5,
// units: "dd",
minResolution: "auto", minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1), minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto", maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90), maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
controls: [new OpenLayers.Control.MouseDefaults()] controls: [new OpenLayers.Control.MouseDefaults()]
}; };
map = new OpenLayers.Map( 'map' , options); map = new OpenLayers.Map( 'map' , options);
map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.PanZoomBar());
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}); "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
map.addLayer(layer); map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Zoom Level</h1>
<div id="tags">
</div>
<p id="shortdesc">
This example shows the use of the resolutions layer option on a number of layer types.
</p>
<div id="map"></div> <div id="map"></div>
<div id="docs">
<p>
Set the extent of the viewable map using preset levels of scale available
to the user via the zoom slider bar. You can set the minimum, maximum
scales or resolutions, the number of levels in between and the minimum
and maximum geographic extents in your map's units.
</p>
<p>
Default units for Scale are in inches. Resolution is specified in map units
per pixel where the default map units are decimal degrees(dd).<br/>
scale = resolution * OpenLayers.INCHES_PER_UNIT[units] *
OpenLayers.DOTS_PER_INCH <br/>
You can either set the scale or the resolution, there is no need to set both.
</p>
<p>
You can do it with a ...
</p>
</div>
</body> </body>
</html> </html>

1767
tools/BeautifulSoup.py Normal file
View File

File diff suppressed because it is too large Load Diff

124
tools/exampleparser.py Executable file
View File

@@ -0,0 +1,124 @@
#!/usr/bin/env python
import sys
import os
import re
import urllib2
missing_deps = False
try:
import simplejson
from BeautifulSoup import BeautifulSoup
except ImportError, E:
missing_deps = E
def getListOfOnlineExamples(baseUrl):
"""
useful if you want to get a list of examples a url. not used by default.
"""
html = urllib2.urlopen(baseUrl)
soup = BeautifulSoup(html)
examples = soup.findAll('li')
examples = [example.find('a').get('href') for example in examples]
examples = [example for example in examples if example.endswith('.html')]
examples = [example for example in examples]
return examples
def getListOfExamples(relPath):
"""
returns list of .html filenames within a given path
"""
examples = os.listdir(relPath)
examples = [example for example in examples if example.endswith('.html')]
return examples
def getExampleHtml(location):
"""
returns html of a specific example that is available online or locally
"""
print '.',
if location.startswith('http'):
return urllib2.urlopen(location).read()
else:
f = open(location)
html = f.read()
f.close()
return html
def extractById(soup, tagId, value=None):
"""
returns full contents of a particular tag id
"""
beautifulTag = soup.find(id=tagId)
if beautifulTag:
if beautifulTag.contents:
value = str(beautifulTag.renderContents()).strip()
value = value.replace('\t','')
value = value.replace('\n','')
return value
def getRelatedClasses(html):
"""
parses the html, and returns a list of all OpenLayers Classes
used within (ie what parts of OL the javascript uses).
"""
rawstr = r'''(?P<class>OpenLayers\..*?)\('''
return re.findall(rawstr, html)
def parseHtml(html,ids):
"""
returns dictionary of items of interest
"""
soup = BeautifulSoup(html)
d = {}
for tagId in ids:
d[tagId] = extractById(soup,tagId)
#classes should eventually be parsed from docs - not automatically created.
classes = getRelatedClasses(html)
d['classes'] = classes
return d
if __name__ == "__main__":
if missing_deps:
print "This script requires simplejson and BeautifulSoup. You don't have them. \n(%s)" % E
sys.exit()
if len(sys.argv) > 1:
outFile = open(sys.argv[1],'w')
else:
outFile = open('../doc/examples.js','w')
examplesLocation = '../examples'
print 'Reading examples from %s and writing out to %s' % (examplesLocation, outFile.name)
exampleList = []
docIds = ['title','shortdesc']
#comment out option to create docs from online resource
#examplesLocation = 'http://svn.openlayers.org/sandbox/docs/examples/'
#examples = getListOfOnlineExamples(examplesLocation)
examples = getListOfExamples(examplesLocation)
for example in examples:
url = os.path.join(examplesLocation,example)
html = getExampleHtml(url)
tagvalues = parseHtml(html,docIds)
tagvalues['example'] = example
tagvalues['link'] = url
exampleList.append(tagvalues)
exampleList.sort(key=lambda x:x['example'].lower())
json = simplejson.dumps(exampleList)
#give the json a global variable we can use in our js. This should be replaced or made optional.
json = 'var examples=' + json
outFile.write(json)
outFile.close()
print 'complete'