Moved all the HTML files into examples/.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@302 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2006-05-24 00:22:55 +00:00
parent 45fc70cbc7
commit c90158a2d7
9 changed files with 0 additions and 0 deletions
--- a/examples/example.html
+++ b/examples/example.html
@@ -0,0 +1,44 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        function init(){
+            var map = new OpenLayers.Map('map');
+
+            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic'} );
+
+            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
+                "http://wms.jpl.nasa.gov/wms.cgi", 
+                {layers: "modis,global_mosaic"});
+
+            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
+                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
+                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
+                         "prov_bound,fedlimit,rail,road,popplace",
+                 transparent: "true", format: "image/png" });
+
+            jpl_wms.setVisibility(false);
+            dm_wms.setVisibility(false);
+
+            map.addLayers([ol_wms, jpl_wms, dm_wms]);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+  </body>
+</html>
--- a/examples/freemap.html
+++ b/examples/freemap.html
@@ -0,0 +1,108 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+
+    <style type="text/css">
+    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
+    body {
+	border: 0px;
+	margin: 0px;
+	padding: 0px;
+    }
+    #map {
+	width: 65%;
+	height: 100%;
+	border: 0px;
+	padding: 0px;
+    }
+    </style>
+
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+      <!--
+	var lat = 850000; 
+	var lon = 180000;
+	var zoom = 0;
+        var map, layer;
+
+        function init(){
+	    // these should be object methods or something
+            map = new OpenLayers.Map( $('map'), {maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), maxResolution: 296985/1024, projection:"EPSG:2805" } );
+            var basemap = new OpenLayers.Layer.WMS( "Boston", 
+                "http://boston.freemap.in/cgi-bin/mapserv?",
+                {map: '/www/freemap.in/boston/map/mass.map', layers: 'border,water,roads', format: 'png'} );
+            var rapid = new OpenLayers.Layer.WMS( "Rapid Transit", 
+                "http://boston.freemap.in/cgi-bin/mapserv?",
+                {map: '/www/freemap.in/boston/map/mass.map', layers: 'rapid_transit', format: 'png'} );
+            var buildings = new OpenLayers.Layer.WMS( "Buildings", 
+                "http://boston.freemap.in/cgi-bin/mapserv?",
+                {map: '/www/freemap.in/boston/map/mass.map', layers: 'buildings', format: 'png'} );
+                
+            map.addLayer(basemap);
+            map.addLayer(rapid);
+            map.addLayer(buildings);
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+   function getaddress() {
+      if (!document.getElementById('address').value) {return; }
+                    document.getElementById('status').innerHTML = "Finding address...";
+      var address = document.getElementById('address').value;
+      address = escape(address);
+      addr = "/geocode.cgi?address="+address;
+      var handler = XMLrequest();
+      if (handler) {
+               handler.onreadystatechange=function() {
+                   if (handler.readyState == 4 && handler.status == 200) {
+                   var latlon = handler.responseText;
+                   latlon = latlon.split(",");
+                   if (latlon[1]) {
+                       map.setCenter(new OpenLayers.LonLat(parseFloat(latlon[1]), parseFloat(latlon[0])), 15);
+                       document.getElementById('status').innerHTML = "";
+                   
+                   } else {
+                    document.getElementById('status').innerHTML = "Could not find address, sorry.";
+                   }
+                   }
+               }
+               handler.open("GET", addr, true);
+               handler.send('');
+           }
+   }
+function XMLrequest() {
+xmlhttp={};
+try {
+  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
+} catch (e) {
+  try {
+    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+  } catch (E) { }
+}
+try {
+  xmlhttp = new XMLHttpRequest();
+} catch (e) {}
+return xmlhttp;
+}
+function setLink() {
+	var link = document.getElementById("link");
+	var center = map.getCenter();
+	var zoom = map.getZoom();
+	link.innerHTML="http://boston.freemap.in/?zoom="+zoom+"&amp;lat="+center.lat+"&amp;lon="+center.lon;
+}	
+//      -->
+    </script>
+  </head>
+
+<body onload="init()">
+<div id="right" style="float:right;width:30%;padding:10px;" ><h1>Boston Free Map</h1>Search: <input type="text" id='address' name="address"><input type="submit" value="Go!" onclick="javascript:getaddress()"/>
+<div id="status" style="height:20px;min-height:20px;">&nbsp;</div>
+    <div>Map powered by <a href="http://www.openlayers.org/">OpenLayers</a>
+	 and <a href="http://mapserver.gis.umn.edu/">MapServer</a>.
+         Data downloaded from
+	 <a href="http://www.mass.gov/mgis/">Office of Geographic and Environmental Information (MassGIS)</a>.</div>
+	 <!--<a onclick="setLink(); return false" href="#" id="update">Update Link</a>
+	 <div id="link"></div>-->
+	 </div>
+    <div id="map"></div>
+</body>
+</html>
--- a/examples/google.html
+++ b/examples/google.html
@@ -0,0 +1,41 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+            background-color: red;
+        }
+    </style>
+        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhRi_j0U6kJrkFvY4-OX2XYmEAa76BRzRp6VxiuDC2VfvqtS4n5K7Q_pcQ"
+              type="text/javascript"></script>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var lon = 5;
+        var lat = 40;
+        var zoom = 5;
+        var map, layer;
+
+        function init(){
+            map = new OpenLayers.Map( $('map') );
+            gmap = new OpenLayers.Layer.Google( "Google" );
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
+                
+            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+            map.addLayer(layer);
+            map.addLayer(gmap);
+            map.addControl( new OpenLayers.Control.LayerSwitcher() );
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+  </body>
+</html>
--- a/examples/markers.html
+++ b/examples/markers.html
@@ -0,0 +1,43 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var map, layer;
+
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
+                
+            map.addLayer(layer);
+            var markers = new OpenLayers.Layer.Markers( "Markers" );
+            map.addLayer(markers);
+            var newl = new OpenLayers.Layer.Text( "text", "./textfile.txt" );
+            map.addLayer(newl);
+            var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',new OpenLayers.Size(10,17));
+            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
+            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),icon));
+            marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon);
+            marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); Event.stop(evt); });
+            markers.addMarker(marker); 
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+  </body>
+</html>
--- a/examples/markers2.html
+++ b/examples/markers2.html
@@ -0,0 +1,48 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var map, layer;
+
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
+                
+            map.addLayer(layer);
+            var markers = new OpenLayers.Layer.Markers( "Markers" );
+            map.addLayer(markers);
+            
+            var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',new OpenLayers.Size(10,17));
+            for(lon=-180; lon < 180; lon+=10) {
+                for(lat=-90; lat < 90; lat+=10) {
+                    marker = new OpenLayers.Marker(new OpenLayers.LonLat(lon, lat),icon);
+                    marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); Event.stop(evt); });
+                    markers.addMarker(marker);
+                }
+            }
+//            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),icon));
+//            marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon);
+//            marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); Event.stop(evt); });
+//            markers.addMarker(marker); 
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+  </body>
+</html>
--- a/examples/mvs.html
+++ b/examples/mvs.html
@@ -0,0 +1,107 @@
+<html>
+<!--
+     OpenLayers Map Viewer Service
+
+     Copyright 2005-2006 MetaCarta, Inc., released under the BSD License.
+-->
+<!-- 
+     This probably needs to be renamed index.html for deployment.
+     Specifically, it needs to be the default page for whatever
+     directory it is in.
+-->
+<head>
+
+<script src="lib/OpenLayers.js"></script>
+
+<script>
+
+// From: 
+// <http://www.oreilly.com/catalog/jscript3/chapter/ch13.html#JSCRIPT-CH-WINDOWS-EX-LOC>
+/*
+ * This function parses comma-separated name=value argument pairs from
+ * the query string of the URL. It stores the name=value pairs in 
+ * properties of an object and returns that object.
+ */
+// +pjl changed to split on ampersand, not comma.
+
+function getArgs() {
+    var args = new Object();
+    var query = location.search.substring(1);  // Get query string.
+    var pairs = query.split("&");              // Break at ampersand. //+pjl
+
+    for(var i = 0; i < pairs.length; i++) {
+    var pos = pairs[i].indexOf('=');       // Look for "name=value".
+    if (pos == -1) continue;               // If not found, skip.
+    var argname = pairs[i].substring(0,pos);  // Extract the name.
+    var value = pairs[i].substring(pos+1); // Extract the value.
+    args[argname] = unescape(value);          // Store as a property.
+    }
+    return args;                               // Return the object.
+}
+
+
+function runMVS() {
+    if (document.location.protocol != "file:") {
+        theArgs = getArgs();
+    } else {
+        theArgs = {};
+        theArgs.center = "0,0";
+        theArgs.zoom = "0";            
+        theArgs.data = "textfile.txt";
+    }
+
+
+    // ----
+    // TODO: Handle all this parsing better.
+    var safeArgs = {}
+
+    var DEFAULT_LAT = 0;
+    var DEFAULT_LON = 0;
+    var DEFAULT_ZOOM_LEVEL = 0;
+
+    var IDX_LAT = 0;
+    var IDX_LON = 1;
+
+    safeArgs.centerLat = theArgs.center ? 
+        parseFloat(theArgs.center.split(",")[IDX_LAT]) : DEFAULT_LAT;
+    
+    safeArgs.centerLon = theArgs.center ? 
+        parseFloat(theArgs.center.split(",")[IDX_LON]) : DEFAULT_LON;
+
+    safeArgs.zoom = theArgs.zoom ? parseInt(theArgs.zoom) : DEFAULT_ZOOM_LEVEL;
+
+    safeArgs.data = theArgs.data; // TODO: Make this "safe".
+
+    // -----
+    var theMVS = new OpenLayers.Map($('map'));
+        theMVS.addLayer(
+             new OpenLayers.Layer.WMS("OpenLayers WMS",
+                          "http://octo.metacarta.com/cgi-bin/mapserv",
+                          {"map" : "/mapdata/vmap_wms.map",
+                           layers: 'basic'}
+                          ));
+
+        theMVS.addLayer(
+            new OpenLayers.Layer.WMS("NASA Mosaic", 
+                         "http://wms.jpl.nasa.gov/wms.cgi",
+                         {"EXCEPTIONS" : "application/vnd.ogc.se_inimage",
+                          "format" : "image/jpeg",
+                          layers:"modis,global_mosaic"}
+                         ));
+    theMVS.setCenter(new OpenLayers.LonLat(safeArgs.centerLon, safeArgs.centerLat), safeArgs.zoom);
+
+    if (safeArgs.data) {
+        theMVS.addLayer(new OpenLayers.Layer.Text("Data", safeArgs.data));
+    }
+
+}
+</script>
+</head>
+<body style="margin:0px;"
+      onload="runMVS();">
+<div id="map"
+     style="width: 100%; height: 100%;
+            background: lightyellow;
+           "></div>
+</body>
+</html>
--- a/examples/popups.html
+++ b/examples/popups.html
@@ -0,0 +1,66 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var map, layer, popup;
+
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
+                
+            map.addLayer(layer);
+
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+        
+        function changer() {
+            popup.setBackgroundColor("red");
+            popup.setSize(new OpenLayers.Size(200,20));
+            popup.moveTo(new OpenLayers.Pixel(120,120));
+            popup.setOpacity(.9);
+            popup.setBorder("2px solid");    
+            popup.setContentHTML("High Chickens");            
+        }
+
+        function add() {
+            popup = new OpenLayers.Popup("chicken", 
+                                         new OpenLayers.LonLat(5,40),
+                                         new OpenLayers.Size(200,200),
+                                         "example popup");
+        
+            map.addPopup(popup);
+        }        
+        
+        function destroy() {
+            popup.destroy();
+        }
+
+        function remove() {
+            map.removePopup(popup);
+        }
+
+
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+    <div style="background-color:purple" onclick="add()"> click to add popup to map</div>
+    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
+    <div style="background-color:red" onclick="destroy()"> click to destroy the popup</div>
+    <div style="background-color:green" onclick="remove()"> click to remove the popup from map</div>
+  </body>
+</html>
--- a/examples/textfile.txt
+++ b/examples/textfile.txt
@@ -0,0 +1,4 @@
+point	image
+10,20	http://boston.openguides.org/markers/ORANGE.png
+2,4	http://boston.openguides.org/markers/AQUA.png
+42,-71	http://boston.openguides.org/markers/PURPLE.png
--- a/examples/wfs.html
+++ b/examples/wfs.html
@@ -0,0 +1,40 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
+    <style type="text/css">
+        #map {
+            width: 800px;
+            height: 475px;
+            border: 1px solid black;
+        }
+    </style>
+    <script src="lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        <!--
+        var map, layer;
+
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://octo.metacarta.com/cgi-bin/mapserv",
+                {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'} );
+                
+            map.addLayer(layer);
+
+            layer = new OpenLayers.Layer.WFS( "OpenLayers WFS", 
+                "http://octo.metacarta.com/services/search/WFS",
+                {q: 'dolphins', maxfeatures: 10} );
+                
+            map.addLayer(layer);
+
+            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+        }
+        // -->
+    </script>
+  </head>
+  <body onload="init()">
+    <h1>OpenLayers Example</h1>
+    <div id="map"></div>
+  </body>
+</html>