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

four tabs for spaces

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6497 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2008-03-12 14:51:37 +00:00
parent 90d824041c
commit a54f36650c
60 changed files with 480 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
examples/GMLParser.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>OpenLayers GML Parser</title> <title>OpenLayers GML Parser</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -31,19 +31,19 @@
</script> </script>
</head> </head>
<body onload="load()"> <body onload="load()">
<h1 id="title">GML Parser Example</h1> <h1 id="title">GML Parser Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the operation of the GML parser. Demonstrate the operation of the GML parser.
</p> </p>
<div id="output"></div> <div id="output"></div>
<div id="docs"> <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 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. This markup is dumped to an element in the page.
</div> </div>
</body> </body>
</html> </html>

22
examples/KMLParser.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>OpenLayers KML Parser Example</title> <title>OpenLayers KML Parser Example</title>
<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) {
@@ -28,19 +28,19 @@
</script> </script>
</head> </head>
<body onload="load()"> <body onload="load()">
<h1 id="title">KML Parser Example</h1> <h1 id="title">KML Parser Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the operation of the KML parser. Demonstrate the operation of the KML parser.
</p> </p>
<div id="output"></div> <div id="output"></div>
<div id="docs"> <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 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. This markup is dumped to an element in the page.
</div> </div>
</body> </body>
</html> </html>

70
examples/accessible.html
View File

@@ -29,8 +29,8 @@
text-decoration: underline; text-decoration: underline;
} }
a.api { a.api {
font-size:1em; font-size:1em;
text-decoration:underline; text-decoration:underline;
} }
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
@@ -52,14 +52,14 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Accessible Example</h1> <h1 id="title">Accessible Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate how to use the KeyboardDefaults option parameter for layer types. Demonstrate how to use the KeyboardDefaults option parameter for layer types.
</p> </p>
<table> <table>
<tbody> <tbody>
@@ -111,34 +111,34 @@
</tbody> </tbody>
</table> </table>
<div id="docs"> <div id="docs">
<p>Navigate the map in one of three ways: <p>Navigate the map in one of three ways:
<ul> <ul>
<li>Click on the named links to zoom and pan</li> <li>Click on the named links to zoom and pan</li>
<li>Use following keys to pan and zoom: <li>Use following keys to pan and zoom:
<ul> <ul>
<li>+ (zoom in)</li> <li>+ (zoom in)</li>
<li>- (zoom out)</li> <li>- (zoom out)</li>
<li>up-arrow (pan north)</li> <li>up-arrow (pan north)</li>
<li>down-arrow (pan south)</li> <li>down-arrow (pan south)</li>
<li>left-arrow (pan east)</li> <li>left-arrow (pan east)</li>
<li>right-arrow (pan west)</li> <li>right-arrow (pan west)</li>
</ul> </ul>
</li> </li>
<li>If access keys work for links in your browser, use: <li>If access keys work for links in your browser, use:
<ul> <ul>
<li>i (zoom in)</li> <li>i (zoom in)</li>
<li>o (zoom out)</li> <li>o (zoom out)</li>
<li>n (pan north)</li> <li>n (pan north)</li>
<li>s (pan south)</li> <li>s (pan south)</li>
<li>e (pan east)</li> <li>e (pan east)</li>
<li>w (pan west)</li> <li>w (pan west)</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</p> </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. 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> </div>
</body> </body>
</html> </html>

10
examples/animated_panning.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>Animated Panning of the Map via map.panTo</title> <title>Animated Panning of the Map via map.panTo</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -84,11 +84,11 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">map.panTo Example</h1> <h1 id="title">map.panTo Example</h1>
<div id="tags">map.panTo</div> <div id="tags">map.panTo</div>
<div id="shortdesc">Show animated panning effects in the map</div> <div id="shortdesc">Show animated panning effects in the map</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br /> <p>This is an example of transition effects. If the new random center is in the current extent, the map will pan smoothly. <br />
The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly The random selection will continue until you press it again. Additionally, you can single click in the map to pan smoothly
to that area, or use the pan control to pan smoothly. to that area, or use the pan control to pan smoothly.
</p> </p>

16
examples/attribution.html
View File

@@ -38,16 +38,16 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the attribution layer option on a number of layer types. Shows the use of the attribution layer option on a number of layer types.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
This is an example of how to add an attribution block to the OpenLayers window. In order to use an 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 attribution block, an attribution parameter must be set in each layer that requires attribution. In
addition, an attribution control must be added to the map. addition, an attribution control must be added to the map.
</div> </div>
</body> </body>
</html> </html>

14
examples/baseLayers.html
View File

@@ -12,7 +12,7 @@
} }
#controls #controls
{ {
width: 512px; width: 512px;
} }
</style> </style>
@@ -85,17 +85,17 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
This example shows the use base layers from multiple commercial map image providers. This example shows the use base layers from multiple commercial map image providers.
</p> </p>
<div id="controls"> <div id="controls">
<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: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="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
</div> </div>
<div id="docs"> <div id="docs">
</div> </div>
</body> </body>
</html> </html>

4
examples/buffer.html
View File

@@ -42,13 +42,13 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid. This example shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
Use the buffer property to control how many tiles are included Use the buffer property to control how many tiles are included
outside the visible map area. Default is 2. outside the visible map area. Default is 2.
</div> </div>
</body> </body>

2
examples/click.html
View File

@@ -44,7 +44,7 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
This example shows the use of the register and getLonLatFromViewPortPx functions to trigger events on mouse click. This example shows the use of the register and getLonLatFromViewPortPx functions to trigger events on mouse click.
</p> </p>
<div id="map"></div> <div id="map"></div>

2
examples/controls.html
View File

@@ -53,7 +53,7 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window. Attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
</p> </p>
<a style="float:right" href="" id="permalink">Permalink</a> <a style="float:right" href="" id="permalink">Permalink</a>

14
examples/custom-control-point.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>OpenLayers Custom Control Point Examle</title> <title>OpenLayers Custom Control Point Examle</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -45,14 +45,14 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Custom Control Point Example</h1> <h1 id="title">Custom Control Point Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the addition of a point reporting control to the OpenLayers window. Demonstrate the addition of a point reporting control to the OpenLayers window.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="bounds"></div> <div id="bounds"></div>

2
examples/custom-control.html
View File

@@ -51,7 +51,7 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">Custom Control Example</h1> <h1 id="title">Custom Control Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">

20
examples/custom-style.html
View File

@@ -50,16 +50,16 @@
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p>If you care to modify the style of any OpenLayers element, include <p>If you care to modify the style of any OpenLayers element, include
the default stylesheet as a link and declare any style modifications the default stylesheet as a link and declare any style modifications
below that link. These style declarations can be in other linked below that link. These style declarations can be in other linked
stylesheets or in style tags. In addition, construct your map with stylesheets or in style tags. In addition, construct your map with
options that include {theme: null}. This will disable the default options that include {theme: null}. This will disable the default
method of loading the stylesheet and allow you to declare style rules method of loading the stylesheet and allow you to declare style rules
in your own linked stylesheets or style tags.</p> in your own linked stylesheets or style tags.</p>
<p>This example shows how to declare the font family, size, and color <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 for the mouse position. Note that only the style keys that you want to
modify (change from the default) need to be specified.</p> modify (change from the default) need to be specified.</p>
</div> </div>
</body> </body>
</html> </html>

68
examples/debug.html
View File

@@ -30,44 +30,44 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers. Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.
</p> </p>
<div id="docs"> <div id="docs">
<p>To run OpenLayers in debug mode, include the following script <p>To run OpenLayers in debug mode, include the following script
tag <b>before</b> the tag that loads OpenLayers: tag <b>before</b> the tag that loads OpenLayers:
<pre> &lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt;</pre> <pre> &lt;script src="../lib/Firebug/firebug.js"&gt;&lt;/script&gt;</pre>
The path to firebug.js must be relative to your The path to firebug.js must be relative to your
html file. With this script included calls to OpenLayers.Console html file. With this script included calls to OpenLayers.Console
will be displayed in the Firebug console. For browsers without will be displayed in the Firebug console. For browsers without
the Firebug extension, the script creates a Firebug Lite console. 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> This console can be opened by hitting <b>F12</b> or <b>Ctrl+Shift+L</b>
(<b>?+Shift+L</b> on a Mac). If you want the Firebug Lite console (<b>?+Shift+L</b> on a Mac). If you want the Firebug Lite console
to be open when the page loads, add <b>debug="true"</b> to the opening to be open when the page loads, add <b>debug="true"</b> to the opening
html tag of your page. Open the console and click on the links below html tag of your page. Open the console and click on the links below
to see console calls.</p> to see console calls.</p>
<ul> <ul>
<li> <li>
<a href="javascript: void(consoleLog());">OpenLayers.Console.log()</a> <a href="javascript: void(consoleLog());">OpenLayers.Console.log()</a>
</li> </li>
<li> <li>
<a href="javascript: void(consoleWarn());">OpenLayers.Console.warn()</a> <a href="javascript: void(consoleWarn());">OpenLayers.Console.warn()</a>
</li> </li>
<li> <li>
<a href="javascript: void(consoleError());">OpenLayers.Console.error()</a> <a href="javascript: void(consoleError());">OpenLayers.Console.error()</a>
</li> </li>
<li> <li>
<a href="javascript: void(consoleDir());">OpenLayers.Console.dir()</a> <a href="javascript: void(consoleDir());">OpenLayers.Console.dir()</a>
</li> </li>
<li> <li>
<a href="javascript: void(consoleDirxml());">OpenLayers.Console.dirxml()</a> <a href="javascript: void(consoleDirxml());">OpenLayers.Console.dirxml()</a>
</li> </li>
</ul> </ul>
<p>The Firebug website has a complete list of <p>The Firebug website has a complete list of
<a href="http://www.getfirebug.com/console.html">console calls</a>. <a href="http://www.getfirebug.com/console.html">console calls</a>.
Note that not all are supported with Firebug Lite.</p> Note that not all are supported with Firebug Lite.</p>
</div> </div>
</body> </body>
</html> </html>

12
examples/draw-feature.html
View File

@@ -97,11 +97,11 @@
</ul> </ul>
<div id="docs"> <div id="docs">
<p>Feature digitizing is in freehand mode by default. In freehand mode, the mouse is treated as a pen. <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> 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 <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 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> at any time while drawing.</p>
</div> </div>
</body> </body>
</html> </html>

10
examples/example.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>OpenLayers Example</title> <title>OpenLayers Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -82,11 +82,11 @@
<h1 id="title" style="display:inline;">OpenLayers Example</h1> <h1 id="title" style="display:inline;">OpenLayers Example</h1>
<h3 id="browserHeader" style="display:inline;"></h3> <h3 id="browserHeader" style="display:inline;"></h3>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a simple map with an overlay that includes layer switching controls. Demonstrate a simple map with an overlay that includes layer switching controls.
</p> </p>
<div id="map"></div> <div id="map"></div>

16
examples/fractional-zoom.html
View File

@@ -43,28 +43,28 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Fractional Zoom Example</h1> <h1 id="title">Fractional Zoom Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of a map with fractional (or non-discrete) zoom levels. Shows the use of a map with fractional (or non-discrete) zoom levels.
</p> </p>
<div id="map"></div> <div id="map"></div>
<input type="checkbox" name="fractional" <input type="checkbox" name="fractional"
id="fractional" checked="checked" onclick="update(this)" /> id="fractional" checked="checked" onclick="update(this)" />
<label for="fractional">Fractional Zoom</label> <label for="fractional">Fractional Zoom</label>
(zoom: <span id="zoom"></span>) (zoom: <span id="zoom"></span>)
<br /><br /> <br /><br />
<div id="docs"> <div id="docs">
<p> <p>
Setting the map.fractionalZoom property to true allows zooming to Setting the map.fractionalZoom property to true allows zooming to
an arbitrary level (between the min and max resolutions). This an arbitrary level (between the min and max resolutions). This
can be demonstrated by shift-dragging a box to zoom to an arbitrary can be demonstrated by shift-dragging a box to zoom to an arbitrary
extent. extent.
</p> </p>
</div> </div>
</body> </body>
</html> </html>

16
examples/fullScreen.html
View File

@@ -11,10 +11,10 @@
} }
#text { #text {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left:0px; left:0px;
width: 512px; width: 512px;
} }
</style> </style>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
@@ -46,12 +46,12 @@
<body onload="init()"> <body onload="init()">
<div id="map"></div> <div id="map"></div>
<div id="text"> <div id="text">
<h1 id="title">Full Screen Example</h1> <h1 id="title">Full Screen Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a map that fill the entire browser window. Demonstrate a map that fill the entire browser window.
</p> </p>

4
examples/georss-markers.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>OpenLayers GeoRSS Marker Example</title> <title>OpenLayers GeoRSS Marker Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -35,7 +35,7 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate loading a GeoRSS feed using the GeoRSS parser. Demonstrate loading a GeoRSS feed using the GeoRSS parser.
</p> </p>
<div id="map"></div> <div id="map"></div>

6
examples/georss-serialize.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>OpenLayers GeoRSS Serialize Example</title> <title>OpenLayers GeoRSS Serialize Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -44,11 +44,11 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate serialization of features in a Vector layer to GeoRSS. Demonstrate serialization of features in a Vector layer to GeoRSS.
</p> </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>

22
examples/georss.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>OpenLayers GeoRSS Example</title> <title>OpenLayers GeoRSS Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -38,7 +38,7 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Display a couple of locally cached georss feeds on an a basemap. Display a couple of locally cached georss feeds on an a basemap.
</p> </p>
<div id="map"></div> <div id="map"></div>
@@ -49,15 +49,15 @@
markers, similar to Google maps. In addition, the parser can use custom PNG icons for markers. A sample GeoRSS markers, similar to Google maps. In addition, the parser can use custom PNG icons for markers. A sample GeoRSS
file (georss.xml) is included. file (georss.xml) is included.
<form onsubmit="return false;"> <form onsubmit="return false;">
GeoRSS URL: <input type="text" id="url" size="50" value="georss.xml" /> 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;" /> <input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
</form> </form>
<p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page -- <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page --
for example, entering 'georss.xml' will work by default, because there is a local file in the directory called for example, entering 'georss.xml' will work by default, because there is a local file in the directory called
georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any georss.xml -- 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> HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>
</div> </div>
</body> </body>
</html> </html>

38
examples/getfeatureinfo.html
View File

@@ -1,30 +1,30 @@
<html> <html>
<head> <head>
<title>OpenLayers Feature Info Example</title> <title>OpenLayers Feature Info Example</title>
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
ul, li { padding-left: 0px; margin-left: 0px; } ul, li { padding-left: 0px; margin-left: 0px; }
</style> </style>
</head> </head>
<body> <body>
<h1 id="title">Feature Info Example</h1> <h1 id="title">Feature Info Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV. Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV.
</p> </p>
<a id="permalink" href="">Permalink</a><br /> <a id="permalink" href="">Permalink</a><br />
<div style="float:right;width:28%"> <div style="float:right;width:28%">
<h1 style="font-size:1.3em;">CIA Factbook</h1> <h1 style="font-size:1.3em;">CIA Factbook</h1>
<p style="font-size:.8em;">Click a country to see statistics about the country below.</p> <p style="font-size:.8em;">Click a country to see statistics about the country below.</p>
<div id="nodeList"> <div id="nodeList">
</div> </div>
</div> </div>
<div id="map" style="width:512px; height:512px"></div> <div id="map" style="width:512px; height:512px"></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=";
@@ -55,7 +55,7 @@
} }
</script> </script>
<div id="docs"> <div id="docs">
</div> </div>
</body> </body>
</html> </html>

12
examples/gml-layer.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>OpenLayers GML Layer Example</title> <title>OpenLayers GML Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -27,13 +27,13 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">GML Layer Example</h1> <h1 id="title">GML Layer Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Loads locally stored GML vector data on a basemap. Includes GML example file. Loads locally stored GML vector data on a basemap. Includes GML example file.
</p> </p>
<div id="map"></div> <div id="map"></div>

38
examples/gml-serialize.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>OpenLayers GML Serialization Example</title> <title>OpenLayers GML Serialization Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -65,29 +65,29 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the serialization of features drawn in the OpenLayers window. Demonstrate the serialization of features drawn in the OpenLayers window.
</p> </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> <p>Check the box to draw points. Uncheck to navigate normally.</p>
<textarea id="gml" cols="80" rows="30"></textarea> <textarea id="gml" cols="80" rows="30"></textarea>
</div> </div>
<div id="map"></div> <div id="map"></div>

4
examples/google.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>OpenLayers Google Layer Example</title> <title>OpenLayers Google Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -52,7 +52,7 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a Google basemap used with boundary overlay layer. Demonstrate a Google basemap used with boundary overlay layer.
</p> </p>
<div id="map"></div> <div id="map"></div>

22
examples/gutter.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>OpenLayers Gutter Example</title> <title>OpenLayers Gutter Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -40,19 +40,19 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion. Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p class="caption"> <p class="caption">
When you render tiles with certain types of symbols, there are artifacts 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 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 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 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. with a 15 pixel gutter to see how the symbology looks nicer.
</p> </p>
</div> </div>
</body> </body>
</html> </html>

22
examples/image-layer.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>OpenLayers Image Layer Example</title> <title>OpenLayers Image Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
p { p {
@@ -43,20 +43,20 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a single non-tiled image as a selectable base layer. Demonstrate a single non-tiled image as a selectable base layer.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p> <p>
The "City Lights" layer above is created from a single web accessible The "City Lights" layer above is created from a single web accessible
image. If you construct it without any resolution related options, image. If you construct it without any resolution related options,
the layer will be given a single resolution based on the extent/size. the layer will be given a single resolution based on the extent/size.
Otherwise, it behaves much like a regular layer. This is primarily Otherwise, it behaves much like a regular layer. This is primarily
intended to be used in an overview map - where another layer type intended to be used in an overview map - where another layer type
might not make a good overview. might not make a good overview.
</p> </p>
</div> </div>
</body> </body>
</html> </html>

4
examples/kamap.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>OpenLayers KaMap Example</title> <title>OpenLayers KaMap Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -35,7 +35,7 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance. Demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance.
</p> </p>
<div id="map"></div> <div id="map"></div>

10
examples/kml-layer.html
View File

@@ -33,13 +33,13 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">KML Layer Example</h1> <h1 id="title">KML Layer Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates loading and displaying a KML file on top of a basemap. Demonstrates loading and displaying a KML file on top of a basemap.
</p> </p>
<div id="map"></div> <div id="map"></div>

26
examples/layer-opacity.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>OpenLayers Layer Opacity Example</title> <title>OpenLayers Layer Opacity Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
body { body {
@@ -75,22 +75,22 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a change in the opacity for an overlay layer. Demonstrate a change in the opacity for an overlay layer.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p> <p>
Note that if you also have the setOpacity method defined on the Layer Note that if you also have the setOpacity method defined on the Layer
class, you can tweak the layer opacity after it has been added to the map. class, you can tweak the layer opacity after it has been added to the map.
</p> </p>
<p>Opacity: <p>Opacity:
<a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a> <a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a>
<input id="opacity" type="text" value="0.3" size="3" disabled="true" /> <input id="opacity" type="text" value="0.3" size="3" disabled="true" />
<a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a> <a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
</p> </p>
<p class="note">IE users: Wait until the shade layer has finished loading to try this.</p> <p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
</div> </div>
</body> </body>
</html> </html>

22
examples/layerLoadMonitoring.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>OpenLayers Layer Load Monitoring Example</title> <title>OpenLayers Layer Load Monitoring Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -9,11 +9,11 @@
border: 1px solid black; border: 1px solid black;
} }
#controls { #controls {
float: left; float: left;
text-align: right; text-align: right;
} }
#eventsLogID { #eventsLogID {
text-align: left; text-align: left;
width: 350px; width: 350px;
height: 475px; height: 475px;
overflow: auto; overflow: auto;
@@ -109,22 +109,22 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Layer Load Monitoring Example</h1> <h1 id="title">Layer Load Monitoring Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate a method for monitoring tile loading performance. Demonstrate a method for monitoring tile loading performance.
</p> </p>
<div id="map" style="float:left;"></div> <div id="map" style="float:left;"></div>
<div id="controls"> <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()"/> <input type="button" value="Clear" onclick="clearLog()"/>
</div> </div>
<div id="docs"> <div id="docs">

4
examples/layerswitcher.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>OpenLayers Layer Switcher Example</title> <title>OpenLayers Layer Switcher Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -46,7 +46,7 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates the use of the LayerSwitcher outside of the OpenLayers window. Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
</p> </p>
<div id="layerswitcher" style="float:right; width: 20em;"></div> <div id="layerswitcher" style="float:right; width: 20em;"></div>

14
examples/lite.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>OpenLayers Basic Single WMS Example</title> <title>OpenLayers Basic Single WMS Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -23,16 +23,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Basic Single WMS Example</h1> <h1 id="title">Basic Single WMS Example</h1>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Show a Simple Map</div> <div id="shortdesc">Show a Simple Map</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
This example shows a very simple layout with minimal controls. This example uses a single WMS base layer. This example shows a very simple layout with minimal controls. This example uses a single WMS base layer.
</div> </div>
</body> </body>
</html> </html>

14
examples/mapserver.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>MapServer Layer</title> <title>MapServer Layer</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -30,12 +30,12 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="title">MapServer Layer</div> <div id="title">MapServer Layer</div>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Shows MapServer Layer</div> <div id="shortdesc">Shows MapServer Layer</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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. 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> </div>
</body> </body>
</html> </html>

14
examples/mapserver_untiled.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>MapServer Single Tile Mode</title> <title>MapServer Single Tile Mode</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -23,12 +23,12 @@
</script> </script>
</head> </head>
<body> <body>
<div id="title">MapServer Single Tile Mode</div> <div id="title">MapServer Single Tile Mode</div>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Shows single tile MapServer Layer</div> <div id="shortdesc">Shows single tile MapServer Layer</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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. 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> </div>
</body> </body>
</html> </html>

10
examples/markerResize.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>Resize a Marker</title> <title>Resize a Marker</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -46,11 +46,11 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="title">Resize a Marker</div> <div id="title">Resize a Marker</div>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Dynamically resize a marker</div> <div id="shortdesc">Dynamically resize a marker</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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. 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>
<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>

10
examples/markers.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>Markers Layer Example</title> <title>Markers Layer Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -49,11 +49,11 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<div id="title">Markers Layer Example</div> <div id="title">Markers Layer Example</div>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Show markers layer with different markers</div> <div id="shortdesc">Show markers layer with different markers</div>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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. 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> </div>
</body> </body>
</html> </html>

2
examples/multiserver.html
View File

@@ -34,7 +34,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Load your tiles faster by pointing to the same server, but with different urls Load your tiles faster by pointing to the same server, but with different urls
</p> </p>
<div id="map"></div> <div id="map"></div>

12
examples/navigation-control.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>OpenLayers Navigation Control</title> <title>OpenLayers Navigation Control</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -25,16 +25,16 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Navigation Control</h1> <h1 id="title">Navigation Control</h1>
<div id="tags"></div> <div id="tags"></div>
<div id="shortdesc">Demonstrate Navigation Control features</div> <div id="shortdesc">Demonstrate Navigation Control features</div>
<div id="map"></div> <div id="map"></div>
<a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a> <a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a>
<div id="docs"> <div id="docs">
This example demonstrates a couple features of the Navigation control. The Navigation control controls most map dragging, movement, zooming, etc. In this case, we have a demonstration of how to create a navigation control with no zoom wheel action, which can then be enabled or disabled by the user. This example demonstrates a couple features of the Navigation control. The Navigation control controls most map dragging, movement, zooming, etc. In this case, we have a demonstration of how to create a navigation control with no zoom wheel action, which can then be enabled or disabled by the user.
</div> </div>
</body> </body>
</html> </html>

30
examples/openmnnd.html
View File

@@ -140,23 +140,23 @@
<p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p> <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"> <div id="docs">
<p> <p>
This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML 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 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>. 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. 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. The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
</p> </p>
<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 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 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 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 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. 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. You can also get feature attributes from the WFS services using the extractAttribute property. View the source to see the example code.
</p> </p>
</div> </div>
</body> </body>
</html> </html>

2
examples/overviewmap.html
View File

@@ -22,7 +22,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Enable a small Overview Map that moves/interacts with your main map. Enable a small Overview Map that moves/interacts with your main map.
</p> </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

4
examples/popups.html
View File

@@ -126,7 +126,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
All kinds of ways to create and interact with Popups. All kinds of ways to create and interact with Popups.
</p> </p>
<div id="map"></div> <div id="map"></div>
@@ -139,7 +139,7 @@
<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"> <div id="docs">
Detailed description of this example needs to be written. Detailed description of this example needs to be written.
</div> </div>
</body> </body>
</html> </html>

2
examples/projected-map.html
View File

@@ -61,7 +61,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Use different (not default) projections with your map Use different (not default) projections with your map
</p> </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

2
examples/rotate-features.html
View File

@@ -101,7 +101,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Details on how to create and rotate vector features programmatically Details on how to create and rotate vector features programmatically
</p> </p>
<div id="map"></div> <div id="map"></div>

16
examples/spherical-mercator.html
View File

@@ -142,18 +142,18 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">OpenLayers Spherical Mercator Example</h1> <h1 id="title">OpenLayers Spherical Mercator Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the Spherical Mercator Layers, for overlaying Shows the use of the Spherical Mercator Layers, for overlaying
Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles. Google, Yahoo, Microsoft, and other layers with WMS and TMS tiles.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
</div> </div>
</body> </body>
</html> </html>

10
examples/tilecache.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>OpenLayers TileCache Example</title> <title>OpenLayers TileCache Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -42,14 +42,14 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">TileCache Example</h1> <h1 id="title">TileCache Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates a TileCache layer that loads tiles from from a web Demonstrates a TileCache layer that loads tiles from from a web
accessible disk-based cache only. accessible disk-based cache only.
</p> </p>
<div id="map"></div> <div id="map"></div>

28
examples/tms.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>OpenLayers Tiled Map Service Example</title> <title>OpenLayers Tiled Map Service Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -38,25 +38,25 @@
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Tiled Map Service Example</h1> <h1 id="title">Tiled Map Service Example</h1>
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the initialization and modification of a Tiled Map Service layer. Demonstrate the initialization and modification of a Tiled Map Service layer.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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 /> 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> <p>
Example: http://labs.metacarta.com/wms-c/Basic.py/, satellite, jpg<br /> 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 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 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 be the output format used by that layer. (Any other behavior will result in
broken images being displayed.) broken images being displayed.)
</p> </p>
</div> </div>
</body> </body>
</html> </html>

8
examples/urban.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>OpenLayers WorldWind Example</title> <title>OpenLayers WorldWind Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -33,12 +33,12 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrate the use of a NASA WorldWind base layer. Demonstrate the use of a NASA WorldWind base layer.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p> <p>
Add the Nasa WorldWind "Urban" layer to your map. The "Urban" layer contains aerial imagery for urban areas only. Add the Nasa WorldWind "Urban" layer to your map. The "Urban" layer contains aerial imagery for urban areas only.
</p> </p>
@@ -46,6 +46,6 @@
You can do it with a ... You can do it with a ...
</p> </p>
</div> </div>
</body> </body>
</html> </html>

8
examples/ve.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>OpenLayers Virtual Earth Example</title> <title>OpenLayers Virtual Earth Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css"> <style type="text/css">
#map { #map {
@@ -62,9 +62,9 @@
<div id="tags"></div> <div id="tags"></div>
<p id="shortdesc"> <p id="shortdesc">
Demonstrates the use of a Virtual Earth base layer. Demonstrates the use of a Virtual Earth base layer.
</p> </p>
<div id="map"></div> <div id="map"></div>
<input type="button" onClick="javascript:add()"value="Add the marker from the map"> <input type="button" onClick="javascript:add()"value="Add the marker from the map">

2
examples/vector-features.html
View File

@@ -111,7 +111,7 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the shows drawing simple vector features, in different styles. Shows the use of the shows drawing simple vector features, in different styles.
</p> </p>
<div id="map"></div> <div id="map"></div>

12
examples/vector-formats.html
View File

@@ -161,11 +161,11 @@
<div id="leftcol"> <div id="leftcol">
<h1 id="title">Vector Formats Example</h1> <h1 id="title">Vector Formats Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the wide variety of vector formats that open layers supports. Shows the wide variety of vector formats that open layers supports.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="input"> <div id="input">
@@ -200,7 +200,7 @@
</div> </div>
<div id="docs"> <div id="docs">
</div> </div>
</div> </div>
<div id="info"> <div id="info">

4
examples/wfs-states.html
View File

@@ -37,13 +37,13 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the WFS United States (GeoServer) Shows the use of the WFS United States (GeoServer)
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs">see: <div id="docs">see:
See <a href="WFS-js.html">WFS</a> for more info on Geoserver and WFS</div> See <a href="WFS-js.html">WFS</a> for more info on Geoserver and WFS</div>
</body> </body>
</html> </html>

10
examples/wfs-t.html
View File

@@ -69,15 +69,15 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the WFS layer type. Shows the use of the WFS layer type.
</p> </p>
<a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br /> <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 /> <a href="#" onclick="map.layers[3].commit();return false">Save Cities</a><br />
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
This is an example of using a WFS layer type. Note that it requires a This is an example of using a WFS layer type. Note that it requires a
working GeoServer install, which the OpenLayers project does not maintain; working GeoServer install, which the OpenLayers project does not maintain;
however, if you're interested, you should be able to point this against however, if you're interested, you should be able to point this against
a default GeoServer setup without too much trouble. a default GeoServer setup without too much trouble.

8
examples/wkt.html
View File

@@ -113,15 +113,15 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">WKT Example</h1> <h1 id="title">WKT Example</h1>
<div id="info"></div> <div id="info"></div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of WKT (Well known text) to draw features in openlayers Shows the use of WKT (Well known text) to draw features in openlayers
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="tags"></div> <div id="tags"></div>
<div id="docs"> <div id="docs">
<div id="controls"> <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>

16
examples/wmst.html
View File

@@ -42,17 +42,17 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title"> WMS Time Example</h1> <h1 id="title"> WMS Time Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the layer WMS-T (time) layer</a> Shows the use of the layer WMS-T (time) layer</a>
</p> </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"> <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. 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. The inputs below describe a timestamp: The minute increments can only be updated in units of 5.
</div> </div>
</body> </body>
</html> </html>

20
examples/worldwind.html
View File

@@ -35,18 +35,18 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">WorldWind layers Example</h1> <h1 id="title">WorldWind layers Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the Tiled WorldWind layers. Shows the use of the Tiled WorldWind layers.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <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 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. 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> </div>
</body> </body>
</html> </html>

18
examples/xhtml.html
View File

@@ -11,9 +11,9 @@
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows openlayers runnig in a XHTML 1.0 Strict Doctype Shows openlayers runnig in a XHTML 1.0 Strict Doctype
</p> </p>
<div style="width:512px; height:512px;border:1px black solid;" id="map"></div> <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">
@@ -23,13 +23,13 @@
map.addLayer(wms); map.addLayer(wms);
map.zoomToMaxExtent(); map.zoomToMaxExtent();
</script> </script>
<div id="docs">This example shows openlayers using a XHTML 1.0 Strict Doctype click on the below image to validate. <div id="docs">This example shows openlayers using a XHTML 1.0 Strict Doctype click on the below image to validate.
<p> <p>
<a href="http://validator.w3.org/check/referer"><img <a href="http://validator.w3.org/check/referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a> alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p> </p>
</div> </div>
</body> </body>
</html> </html>

74
examples/xml.html
View File

@@ -112,46 +112,46 @@
</script> </script>
</head> </head>
<body> <body>
<h1 id="title">XML Format Example</h1> <h1 id="title">XML Format Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows the use of the OpenLayers XML format class Shows the use of the OpenLayers XML format class
</p> </p>
<div id="docs"> <div id="docs">
<p>OpenLayers has a very simple XML format class (OpenLayers.Format.XML) <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 that can be used to read/write XML docs. The methods available on the
XML format (or parser if you like) allow for reading and writing of the XML format (or parser if you like) allow for reading and writing of the
various XML flavors used by the library - in particular the vector data 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. formats. It is by no means intended to be a full-fledged XML toolset.
Additional methods will be added only as needed elsewhere in the Additional methods will be added only as needed elsewhere in the
library.</p> library.</p>
<p>This page loads an XML document and demonstrates a few of the methods <p>This page loads an XML document and demonstrates a few of the methods
available in the parser.</p> available in the parser.</p>
<p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p> <p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p>
<p>After the XML document loads, see the result of a few of the methods <p>After the XML document loads, see the result of a few of the methods
below. Assume that you start with the following code: below. Assume that you start with the following code:
<br /> <br />
<span class="code"> <span class="code">
var format = new OpenLayers.Format.XML(); var format = new OpenLayers.Format.XML();
</span> </span>
</p> </p>
Sample methods Sample methods
<ul> <ul>
<li><a href="javascript:void write();">format.write()</a> - write the XML doc as text</li> <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 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 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 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 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 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> <li><a href="javascript:void createTextNode('test text ');">format.createTextNode()</a> - create a text node (and append it to the doc)</li>
</ul> </ul>
Output: Output:
<div id="output">&nbsp;</div> <div id="output">&nbsp;</div>
</div> </div>
</body> </body>
</html> </html>

22
examples/yahoo.html
View File

@@ -32,20 +32,20 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">Yahoo Base Layer Example</h1> <h1 id="title">Yahoo Base Layer Example</h1>
<div id="tags"> <div id="tags">
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Shows how you would add a yahoo layer and add the LayerSwitcher control Shows how you would add a yahoo layer and add the LayerSwitcher control
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
This is an example of how to add a yahoo layer to the OpenLayers window. In order to enable a 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 yahoo layer. Also shown in this example is the LayerSwitcher() control for toggling between both the yahoo layer and
the open layer WMS. the open layer WMS.
</div> </div>
</body> </body>
</html> </html>

28
examples/zoomLevels.html
View File

@@ -27,7 +27,7 @@
// maxScale: 10000000, // maxScale: 10000000,
// minScale: 50000000, // minScale: 50000000,
// numZoomLevels: 5, // numZoomLevels: 5,
// units: "dd", // 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",
@@ -56,29 +56,29 @@
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
This example shows the use of the resolutions layer option on a number of layer types. This example shows the use of the resolutions layer option on a number of layer types.
</p> </p>
<div id="map"></div> <div id="map"></div>
<div id="docs"> <div id="docs">
<p> <p>
Set the extent of the viewable map using preset levels of scale available 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 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 scales or resolutions, the number of levels in between and the minimum
and maximum geographic extents in your map's units. and maximum geographic extents in your map's units.
</p> </p>
<p> <p>
Default units for Scale are in inches. Resolution is specified in map units 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/> per pixel where the default map units are decimal degrees(dd).<br/>
scale = resolution * OpenLayers.INCHES_PER_UNIT[units] * scale = resolution * OpenLayers.INCHES_PER_UNIT[units] *
OpenLayers.DOTS_PER_INCH <br/> OpenLayers.DOTS_PER_INCH <br/>
You can either set the scale or the resolution, there is no need to set both. You can either set the scale or the resolution, there is no need to set both.
</p> </p>
<p> <p>
You can do it with a ... You can do it with a ...
</p> </p>
</div> </div>
</body> </body>
</html> </html>