diff options
| author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
| commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
| tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/tests/manual | |
| parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
| download | postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip | |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/tests/manual')
39 files changed, 2970 insertions, 0 deletions
diff --git a/misc/openlayers/tests/manual/ajax.html b/misc/openlayers/tests/manual/ajax.html new file mode 100644 index 0000000..be038ad --- /dev/null +++ b/misc/openlayers/tests/manual/ajax.html @@ -0,0 +1,49 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>XHR Acceptance Test</title> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var url = "ajax.txt"; + function sendSynchronous(){ + var request = OpenLayers.Request.GET({ + url: url, + async: false, + callback: function() { + document.getElementById('send_sync').value += 'request completed\n'; + } + }); + document.getElementById('send_sync').value += 'other processing\n'; + } + function sendAsynchronous(){ + var request = OpenLayers.Request.GET({ + url: url, + callback: function() { + document.getElementById('send_sync').value += 'request completed\n'; + } + }); + document.getElementById('send_sync').value += 'other processing\n'; + } + function sendAndAbort(){ + var request = OpenLayers.Request.GET({ + url: url, + callback: function() { + document.getElementById('send_sync').value += 'never called\n'; + } + }); + request.abort(); + document.getElementById('send_sync').value += 'other processing\n'; + } + + </script> + </head> + <body > + <button onclick="sendSynchronous()">synchronous</button> + expected output: "request completed" then "other processing"<br /> + <button onclick="sendAsynchronous()">asynchronous</button> + expected output: "other processing" then "request completed"<br /> + <button onclick="sendAndAbort()">send and abort</button> + expected output: "other processing" (and not "never called")<br /> + <textarea id="send_sync" rows="6"></textarea><br /> + <button onclick="document.getElementById('send_sync').value = ''">Clear</button> + </body> +</html> diff --git a/misc/openlayers/tests/manual/ajax.txt b/misc/openlayers/tests/manual/ajax.txt new file mode 100644 index 0000000..b10a427 --- /dev/null +++ b/misc/openlayers/tests/manual/ajax.txt @@ -0,0 +1 @@ +one fake text file
\ No newline at end of file diff --git a/misc/openlayers/tests/manual/alloverlays-mixed.html b/misc/openlayers/tests/manual/alloverlays-mixed.html new file mode 100644 index 0000000..2f8f959 --- /dev/null +++ b/misc/openlayers/tests/manual/alloverlays-mixed.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers Mixed allOverlays Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../theme/default/google.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.6"></script> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + + function init() { + map = new OpenLayers.Map('map', {allOverlays: true}); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + + var osm = new OpenLayers.Layer.OSM("OSM", null, { + visibility: false, + maxResolution: 78271.516953125, + serverResolutions: [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135] + }); + var google = new OpenLayers.Layer.Google("Google"); + var wms = new OpenLayers.Layer.WMS("WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'}, { + opacity: .5, + maxExtent: new OpenLayers.Bounds( + -20037508.34, -20037508.34, 20037508.34, 20037508.34 + ), + wrapDateLine: true + } + ); + + map.addLayers([osm, google, wms]); + + map.setCenter(new OpenLayers.LonLat(0, 0), 3); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Mixed allOverlays Test</h1> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p> + The map image aboved should show a Google layer and an opaque WMS + layer. They both should align (look at the border of West Africa) + </p> + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/arcims-2117.html b/misc/openlayers/tests/manual/arcims-2117.html new file mode 100644 index 0000000..08dc4aa --- /dev/null +++ b/misc/openlayers/tests/manual/arcims-2117.html @@ -0,0 +1,103 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>ArcIMS Test Ticket #2117</title> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var lon = 0; + var lat = 0; + var zoom = 1; + var map, layer; + + function init(){ + OpenLayers.ProxyHost = "../../examples/proxy.cgi?url="; + + map = new OpenLayers.Map( 'map' ); + + var options = { + serviceName: "OpenLayers_Sample", + async: true, + layers: [{ + id:1, + visible:'true', + /*query:{ + where: '1=1', + spatialfilter: true + },*/ + renderer:{ + type: 'valuemaplabel', + lookupfield: 'FIPS_ID', + labelfield: 'FIPS_CNTRY', + exacts:[{ + value: '227', + symbol: { + type: 'text', + antialiasing: 'true', + interval: 6, + blockout: '255,255,255', + font: 'Arial', + fontcolor: '0,0,0', + fontsize: 11, + transparency: 0.7 + } + },{ + value: '150', + symbol: { + type: 'text', + antialiasing: 'true', + interval: 6, + blockout: '255,255,255', + font: 'Arial', + fontcolor: '0,0,0', + fontsize: 11, + transparency: 0.7 + } + },{ + value: '75', + symbol: { + type: 'text', + antialiasing: 'true', + interval: 6, + blockout: '255,255,255', + font: 'Arial', + fontcolor: '0,0,0', + fontsize: 11, + transparency: 0.7 + } + }] + } + }] + }; + + layer = new OpenLayers.Layer.ArcIMS( "Global Sample Map", + "http://sample.avencia.com/servlet/com.esri.esrimap.Esrimap", options ); + map.addLayer(layer); + + map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); + map.addControl( new OpenLayers.Control.LayerSwitcher() ); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">ArcIMS Test Ticket #2117</h1> + + <div id="tags"> + </div> + <p id="shortdesc"> + <a href="http://trac.openlayers.org/ticket/2117">Testing ticket #2117</a> + </p> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + This is an example of a bug in the ArcXML format writer. + If you don't see a map, it's broken. + </div> + + </body> +</html> + + + + diff --git a/misc/openlayers/tests/manual/arkansas.rss b/misc/openlayers/tests/manual/arkansas.rss new file mode 100644 index 0000000..926d357 --- /dev/null +++ b/misc/openlayers/tests/manual/arkansas.rss @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" version="2.0"><channel><title>topp:states</title><description>Feed auto-generated by GeoServer</description><link><![CDATA[http://localhost:8080/geoserver/wms?format_options=ENCODING:simple;&width=512&featureid=states.21&transparent=false&version=1.1.1&service=wms&srs=EPSG:4326&styles=population&height=216&bbox=-124.731422,24.955967,-66.969849,49.371735&request=GetMap&layers=topp:states&format=application/rss+xml]]></link><atom:link href="http://localhost:8080/geoserver/wms?format_options=ENCODING:simple;&width=512&featureid=states.21&transparent=false&version=1.1.1&service=wms&srs=EPSG:4326&styles=population&height=216&bbox=-124.731422,24.955967,-66.969849,49.371735&request=GetMap&layers=topp:states&format=application/rss+xml" rel="self"/><item><title>Arkansas +</title><link><![CDATA[http://localhost:8080/geoserver/wfs?request=getfeature&service=wfs&version=1.0.0&featureid=states.21]]></link><guid><![CDATA[http://localhost:8080/geoserver/wfs?request=getfeature&service=wfs&version=1.0.0&featureid=states.21]]></guid><description><![CDATA[This is the state of Arkansas. +2350725.0 people live in an area of 134875.075 square +kilometers, and only 5096.0 take public transportation. +<br> +<br> + +Map by:<br> <a href="http://topp.openplans.org/geoserver"><img alt="TOPP" src="http://topp.openplans.org/images/logo.jpg"></a> +]]></description><georss:polygon>34.19665500000001 -94.461479 34.508326999999994 -94.452408 34.735504000000006 -94.44574 34.929050000000004 -94.439102 35.400454999999994 -94.428337 35.641003 -94.468269 35.760227 -94.485718 36.106753999999995 -94.542198 36.164444 -94.552895 36.478714 -94.607231 36.489338000000004 -94.617035 36.49095199999999 -94.080849 36.489716 -93.857323 36.489891 -93.59626 36.490196 -93.328163 36.490616 -93.297142 36.489819 -92.852104 36.489918 -92.777466 36.490855999999994 -92.522888 36.491596 -92.146164 36.491371 -92.127487 36.490955 -91.688416 36.490376 -91.45285 36.491039 -91.411659 36.487953000000005 -91.133827 36.489204 -90.804314 36.490962999999994 -90.581619 36.492751999999996 -90.224373 36.491814000000005 -90.150162 36.45741700000001 -90.137276 36.453896 -90.117226 36.422565000000006 -90.123833 36.404915 -90.116829 36.39738800000001 -90.080177 36.382553 -90.052063 36.362606 -90.050201 36.325333 -90.067635 36.300472 -90.049751 36.272273999999996 -90.066093 36.257996000000006 -90.109917 36.21207 -90.131218 36.196940999999995 -90.161308 36.172565000000006 -90.219223 36.161148 -90.232224 36.137089 -90.23484 36.118763 -90.263702 36.115905999999995 -90.284752 36.091656 -90.315239 35.989586 -90.37896 35.991158 -90.283455 35.996838 -89.963203 35.999877999999995 -89.721756 35.966324 -89.713135 35.93782 -89.664192 35.913799 -89.645401 35.894287000000006 -89.649338 35.885647000000006 -89.66465 35.911427 -89.714684 35.915012000000004 -89.737976 35.896812 -89.762909 35.884102 -89.766273 35.871418000000006 -89.757713 35.842037000000005 -89.701439 35.827515000000005 -89.700829 35.807036999999994 -89.735939 35.817420999999996 -89.759796 35.805553 -89.790382 35.774223000000006 -89.799904 35.758269999999996 -89.827042 35.748192 -89.859871 35.754836999999995 -89.909782 35.734268 -89.951035 35.712486 -89.952034 35.676266 -89.929741 35.655972000000006 -89.893402 35.673306 -89.865181 35.671062000000006 -89.857246 35.645222000000004 -89.849197 35.629745 -89.863838 35.633335 -89.877441 35.603104 -89.957047 35.578593999999995 -89.958031 35.546059 -89.921661 35.52923199999999 -89.931175 35.526900999999995 -89.947548 35.532291 -89.962273 35.561676000000006 -89.989586 35.552414 -90.033051 35.542846999999995 -90.040901 35.51244 -90.041817 35.445454 -89.999565 35.417103 -90.046783 35.41341 -90.060295 35.426506 -90.073936 35.472342999999995 -90.074844 35.478207 -90.08223 35.473568 -90.101959 35.442524000000006 -90.137276 35.423716999999996 -90.172676 35.384254 -90.167816 35.383044999999996 -90.140167 35.4076 -90.132469 35.41768999999999 -90.112244 35.418282000000005 -90.085159 35.406527999999994 -90.075478 35.381508 -90.087135 35.365982 -90.105621 35.345591999999996 -90.098701 35.314685999999995 -90.106346 35.30624400000001 -90.15699 35.282566 -90.169746 35.264056999999994 -90.152122 35.263847 -90.105942 35.254397999999995 -90.090103 35.212738 -90.068962 35.191833 -90.073303 35.166916 -90.062431 35.147385 -90.064537 35.12505 -90.082924 35.13653600000001 -90.14373 35.129611999999995 -90.164474 35.10864599999999 -90.178345 35.077827 -90.169083 35.040897 -90.195709 35.048458 -90.291809 35.000693999999996 -90.305351 34.978481 -90.299507 34.94976 -90.248169 34.938903999999994 -90.241898 34.920731 -90.242844 34.896511000000004 -90.266708 34.88269 -90.296272 34.864959999999996 -90.299446 34.851776 -90.301552 34.850266000000005 -90.322823 34.860577000000006 -90.341423 34.841038 -90.403931 34.832268 -90.42231 34.835353999999995 -90.433548 34.872643 -90.427841 34.88618099999999 -90.438087 34.88092399999999 -90.470528 34.857727 -90.474716 34.82521800000001 -90.451904 34.79966400000001 -90.466705 34.76075 -90.448868 34.741198999999995 -90.451431 34.726833 -90.485924 34.729855 -90.504417 34.748371000000006 -90.516968 34.765784999999994 -90.498734 34.789833 -90.501282 34.805603000000005 -90.516045 34.807323 -90.52726 34.790336999999994 -90.547745 34.713252999999995 -90.533279 34.702068 -90.513565 34.704254000000006 -90.469978 34.672039 -90.466225 34.638065 -90.508812 34.636894 -90.538963 34.65180599999999 -90.547546 34.685947 -90.539062 34.700287 -90.561058 34.645611 -90.5793 34.627815 -90.58799 34.604744 -90.577614 34.555649 -90.530617 34.543327000000005 -90.537148 34.532509000000005 -90.565681 34.520222000000004 -90.580345 34.496506 -90.59005 34.453945000000004 -90.574402 34.432998999999995 -90.579124 34.40459799999999 -90.60379 34.36591 -90.657242 34.330006 -90.657814 34.31797400000001 -90.679337 34.320145 -90.689377 34.3634 -90.681137 34.377871999999996 -90.687485 34.37216600000001 -90.75531 34.363913999999994 -90.761856 34.317719 -90.747757 34.278976 -90.758255 34.299957000000006 -90.792526 34.299347 -90.806419 34.277339999999995 -90.823837 34.229534 -90.83136 34.219162 -90.863411 34.250195000000005 -90.928436 34.23467599999999 -90.933708 34.20483 -90.921486 34.190544 -90.822922 34.166172 -90.80751 34.148658999999995 -90.828865 34.147544999999994 -90.846611 34.185649999999995 -90.928917 34.155804 -90.953346 34.125941999999995 -90.942245 34.102749 -90.906311 34.10095200000001 -90.866333 34.040710000000004 -90.886345 34.031288 -90.95047 34.010998 -90.973366 33.994606000000005 -90.975273 33.978874000000005 -90.961128 33.967461 -90.96479 33.960815 -90.986816 33.968372 -91.000259 33.990528 -91.009544 33.985699 -91.031059 34.006096 -91.069695 33.994468999999995 -91.088852 33.974644 -91.075706 33.936306 -91.018463 33.867081 -91.061371 33.843525 -91.054817 33.816586 -91.028854 33.798897 -90.990372 33.78533899999999 -90.984039 33.77154899999999 -90.995377 33.76397299999999 -91.018433 33.769554 -91.043404 33.786525999999995 -91.066391 33.776439999999994 -91.105415 33.780086999999995 -91.136986 33.771820000000005 -91.142891 33.723225 -91.138 33.71244 -91.128944 33.70823300000001 -91.104568 33.719357 -91.056213 33.70549 -91.038826 33.683216 -91.037834 33.662586000000005 -91.083771 33.677527999999995 -91.121048 33.718315000000004 -91.1633 33.708965000000006 -91.211678 33.690723000000006 -91.215141 33.669945 -91.205307 33.637032000000005 -91.154404 33.616161000000005 -91.15065 33.57724399999999 -91.168022 33.57468 -91.187805 33.590481 -91.22673 33.55635100000001 -91.227631 33.539276 -91.213486 33.538506 -91.204102 33.52334999999999 -91.182846 33.512012 -91.180405 33.473395999999994 -91.207642 33.459453999999994 -91.22715 33.443443 -91.232849 33.447388000000004 -91.18177 33.466644 -91.17173 33.504368 -91.174179 33.51178 -91.164978 33.493190999999996 -91.128799 33.469673 -91.118958 33.452831 -91.119713 33.443123 -91.130516 33.422112 -91.19883 33.414299 -91.204163 33.39183 -91.184982 33.388878000000005 -91.137634 33.414897999999994 -91.099129 33.462856 -91.0858 33.466206 -91.073761 33.460010999999994 -91.060982 33.431797 -91.061516 33.410179 -91.07869 33.393406 -91.106941 33.359402 -91.130424 33.322384 -91.141747 33.268505000000005 -91.122505 33.249210000000005 -91.102905 33.29235799999999 -91.076324 33.293575000000004 -91.053833 33.281921 -91.040428 33.245780999999994 -91.054543 33.225697 -91.092003 33.161602 -91.086319 33.145084 -91.095856 33.131069 -91.12133 33.150288 -91.177628 33.140465000000006 -91.195503 33.113224 -91.190536 33.090652000000006 -91.14679 33.065571000000006 -91.11779 33.04727200000001 -91.123985 33.040431999999996 -91.156685 33.021709 -91.160675 33.013039000000006 -91.162132 33.013476999999995 -91.254616 33.013419999999996 -91.427528 33.013874 -91.454353 33.010025 -92.063309 33.016701 -92.717079 33.018135 -92.978828 33.019238 -93.232376 33.021393 -93.478897 33.021152 -93.511742 33.022594 -93.809753 33.023289000000005 -94.03875 33.270325 -94.036507 33.555912000000006 -94.035927 33.577213 -94.061432 33.583954000000006 -94.086655 33.572998 -94.098701 33.567085000000006 -94.155167 33.593773 -94.159515 33.58507899999999 -94.205345 33.557987 -94.210884 33.561535000000006 -94.235367 33.585719999999995 -94.223038 33.592422 -94.237236 33.561736999999994 -94.274544 33.584605999999994 -94.272079 33.589332999999996 -94.278984 33.579853 -94.29882 33.556934 -94.302383 33.57313499999999 -94.328751 33.547684000000004 -94.370758 33.560303000000005 -94.395264 33.572661999999994 -94.372307 33.590042 -94.370628 33.593327 -94.379112 33.57495900000001 -94.393417 33.573486 -94.40657 33.59714099999999 -94.428467 33.596503999999996 -94.443329 33.604347000000004 -94.451553 33.616844 -94.436333 33.636444 -94.435913 33.631966000000006 -94.476486 33.939198000000005 -94.468376 34.19665500000001 -94.461479</georss:polygon></item></channel></rss>
\ No newline at end of file diff --git a/misc/openlayers/tests/manual/big-georss.html b/misc/openlayers/tests/manual/big-georss.html new file mode 100644 index 0000000..7e2f2b5 --- /dev/null +++ b/misc/openlayers/tests/manual/big-georss.html @@ -0,0 +1,33 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>OpenLayers GML Layer Example</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var lon = 5; + var lat = 40; + var zoom = 5; + var map, layer; + + function init(){ + map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); + map.addLayer(layer); + map.zoomToExtent(new OpenLayers.Bounds(-94.617035,33.010025,-89.645401,36.492752)); + map.addLayer(new OpenLayers.Layer.Vector("arkansas", { + protocol: new OpenLayers.Protocol.HTTP({ + url: "arkansas.rss", + format: new OpenLayers.Format.GeoRSS() + }), + strategies: [new OpenLayers.Strategy.Fixed()] + })); + } + </script> + </head> + <body onload="init()"> + <p>Does this map look like arkansas?</p> + <div id="map" class="smallmap"></div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/box-quirks.html b/misc/openlayers/tests/manual/box-quirks.html new file mode 100644 index 0000000..eb74bed --- /dev/null +++ b/misc/openlayers/tests/manual/box-quirks.html @@ -0,0 +1,52 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Box Handler Quirks Mode Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <style type="text/css"> + /* simulate quirks mode (traditional box model) in browsers other than IE */ + div { + box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -webkit-box-sizing: border-box; + } + + .olHandlerBoxZoomBox { + border: 20px solid red; + border-left-width: 10px; + border-bottom-width: 30px; + } + </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://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ); + map.addLayer(layer); + map.zoomToMaxExtent(); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Box handler Quirks Mode Test</h1> + + <div id="shortdesc">Test the correct appearance of the ZoomBox in quirks mode</div> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p>For the box to be positioned correctly, we need to know the + width of the borders.</p> + <p>Shift-click on the map. A red box should be visible around the mouse + cursor position, with 20 pixels to the top and right, 10 pixels to + the left and 30 pixels to the bottom edge of the box.</p> + <p>Drag the box both to the top-left and the bottom-right. The cursor + should always be at the top-left or bottom-right inner corner of + the box.</p> + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/box-strict.html b/misc/openlayers/tests/manual/box-strict.html new file mode 100644 index 0000000..5b38ea5 --- /dev/null +++ b/misc/openlayers/tests/manual/box-strict.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <title>Box Handler Strict Mode Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <style type="text/css"> + .olHandlerBoxZoomBox { + border: 20px solid red; + border-left-width: 10px; + border-bottom-width: 30px; + } + </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://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ); + map.addLayer(layer); + map.zoomToMaxExtent(); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Box Handler Strict Mode Test</h1> + + <div id="shortdesc">Test the correct appearance of the ZoomBox in strict mode</div> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p>For the box to be positioned correctly, we need to know the + width of the borders.</p> + <p>Shift-click on the map. A red box should be visible around the mouse + cursor position, with 20 pixels to the top and right, 10 pixels to + the left and 30 pixels to the bottom edge of the box.</p> + <p>Drag the box both to the top-left and the bottom-right. The cursor + should always be at the top-left or bottom-right inner corner of + the box.</p> + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/clip-features-svg.html b/misc/openlayers/tests/manual/clip-features-svg.html new file mode 100644 index 0000000..f4137ea --- /dev/null +++ b/misc/openlayers/tests/manual/clip-features-svg.html @@ -0,0 +1,128 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG inValidRange Test Case</title><link +href="../../theme/default/style.css" +rel="stylesheet" type="text/css"> +<style> + #map { + width: 512px; + height: 512px; + border: 1px solid #4B3624; + background: White; + } + + /* avoid pink tiles */ + .olImageLoadError { + background-color: transparent !important; + } + + .olControlAttribution { bottom: 0px!important } +</style> +<script src="../../lib/OpenLayers.js" +type="text/javascript"></script> +<script type="text/javascript">var map; + + // increase reload attempts + OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; + + var vectorLayer; + var markerLayer, boxes, newPoint; + + function init(){ + var options = { + projection: new OpenLayers.Projection("EPSG:900913"), + units: "m", + numZoomLevels: 19, + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, + 20037508, 20037508.34) + }; + map = new OpenLayers.Map('map', options); + + map.addControl(new OpenLayers.Control.MousePosition()); + + vectorLayer = new OpenLayers.Layer.Vector("Trails", {isBaseLayer: true}); + markerLayer = new OpenLayers.Layer.Markers("WayPoints"); + + map.addLayers([vectorLayer,markerLayer]); + + var style_trail = OpenLayers.Util.extend({}, + OpenLayers.Feature.Vector.style['default']); + style_trail.strokeColor = "green"; + style_trail.strokeWidth = 5; + + var pointList = []; + + newPoint = new OpenLayers.Geometry.Point(-13653735.8487833,5726045.3578081); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653731.3960036,5726056.5070679); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653730.8394062,5726044.7207079); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653743.1958697,5726043.9243328); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653754.1051798,5726046.9505586); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653760.4503907,5726056.5070679); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653767.4635187,5726065.5857612); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653830.136392,5726052.2066375); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-13653846.5003571,5726042.3315828); + pointList.push(newPoint); + + var lineFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.LineString(pointList)); + lineFeature.fid = 52730; + vectorLayer.addFeatures(lineFeature); + + pointList = []; + + newPoint = new OpenLayers.Geometry.Point(-12250153.3626406,4852001.6114048); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-12194315.5060664,4800503.5113048); + pointList.push(newPoint); + newPoint = new OpenLayers.Geometry.Point(-12180445.0975155,4873109.008858); + pointList.push(newPoint); + + lineFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.LineString(pointList),null,style_trail); + lineFeature.fid = 52751; + vectorLayer.addFeatures([lineFeature]); + + var size = new OpenLayers.Size(15, 15); + var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); + var icon = new OpenLayers.Icon('../../img/marker.png', size, offset); + markerLayer.addMarker(new OpenLayers.Marker( + new OpenLayers.LonLat((newPoint.x + 400), (newPoint.y - 400)), icon)); + + map.setCenter(new OpenLayers.LonLat(newPoint.x, newPoint.y), 13) + } + + function zoomToScale(zoom) { + if (zoom == 8) map.zoomToScale(3385.5001275); + else if(zoom == 7) map.zoomToScale(6771.000255); + else if (zoom == 6) map.zoomToScale(13542); + else if (zoom == 5) map.zoomToScale(27084.001020); + else if (zoom == 4) map.zoomToScale(54168.001020); + else if (zoom == 3) map.zoomToScale(108337); + else if (zoom == 2) map.zoomToScale(3466752.1306573446); + else if (zoom == 1) map.zoomToScale(13867008.522629378); + else if (zoom == 0) map.zoomToScale(55468034.09051751); + } + +</script> +</head> +<body onLoad="init()"> +<h1 id="title">SVG inValidRange Clipping Test Case</h1> +<p>Behavior before fixing #1631: Push Zoom 5. You see lines. Push +Zoom 6. No lines.</p> + <div id="map"> + </div> + <button onClick="zoomToScale(5);">Zoom 5</button> + <button onClick="zoomToScale(6);">Zoom 6</button> + <button onClick="zoomToScale(7);">Zoom 7</button> + <button onClick="zoomToScale(8);">Zoom 8</button> +</body> +</html> diff --git a/misc/openlayers/tests/manual/dateline-sketch.html b/misc/openlayers/tests/manual/dateline-sketch.html new file mode 100644 index 0000000..1be1f36 --- /dev/null +++ b/misc/openlayers/tests/manual/dateline-sketch.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers: Sketch handlers crossing the dateline</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <style type="text/css"> + #map { + height: 512px; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + </head> + <body> + <h1 id="title">OpenLayers sketch handlers crossing the dateline example</h1> + + <div id="tags"> + international date line, dateline, sketch + </div> + <p id="shortdesc"> + Start digitizing a polygon or line + on one side of the international dateline, and then cross the dateline + whilst digitizing. The feature should behave like digitizing on any + other location. + </p> + <div id="map" class="smallmap"></div> + + <div id="docs"> + </div> + <script type="text/javascript"> + + var map = new OpenLayers.Map('map'); + + var base = new OpenLayers.Layer.WMS("marble", + "http://demo.opengeo.org/geoserver/wms", + {layers: "topp:naturalearth"}, + {wrapDateLine: true} + ); + + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + + var vector = new OpenLayers.Layer.Vector("Editable Vectors", {renderers: renderer}); + + map.addLayers([base, vector]); + + var wkt = new OpenLayers.Format.WKT(); + var f = wkt.read("POLYGON((210.8828125 39.7265625,151.8203125 36.2109375,152.171875 -9.4921875,219.3203125 -10.546875,210.8828125 39.7265625))"); + + var f2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-190, 0)); + + vector.addFeatures([f, f2]); + + map.addControl(new OpenLayers.Control.EditingToolbar(vector)); + + map.setCenter(new OpenLayers.LonLat(-179, 0), 2); + + </script> + + </body> +</html> diff --git a/misc/openlayers/tests/manual/dateline-smallextent.html b/misc/openlayers/tests/manual/dateline-smallextent.html new file mode 100644 index 0000000..1d05e84 --- /dev/null +++ b/misc/openlayers/tests/manual/dateline-smallextent.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers: Overlay layer extents crossing the dateline</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <style type="text/css"> + #map { + height: 512px; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + +// make map available for easy debugging +var map; + +function init(){ + map = new OpenLayers.Map('map'); + + var base = new OpenLayers.Layer.WMS("marble", + "http://demo.opengeo.org/geoserver/wms", + {layers: "topp:naturalearth"}, + {wrapDateLine: true} + ); + var extent = new OpenLayers.Bounds(142.3828125,-70.902270266175,233.6171875,-12.039326531729); + var wms = new OpenLayers.Layer.WMS( "world", + "http://demo.opengeo.org/geoserver/wms", + {layers: 'world', transparent: true}, + {maxExtent: extent} + ); + + var vector = new OpenLayers.Layer.Vector(); + vector.addFeatures([ + new OpenLayers.Feature.Vector(extent.toGeometry()) + ]); + + map.addLayers([base, wms, vector]); + + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.zoomToExtent(extent); +} + + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers overlays crossing the dateline test</h1> + + <p id="shortdesc"> + The overlay has an extent smaller than the world extent, but exceeds + the world extent. The base layer is configured with wrapDateLine set to + true. The area inside the orange rectangle should always contain tiles + from the world layer, regardless of the zoom level. + </p> + <div id="map" class="smallmap"></div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/draw-feature.html b/misc/openlayers/tests/manual/draw-feature.html new file mode 100644 index 0000000..8872b63 --- /dev/null +++ b/misc/openlayers/tests/manual/draw-feature.html @@ -0,0 +1,73 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Draw Feature Acceptance Test</title> + <style type="text/css"> + + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + + .map { + margin: 1em; + float: left; + width: 256px; + height: 256px; + } + + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + + var map1, map2; + + function init(){ + var wms, vector, ctrl; + var goodMaxRes = OpenLayers.Map.prototype.maxResolution; + var badMaxRes = 0.00000001; + + map1 = new OpenLayers.Map('map1'); + wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); + vector = new OpenLayers.Layer.Vector("vector1"); + map1.addLayers([wms, vector]); + ctrl = new OpenLayers.Control.DrawFeature(vector, + OpenLayers.Handler.Path); + map1.addControl(ctrl); + ctrl.activate(); + + map2 = new OpenLayers.Map('map2', + {maxResolution: badMaxRes}); + wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, + {maxResolution: goodMaxRes}); + vector = new OpenLayers.Layer.Vector("vector2", + {maxResolution: goodMaxRes}); + map2.addLayers([wms, vector]); + ctrl = new OpenLayers.Control.DrawFeature(vector, + OpenLayers.Handler.Path); + map2.addControl(ctrl); + ctrl.activate(); + + map1.setCenter(new OpenLayers.LonLat(0, 0), 3); + map2.setCenter(new OpenLayers.LonLat(0, 0), 3); + } + + </script> + </head> + <body onload="init()"> + <div id="map1" class="map"></div> + <p><b>Resolution properties set at the map level.</b></p> + <p>Points should draw as you draw lines. Click to start + drawing and double-click to draw the last point.</p> + <br style="clear: both;" /> + + <div id="map2" class="map"></div> + <p><b>Resolution properties set at the layer level.</b></p> + <p>Points should draw as you draw lines. Click to start + drawing and double-click to draw the last point.</p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/feature-handler.html b/misc/openlayers/tests/manual/feature-handler.html new file mode 100644 index 0000000..f9b8892 --- /dev/null +++ b/misc/openlayers/tests/manual/feature-handler.html @@ -0,0 +1,126 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Feature Handler Acceptance Test</title> + <style type="text/css"> + + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + li { + list-style: none; + } + #output { + width: 300px; + height: 300px; + } + #west { + width: 425px; + } + + #east { + position: absolute; + left: 450px; + top: 5px; + } + #map { + width: 400px; + height: 400px; + border: 1px solid gray; + } + + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + + var map, draw, handler, controls; + OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2'; + + function init(){ + map = new OpenLayers.Map('map'); + + var vectors = new OpenLayers.Layer.Vector( + "Vector Layer", + {isBaseLayer: true} + ); + map.addLayer(vectors); + + + draw = new OpenLayers.Control.DrawFeature( + vectors, OpenLayers.Handler.Polygon + ); + map.addControl(draw); + + var callbacks = { + "over": function(feature) { + log("over " + feature.id); + }, + "out": function(feature) { + log("out " + feature.id); + }, + "click": function(feature) { + log("click " + feature.id); + }, + "dblclick": function(feature) { + log("dblclick " + feature.id); + }, + "clickout": function(feature) { + log("clickout " + feature.id); + } + }; + + handler = new OpenLayers.Handler.Feature( + {map: map}, vectors, callbacks + ); + + map.setCenter(new OpenLayers.LonLat(0, 0), 3); + + } + + function log(msg) { + document.getElementById('output').value += msg + "\n"; + } + + function clearLog() { + document.getElementById('output').value = ""; + } + + </script> + </head> + <body onload="init()"> + <div id="west"> + <div id="map"></div> + <p> + Draw a few polygons on the map. Some overlapping. Activate the + feature handler and ensure that "over" and "out" are called only + when mousing over/out of a feature for the first time. The + "click" callback should be called for every click on a feature. + The "clickout" callback should be called when? + </p> + </div> + <div id="east"> + <ul> + <li> + <input type="radio" name="type" value="none" id="noneToggle" + onclick="draw.deactivate();handler.deactivate();" checked="checked" /> + <label for="noneToggle">navigate</label> + </li> + <li> + <input type="radio" name="type" value="polygon" id="polygonToggle" + onclick="draw.activate();handler.deactivate();" /> + <label for="polygonToggle">draw polygon</label> + </li> + <li> + <input type="radio" name="type" value="feature" id="featureToggle" + onclick="draw.deactivate();handler.activate();" /> + <label for="featureToggle">activate feature handler</label> + </li> + </ul> + <button onclick="clearLog();">clear log</button><br /> + <textarea id="output"></textarea> + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/geodesic.html b/misc/openlayers/tests/manual/geodesic.html new file mode 100644 index 0000000..e642558 --- /dev/null +++ b/misc/openlayers/tests/manual/geodesic.html @@ -0,0 +1,160 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <style type="text/css"> + #controlToggle li { + list-style: none; + } + #options { + position: relative; + width: 512px; + } + #output { + float: right; + } + + /* avoid pink tiles */ + .olImageLoadError { + background-color: transparent !important; + } + </style> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, measureControls; + function init(){ + map = new OpenLayers.Map('map'); + + var wmsLayer = new OpenLayers.Layer.OSM(); + + map.addLayers([wmsLayer]); + map.setCenter(new OpenLayers.LonLat(0,0), 5); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.addControl(new OpenLayers.Control.MousePosition()); + map.addControl(new OpenLayers.Control.ScaleLine({geodesic: true})) + + // style the sketch fancy + var sketchSymbolizers = { + "Point": { + pointRadius: 4, + graphicName: "square", + fillColor: "white", + fillOpacity: 1, + strokeWidth: 1, + strokeOpacity: 1, + strokeColor: "#333333" + }, + "Line": { + strokeWidth: 3, + strokeOpacity: 1, + strokeColor: "#666666", + strokeDashstyle: "dash" + }, + "Polygon": { + strokeWidth: 2, + strokeOpacity: 1, + strokeColor: "#666666", + fillColor: "white", + fillOpacity: 0.3 + } + }; + var style = new OpenLayers.Style(); + style.addRules([ + new OpenLayers.Rule({symbolizer: sketchSymbolizers}) + ]); + var styleMap = new OpenLayers.StyleMap({"default": style}); + + measureControls = { + line: new OpenLayers.Control.Measure( + OpenLayers.Handler.Path, { + geodesic: true, + persist: true, + handlerOptions: { + layerOptions: {styleMap: styleMap} + } + } + ), + polygon: new OpenLayers.Control.Measure( + OpenLayers.Handler.Polygon, { + geodesic: true, + persist: true, + handlerOptions: { + layerOptions: {styleMap: styleMap} + } + } + ) + }; + + var control; + for(var key in measureControls) { + control = measureControls[key]; + control.events.on({ + "measure": handleMeasurements, + "measurepartial": handleMeasurements + }); + map.addControl(control); + } + + map.setCenter(new OpenLayers.LonLat(0, 0), 3); + + document.getElementById('noneToggle').checked = true; + } + + function handleMeasurements(event) { + var geometry = event.geometry; + var units = event.units; + var order = event.order; + var measure = event.measure; + var element = document.getElementById('output'); + var out = ""; + if(order == 1) { + out += "measure: " + measure.toFixed(3) + " " + units; + } else { + out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>"; + } + element.innerHTML = out; + } + + function toggleControl(element) { + for(key in measureControls) { + var control = measureControls[key]; + if(element.value == key && element.checked) { + control.activate(); + } else { + control.deactivate(); + } + } + } + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers Geodesic Measurement & ScaleLine</h1> + <p id="shortdesc"> + Tests geodesic measurement of distances and areas against a geodesic ScaleLine. + </p> + <div id="map" style="width: 512px; height: 300px;"></div> + <div id="options"> + <div id="output"> + </div> + <ul id="controlToggle"> + <li> + <input type="radio" name="type" value="none" id="noneToggle" + onclick="toggleControl(this);" checked="checked" /> + <label for="noneToggle">navigate</label> + </li> + <li> + <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> + <label for="lineToggle">measure distance</label> + </li> + <li> + <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> + <label for="polygonToggle">measure area</label> + </li> + </ul> + </div> + <p>Zoom in so the ScaleLine shows units in the range of 10-100 km. Measure + the length of the ScaleLine. The result should be approximately the same + as the distance printed on the ScaleLine.</p> + <p>Zoom out so the ScaleLine shows units in the range of 100-500 km. Drag + the map to the South or North and see how the ScaleLine length changes.</p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/geojson-geomcoll-reprojection.html b/misc/openlayers/tests/manual/geojson-geomcoll-reprojection.html new file mode 100644 index 0000000..e82e08a --- /dev/null +++ b/misc/openlayers/tests/manual/geojson-geomcoll-reprojection.html @@ -0,0 +1,74 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> + <head> + <style type="text/css" media="screen"> + #map { height: 500px; } + </style> + <script src="../../lib/OpenLayers.js" type="text/javascript" charset="utf-8"></script> + <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript" charset="utf-8"></script> + <script type="text/javascript" charset="utf-8"> + function init(){ + var map = new OpenLayers.Map ("map", { + controls: [ + new OpenLayers.Control.Navigation(), + new OpenLayers.Control.Attribution() + ], + maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), + maxResolution: 156543.0399, + numZoomLevels: 19, + units: 'm', + projection: new OpenLayers.Projection("EPSG:900913"), + displayProjection: new OpenLayers.Projection("EPSG:4326") + }); + + var osm = new OpenLayers.Layer.OSM.Mapnik('OSM'); + map.addLayer(osm); + var lonLat = new OpenLayers.LonLat(5, 40).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); + map.setCenter (lonLat, 5); + + var featurecollection = { + "type": "FeatureCollection", + "features": [{ + "geometry": { + "type": "GeometryCollection", + "geometries": [ + { + "type": "LineString", + "coordinates": + [[11.0878902207, 45.1602390564], + [15.01953125, 48.1298828125]] + }, + { + "type": "Polygon", + "coordinates": + [[[11.0878902207, 45.1602390564], + [14.931640625, 40.9228515625], + [0.8251953125, 41.0986328125], + [7.63671875, 48.96484375], + [11.0878902207, 45.1602390564]]] + }, + { + "type":"Point", + "coordinates":[15.87646484375, 44.1748046875] + } + ] + }, + "type": "Feature", + "properties": {} + }] + }; + var geojson_format = new OpenLayers.Format.GeoJSON({ + 'internalProjection': new OpenLayers.Projection("EPSG:900913"), + 'externalProjection': new OpenLayers.Projection("EPSG:4326") + }); + var vector_layer = new OpenLayers.Layer.Vector(); + map.addLayer(vector_layer); + vector_layer.addFeatures(geojson_format.read(featurecollection)); + }; + </script> + </head> + <body onload="init()"> + <div id="map"></div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/google-fullscreen-overlay.html b/misc/openlayers/tests/manual/google-fullscreen-overlay.html new file mode 100644 index 0000000..80a8fd4 --- /dev/null +++ b/misc/openlayers/tests/manual/google-fullscreen-overlay.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Google v3 with Overlay Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <style type="text/css"> + html, body, #map { + width: 100%; + height: 100%; + margin: 0; + } + #text { + position: absolute; + top: 1em; + right: 1em; + width: 512px; + z-index: 20000; + background-color: white; + padding: 0 0.5em 0.5em 0.5em; + } + </style> + <script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script> + <script src="../../lib/OpenLayers.js"></script> + </head> + <body> + <div id="map"></div> + <div id="text"> + <h1 id="title">Google v3 with Overlay Test</h1> + + <div id="docs"> + <p>This test shows that the Google layer and overlays are not in sync while dragging or zooming.</p> + </div> + </div> + <script type="text/javascript"> + var options = { + projection: new OpenLayers.Projection("EPSG:900913"), + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508) + }; + var map = new OpenLayers.Map('map', options); + var gmap = new OpenLayers.Layer.Google( + "Google Streets", {sphericalMercator: true} + ); + var states = new OpenLayers.Layer.WMS( + "USA States", "http://demo.opengeo.org/geoserver/wms", + {layers: "topp:states", transparent: true} + ); + map.addLayers([gmap, states]); + map.setCenter(new OpenLayers.LonLat(-10028537.429619, 4598451.0222853), 5); + </script> + </body> +</html> diff --git a/misc/openlayers/tests/manual/google-panning.html b/misc/openlayers/tests/manual/google-panning.html new file mode 100644 index 0000000..0ccdaf2 --- /dev/null +++ b/misc/openlayers/tests/manual/google-panning.html @@ -0,0 +1,122 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Google Panning Acceptance Test</title> + <style type="text/css"> + + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + + #evenmap { + margin: 1em; + float: left; + width: 256px; + height: 256px; + } + + #oddmap { + margin: 1em; + float: left; + width: 255px; + height: 255px; + } + + /* avoid pink tiles */ + .olImageLoadError { + background-color: transparent !important; + } + + </style> + + <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + + var evenmap, oddmap; + + // increase reload attempts + OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; + + function init(){ + evenmap = new OpenLayers.Map('evenmap'); + var evenlayer = new OpenLayers.Layer.Google( + "Imagery", + {type: G_SATELLITE_MAP} + ); + evenmap.addLayer(evenlayer); + var epc = document.getElementById("epc"); + var emc = document.getElementById("emc"); + var ee = document.getElementById("ee"); + evenmap.events.register("moveend", null, function() { + var px = new OpenLayers.Pixel(evenmap.size.w / 2, + evenmap.size.h / 2); + var pc = evenmap.getLonLatFromViewPortPx(px); + pc.lon = parseFloat(pc.lon.toPrecision(6)); + pc.lat = parseFloat(pc.lat.toPrecision(6)); + var mc = evenmap.baseLayer.getOLLonLatFromMapObjectLonLat( + evenmap.baseLayer.mapObject.getCenter() + ); + mc.lon = parseFloat(mc.lon.toPrecision(6)); + mc.lat = parseFloat(mc.lat.toPrecision(6)); + epc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")"; + emc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")"; + ee.innerHTML = pc.equals(mc); + }); + evenmap.zoomToMaxExtent(); + + oddmap = new OpenLayers.Map('oddmap'); + var oddlayer = new OpenLayers.Layer.Google( + "Imagery", + {type: G_SATELLITE_MAP} + ); + oddmap.addLayer(oddlayer); + var opc = document.getElementById("opc"); + var omc = document.getElementById("omc"); + var oe = document.getElementById("oe"); + oddmap.events.register("moveend", null, function() { + var px = new OpenLayers.Pixel(oddmap.size.w / 2, + oddmap.size.h / 2); + var pc = oddmap.getLonLatFromViewPortPx(px); + pc.lon = parseFloat(pc.lon.toPrecision(6)); + pc.lat = parseFloat(pc.lat.toPrecision(6)); + var mc = oddmap.baseLayer.getOLLonLatFromMapObjectLonLat( + oddmap.baseLayer.mapObject.getCenter() + ); + mc.lon = parseFloat(mc.lon.toPrecision(6)); + mc.lat = parseFloat(mc.lat.toPrecision(6)); + opc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")"; + omc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")"; + oe.innerHTML = pc.equals(mc); + }); + oddmap.zoomToMaxExtent(); + + } + + </script> + </head> + <body onload="init()"> + <div id="evenmap"></div> + <p><b>Even sized map.</b> The map on the left should pan regularly, and the + two centers below should be equivalent. Both dragging and panning with + buttons should maintain the same center.</p> + <p><b>pixel center:</b> <span id="epc"></span> + <br /><b>map center:</b> <span id="emc"></span> + <br /><b>equvalent:</b> <span id="ee"></span> + </p> + <br style="clear: both;" /> + + <div id="oddmap"></div> + <p><b>Odd sized map.</b> The map on the left should pan regularly, and the + two centers below should be equivalent. Both dragging and panning with + buttons should maintain the same center.</p> + <p><b>pixel center:</b> <span id="opc"></span> + <br /><b>map center:</b> <span id="omc"></span> + <br /><b>equvalent:</b> <span id="oe"></span> + </p> + </ul> + </body> +</html> diff --git a/misc/openlayers/tests/manual/google-resize.html b/misc/openlayers/tests/manual/google-resize.html new file mode 100644 index 0000000..c1384df --- /dev/null +++ b/misc/openlayers/tests/manual/google-resize.html @@ -0,0 +1,55 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>OpenLayers Google Layer Example</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <!-- this gmaps key generated for http://openlayers.org/dev/ --> + <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + + function init() { + var mapOptions = { + projection: "EPSG:900913", + displayProjection: new OpenLayers.Projection("EPSG:4326"), //Pour afficher les coord lat long + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), + controls: [new OpenLayers.Control.LayerSwitcher()], + numZoomLevels: 20 + }; + map = new OpenLayers.Map('map', mapOptions); + + var dummy = new OpenLayers.Layer( + "Dummy", + {isBaseLayer: true} + ); + var gmap = new OpenLayers.Layer.Google( + "Google Streets", {sphericalMercator: true} + ); + + map.addLayers([dummy, gmap]); + + map.setCenter(new OpenLayers.LonLat(-7712190.388467473, 6567469.498697457), 6); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Google Layer Resize Issue</h1> + + <div id="tags"></div> + + <p id="shortdesc"> + <ol> + <li>Click + <button onclick="var m = document.getElementById('map').style; m.height = '400px'; m.width = '800px'; map.updateSize(); return false;">Resize</button></li> + <li>Open the LayerSwitcher and switch to Google Streets</li> + <li>Confirm that the whole map area is populated with tiles</li> + </ol> + </p> + + <div id="map" style="width: 200px; height: 200px"></div> + + </body> +</html> diff --git a/misc/openlayers/tests/manual/google-tilt.html b/misc/openlayers/tests/manual/google-tilt.html new file mode 100644 index 0000000..d0b2ed6 --- /dev/null +++ b/misc/openlayers/tests/manual/google-tilt.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers Google (v3) Layer Example</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script> + <script src="../../lib/OpenLayers.js"></script> + </head> + <body onload="init()"> + <h1 id="title">Google (v3) Unexpected Tilt Test</h1> + <div id="map" class="smallmap"></div> + <div id="docs"> + <p> + OpenLayers uses the disableDefaultUI option of the GMaps API. + Despite that, the tilt feature is active. To see it, zoom in + once and see the buildings from a 45° angle instead of from the + top as you would expect from aerial imagery. + </p> + </div> + <script> + var map = new OpenLayers.Map('map'); + + var ghyb = new OpenLayers.Layer.Google( + "Google Hybrid", + {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} + ); + + map.addLayers([ghyb]); + + map.setCenter(new OpenLayers.LonLat(-13635213, 4544641), 17); + </script> + </body> +</html> diff --git a/misc/openlayers/tests/manual/google-v3-resize.html b/misc/openlayers/tests/manual/google-v3-resize.html new file mode 100644 index 0000000..6949ddc --- /dev/null +++ b/misc/openlayers/tests/manual/google-v3-resize.html @@ -0,0 +1,54 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Google v3 Resize Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.6"></script> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + + function init() { + var mapOptions = { + projection: "EPSG:900913", + displayProjection: new OpenLayers.Projection("EPSG:4326"), //Pour afficher les coord lat long + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), + controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.LayerSwitcher()], + numZoomLevels: 20 + }; + map = new OpenLayers.Map('map', mapOptions); + + var dummy = new OpenLayers.Layer( + "Dummy", + {isBaseLayer: true} + ); + var gmap = new OpenLayers.Layer.Google( + "Google Streets", {sphericalMercator: true} + ); + + map.addLayers([dummy, gmap]); + + map.setCenter(new OpenLayers.LonLat(-7712190.388467473, 6567469.498697457), 6); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Google Layer Resize Issue</h1> + + <div id="tags"></div> + + <p id="shortdesc"> + <ol> + <li>Click + <button onclick="var m = document.getElementById('map').style; m.height = '400px'; m.width = '800px';map.updateSize(); return false;">Resize</button></li> + <li>Open the LayerSwitcher and switch to Google Streets</li> + <li>Confirm that the whole map area is populated with tiles</li> + </ol> + </p> + + <div id="map" style="width: 350px; height: 200px"></div> + + </body> +</html> diff --git a/misc/openlayers/tests/manual/loadend.html b/misc/openlayers/tests/manual/loadend.html new file mode 100644 index 0000000..0536b75 --- /dev/null +++ b/misc/openlayers/tests/manual/loadend.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var lon = 5; + var lat = 40; + var zoom = 5; + var map, layer; + + var numLoadingLayers = 0; + + function init(){ + map = new OpenLayers.Map( 'map' ); + layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); + + layer.events.register('loadstart', this, onloadstart); + layer.events.register('loadend', this, onloadend); + + map.addLayer(layer); + + map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); + } + + function log(msg) { + document.getElementById("output").innerHTML += msg + "<br />"; + } + + function onloadstart(evt) { + numLoadingLayers++; + var msg = ['loadstart', '# layers loading:', numLoadingLayers].join(' '); + log (msg); + }; + + function onloadend(evt) { + numLoadingLayers--; + var msg = ['loadend ', '# layers loading:', numLoadingLayers].join(' '); + log (msg); + }; + + </script> + </head> + <body onload="init()"> + <h1 id="title">WMS loadstart/loadend events</h1> + + <div id="tags"> + wms, layer, singletile + </div> + <p id="shortdesc"> + Shows the loadstart and loadend events of a WMS layer + </p> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p> + This example is helpful in testing whether all loadstart events are followed + by a loadend event. + Test by using scroll-wheel up and down. + </p> + </div> + + <h1>loadstart and loadend events</h1> + <pre id="output"></pre> + + </body> +</html>
\ No newline at end of file diff --git a/misc/openlayers/tests/manual/map-events.html b/misc/openlayers/tests/manual/map-events.html new file mode 100644 index 0000000..3695e82 --- /dev/null +++ b/misc/openlayers/tests/manual/map-events.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>map.div Events Acceptance Test</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="../../examples/style.css" type="text/css"> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, layer; + function init() { + map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.OSM( "Simple OSM Map"); + map.addLayer(layer); + map.setCenter( + new OpenLayers.LonLat(-71.147, 42.472).transform( + new OpenLayers.Projection("EPSG:4326"), + map.getProjectionObject() + ), 12 + ); + + var element = document.getElementById('map'); + element.addEventListener('mousedown', function(evt) { + alert('mousedown on map div'); + }); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">map.div Events Acceptance Test</h1> + + <div id="map" class="smallmap"></div> + + <p><b>Test 1</b> : mousedown the map; an alert must be displayed.</p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/memory/Marker-2258.html b/misc/openlayers/tests/manual/memory/Marker-2258.html new file mode 100644 index 0000000..b2d8a37 --- /dev/null +++ b/misc/openlayers/tests/manual/memory/Marker-2258.html @@ -0,0 +1,60 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Memory Test - Layer.Markers / Marker</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + width: 256px; + height: 256px; + border: 1px solid black; + } + </style> + + <script src="../../../lib/Firebug/firebug.js"></script> + <script src="../../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, layer, marker; + + function init(){ + map = new OpenLayers.Map('map'); + map.addLayer(new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} )); + map.setCenter(new OpenLayers.LonLat(0, 0), 0); + + layer = new OpenLayers.Layer.Markers( "Markers" ); + map.addLayer(layer); + + marker = new OpenLayers.Marker(new OpenLayers.LonLat(0,0)); + layer.addMarker(marker); + + window.setTimeout(function() { + layer.removeMarker(marker); + layer.addMarker(marker); + + // people SHOULD call marker.destroy(). But if they don't + // we leak memory. + //marker.destroy(); + + window.alert("Setup - hit STOP in the leak detector now"); + }, 100); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Memory Test - Layer.Markers / Marker</h1> + <pre id="status"></pre> + <div id="map"></div> + <p> + This test is a memory leak test for usage of Layer.Markers / Marker. + </p> + <p> + Run this test in IE6/7 with <a href="http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx">JavaScript Memory Leak Detector v2</a> + and watch it identify a leak unless this is fixed. + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/memory/PanZoom-2323.html b/misc/openlayers/tests/manual/memory/PanZoom-2323.html new file mode 100644 index 0000000..de629a6 --- /dev/null +++ b/misc/openlayers/tests/manual/memory/PanZoom-2323.html @@ -0,0 +1,41 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Memory Test - PanZoom.getSlideFactor</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + width: 256px; + height: 256px; + border: 1px solid black; + } + </style> + + <script src="../../../lib/Firebug/firebug.js"></script> + <script src="../../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + var layer; + + function init(){ + map = new OpenLayers.Map('map'); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Memory Test - PanZoom.getSlideFactor</h1> + <pre id="status"></pre> + <div id="map"></div> + <p> + This test is a memory leak test for: PanZoom.getSlideFactor. + </p> + <p> + Run this test in IE6/7 with <a href="http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx">JavaScript Memory Leak Detector v2</a> + and watch it identify a leak unless this is fixed. + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/memory/RemoveChild-2170.html b/misc/openlayers/tests/manual/memory/RemoveChild-2170.html new file mode 100644 index 0000000..abe9249 --- /dev/null +++ b/misc/openlayers/tests/manual/memory/RemoveChild-2170.html @@ -0,0 +1,56 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Memory Test - DOMNode.removeChild</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + width: 512px; + height: 512px; + border: 1px solid black; + } + </style> + + <script src="../../../lib/Firebug/firebug.js"></script> + <script src="../../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, layer; + + function tearDown() { + layer.events.unregister("loadend", layer, tearDown); + window.setTimeout(function() { + map.removeLayer(layer); + //map.addLayer(layer); + layer.destroy(); + window.alert("Setup - hit STOP in the leak detector now"); + }, 100); + } + + function init(){ + map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} ); + layer = new OpenLayers.Layer.TMS( "TMS", + "http://labs.metacarta.com/wms-c/Basic.py/", {layername: 'basic', type:'png'} ); + map.addLayer(layer); + map.setCenter(new OpenLayers.LonLat(5, 40), 5); + + layer.events.register("loadend", layer, tearDown); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Memory Test - DOMNode.removeChild</h1> + <pre id="status"></pre> + <div id="map"></div> + <p> + This test is a memory leak test for usage of DOMNode.removeChild + </p> + <p> + Run this test in IE6/7 with <a href="http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx">JavaScript Memory Leak Detector v2</a> + and watch it identify a leak unless this is fixed. + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/memory/VML-2170.html b/misc/openlayers/tests/manual/memory/VML-2170.html new file mode 100644 index 0000000..2f72300 --- /dev/null +++ b/misc/openlayers/tests/manual/memory/VML-2170.html @@ -0,0 +1,49 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Memory Test - Renderer.VML - onselectstart</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + width: 256px; + height: 256px; + border: 1px solid black; + } + </style> + + <script src="../../../lib/Firebug/firebug.js"></script> + <script src="../../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + var layer; + + function init(){ + map = new OpenLayers.Map('map'); + + layer = new OpenLayers.Layer.Vector("Test-VML", {renderers:['VML']}); + map.addLayers([layer]); + + window.setTimeout(function() { + layer.redraw(); + window.alert("Setup - hit STOP in the leak detector now"); + }, 100); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Memory Test - Renderer.VML - onselectstart</h1> + <pre id="status"></pre> + <div id="map"></div> + <p> + This test is a memory leak test for usage of "onselectstart" event handler in Renderer.VML + </p> + <p> + Run this test in IE6/7 with <a href="http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx">JavaScript Memory Leak Detector v2</a> + and watch it identify a leak unless this is fixed. + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/multiple-google-layers.html b/misc/openlayers/tests/manual/multiple-google-layers.html new file mode 100644 index 0000000..df5c4f0 --- /dev/null +++ b/misc/openlayers/tests/manual/multiple-google-layers.html @@ -0,0 +1,135 @@ +<html> + <head> + <title>Multiple Google Layers Acceptance Test</title> + <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script> + <script src="../../lib/OpenLayers.js"></script> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../theme/default/google.css" type="text/css" /> + <style> + .col { + position: relative; + width: 50%; + } + #col1 { + float: left; + } + #col2 { + float: right; + } + .map { + position: relative; + height: 300px; + } + .wrap { + position: relative; + padding: 10px; + } + ul { + padding: 0; + } + ul li { + list-style: none; + } + p.clear { + clear: both; + } + </style> + </head> + <body> + <div id="col1" class="col"> + <div class="wrap"> + <div id="map1" class="map"></div> + layers for map1 + <ul> + <li><input type="checkbox" checked="checked" name="streets1" id="streets1"><label for="streets1">streets</label></li> + <li><input type="checkbox" checked="checked" name="sat1" id="sat1"><label for="sat1">imagery</label></li> + <li><input type="checkbox" checked="checked" name="topo1" id="topo1"><label for="topo1">topography</label></li> + </ul> + </div> + </div> + <div id="col2" class="col"> + <div class="wrap"> + <div id="map2" class="map"></div> + layers for map2 + <ul> + <li><input type="checkbox" name="streets2" id="streets2"><label for="streets2">streets</label></li> + <li><input type="checkbox" name="sat2" id="sat2"><label for="sat2">imagery</label></li> + <li><input type="checkbox" name="topo2" id="topo2"><label for="topo2">topography</label></li> + </ul> + </div> + </div> + <p class="clear"> + This example is used to confirm that resizable maps with multiple + Google layers work properly. Click the checkboxes to add/remove + layers from the maps. Use the layer switcher to change the map's + base layer. You should be able to confirm the following: + <ol> + <li>Adding and removing layers doesn't raise any errors + (regardless of how many times the same layer is added/removed).</li> + <li>The Google "Powered By" link is always visible and clickable + when a Google layer is displayed.</li> + <li>The Google "Terms of Use" link is always visible and clickable + when a Google layer is displayed.</li> + <li>Resizing a map (by resizing the browser window) and then + changing base layer works well. That is, the center & scale are + preserved and all tiles are well aligned.</li> + <li>Setting the base layer to the "Dummy Layer" hides all other + Google base layers, "Powered By" link, and "Terms of Use" link.</li> + </ol> + </p> + <script> + + var map1 = new OpenLayers.Map("map1"); + var streets1 = new OpenLayers.Layer.Google("Streets", { + type: G_NORMAL_MAP + }); + var sat1 = new OpenLayers.Layer.Google("Imagery", { + type: G_SATELLITE_MAP + }); + var topo1 = new OpenLayers.Layer.Google("Topography", { + type: G_PHYSICAL_MAP + }); + var dummy1 = new OpenLayers.Layer("Dummy Layer", { + isBaseLayer: true + }); + map1.addLayers([streets1, sat1, topo1, dummy1]); + map1.addControl(new OpenLayers.Control.LayerSwitcher); + map1.zoomToMaxExtent(); + + var map2 = new OpenLayers.Map("map2"); + var streets2 = new OpenLayers.Layer.Google("Streets", { + type: G_NORMAL_MAP + }); + var sat2 = new OpenLayers.Layer.Google("Imagery", { + type: G_SATELLITE_MAP + }); + var topo2 = new OpenLayers.Layer.Google("Topography", { + type: G_PHYSICAL_MAP + }); + var dummy2 = new OpenLayers.Layer("Dummy Layer", { + isBaseLayer: true + }); + map2.addLayer(dummy2); + map2.addControl(new OpenLayers.Control.LayerSwitcher); + map2.zoomToMaxExtent(); + + // add behavior to checkboxes + var check, inputs = document.getElementsByTagName("input"); + for (var i=0, len=inputs.length; i<len; ++i) { + check = inputs[i]; + check.onclick = function() { + var name = this.name; + var num = name.match(/\d$/)[0]; + var layer = window[name]; + var map = window["map" + num]; + if (this.checked) { + map.addLayer(layer); + } else { + map.removeLayer(layer); + } + } + } + + </script> + </body> +</html>
\ No newline at end of file diff --git a/misc/openlayers/tests/manual/overviewmap-projection.html b/misc/openlayers/tests/manual/overviewmap-projection.html new file mode 100644 index 0000000..bb15c9f --- /dev/null +++ b/misc/openlayers/tests/manual/overviewmap-projection.html @@ -0,0 +1,70 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <style type="text/css"> + .olControlAttribution { bottom: 0px!important } + #map { + height: 512px; + } + </style> + + <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + + // make map available for easy debugging + var map; + + function init(){ + var options = { + projection: new OpenLayers.Projection("EPSG:900913"), + displayProjection: new OpenLayers.Projection("EPSG:4326"), + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, + 20037508, 20037508.34) + }; + map = new OpenLayers.Map('map', options); + + // create Google Mercator layers + var gmap = new OpenLayers.Layer.Google( + "Google Streets", + {'sphericalMercator': true} + ); + map.addLayers([gmap]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.addControl(new OpenLayers.Control.Permalink()); + map.addControl(new OpenLayers.Control.MousePosition()); + var ovmap = new OpenLayers.Control.OverviewMap({ + maxRatio: 16, + layers: [new OpenLayers.Layer.WMS("OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", + {layers: 'basic'})] + }); + map.addControl(ovmap); + ovmap.maximizeControl(); + if (!map.getCenter()) {map.zoomToMaxExtent()}; + } + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers Overview Map Projection Test</h1> + + <div id="tags"> + </div> + <p id="shortdesc"> + Acceptance test for different projections in map and overview map. + The map uses EPSG:900913, the overview map EPSG:4326. Zoom the map and + drag both the map and the overview map to see it in action. + </p> + <div id="map" class="smallmap"></div> + + <div id="docs"> + </div> + </body> +</html> + + + diff --git a/misc/openlayers/tests/manual/page-position.html b/misc/openlayers/tests/manual/page-position.html new file mode 100644 index 0000000..a59dfde --- /dev/null +++ b/misc/openlayers/tests/manual/page-position.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>Page Position Test</title> + + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <link rel="stylesheet" href="../../examples/style.css" type="text/css" /> + <style type="text/css"> + #mapwrap { + border: 10px solid red; + width: 532px; + height: 276px; + } + #map { + position: absolute; + border: 10px solid #ccc; + width: 512px; + height: 256px; + } + #controlToggle li { + list-style: none; + } + p { + width: 512px; + } + #scrollspace { + height: 500px; + } + </style> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, drawControls; + function init(){ + map = new OpenLayers.Map('map'); + + var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); + + var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); + + map.addLayers([wmsLayer, lineLayer]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.addControl(new OpenLayers.Control.MousePosition()); + + drawControl = new OpenLayers.Control.DrawFeature(lineLayer, + OpenLayers.Handler.Path); + + map.addControl(drawControl); + + map.setCenter(new OpenLayers.LonLat(0, 0), 3); + + document.getElementById('noneToggle').checked = true; + } + + function toggleControl(element) { + var control = drawControl; + if(element.value == "draw" && element.checked) { + control.activate(); + } else { + control.deactivate(); + } + } + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers Page Position Test</h1> + + <p id="shortdesc"> + Test if borders and scroll position cause unwanted offsets on the + mouse positions reported by map events. + </p> + <div id="mapwrap"> + <div id="map"></div> + </div> + + <ul id="controlToggle"> + <li> + <input type="radio" name="type" value="none" id="noneToggle" + onclick="toggleControl(this);" checked="checked" /> + <label for="noneToggle">navigate</label> + </li> + <li> + <input type="radio" name="type" value="draw" id="lineToggle" onclick="toggleControl(this);" /> + <label for="lineToggle">draw line</label> + </li> + </ul> + + <div id="docs"> + <p>This map's div has a border and absolute positioning, wrapped + by a container which also has a border. The page is also + scrollable. Neither the borders nor scrolling the page should + result in unwanted offsets on pixel positions reported by map + events.</p> + <p>With the line drawing control active, click on the map to add a + point. The point should be drawn at the exact mouse location.</p> + <p>With the navigation control active, shift-drag a zoom rectangle. + The rectangle's corner should align exactly with the mouse + cursor.</p> + <p>Scroll the page and repeat the above tests.</p> + <div id="scrollspace"><div> + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/pan-redraw-svg.html b/misc/openlayers/tests/manual/pan-redraw-svg.html new file mode 100644 index 0000000..ec1126b --- /dev/null +++ b/misc/openlayers/tests/manual/pan-redraw-svg.html @@ -0,0 +1,58 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <style type="text/css"> + #map { + width: 512px; + height: 512px; + border: 1px solid gray; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, point; + + function init(){ + var options = { + projection: new OpenLayers.Projection("EPSG:900913"), + displayProjection: new OpenLayers.Projection("EPSG:4326"), + units: "m", + maxResolution: 20, //0.07464553542137146, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, + 20037508, 20037508.34) + }; + map = new OpenLayers.Map('map', options); + var vector = new OpenLayers.Layer.Vector( + "Vectors", + {isBaseLayer: true} + ); + map.addLayer(vector); + + var x = -20000;//4.33791754; + var y = 20000; + point = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(x, y) + ); + + map.addLayer(vector); + vector.addFeatures([point]); + map.setCenter(new OpenLayers.LonLat(0, 0), 5); + } + + function pan(){ + map.panTo(point.geometry.getBounds().getCenterLonLat()); + } + + </script> + </head> + <body onload="init()"> + <h3 id="title">SVG inValidRange Redraw Test Case</h3> + <p>Before fixing #1631, after klicking Go! no point would have appeared. The Go! button + pans the map over a long distance. Before dragging, the point would have been + outside the valid range, and the pan operation would not have triggered the SVG + coordinate system to be recreated. The new vector rendering takes care of all this. </p> + <div id="map"></div> + <input type="button" value="Go!" onclick="pan();"></input> + </body> +</html> diff --git a/misc/openlayers/tests/manual/popup-keepInMap.html b/misc/openlayers/tests/manual/popup-keepInMap.html new file mode 100644 index 0000000..4ba1c18 --- /dev/null +++ b/misc/openlayers/tests/manual/popup-keepInMap.html @@ -0,0 +1,100 @@ +<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> + <head> + <title>OpenLayers: Popup Mayhem</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <style type="text/css"> + #map { + width: 900px; + height: 500px; + border: 1px solid black; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + var layer, markers; + + var currentPopup; + + + AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { + 'autoSize': true, + 'panMapIfOutOfView': false + }); + + function init(){ + map = new OpenLayers.Map('map'); + + markers = new OpenLayers.Layer.Markers("zibo", {isBaseLayer: true}); + map.addLayer(markers); + + addMarkers(); + map.zoomToMaxExtent(); + } + + function addMarkers() { + + var ll, popupClass, popupContentHTML; + + //anchored bubble popup small contents autosize closebox + ll = new OpenLayers.LonLat(-35,-15); + popupClass = AutoSizeFramedCloud; + popupContentHTML = "<div>This popup can't be panned to fit in view, so its popup text should fit inside the map. If it doens't, instead of expaning outside, it will simply make the content scroll. Scroll scroll scroll your boat, gently down the stream! Chicken chicken says the popup text is really boring to write. Did you ever see a popup a popup a popup did you ever see a popup a popup right now. With this way and that way and this way and that way did you ever see a popup a popup right now. I wonder if this is long enough. it might be, but maybe i should throw in some other content. <ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>(get your booty on the floor) </div>"; + addMarker(ll, popupClass, popupContentHTML, true, true); + + + } + + /** + * Function: addMarker + * Add a new marker to the markers layer given the following lonlat, + * popupClass, and popup contents HTML. Also allow specifying + * whether or not to give the popup a close box. + * + * Parameters: + * ll - {<OpenLayers.LonLat>} Where to place the marker + * popupClass - {<OpenLayers.Class>} Which class of popup to bring up + * when the marker is clicked. + * popupContentHTML - {String} What to put in the popup + * closeBox - {Boolean} Should popup have a close box? + * overflow - {Boolean} Let the popup overflow scrollbars? + */ + function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) { + + var feature = new OpenLayers.Feature(markers, ll); + feature.closeBox = closeBox; + feature.popupClass = popupClass; + feature.data.popupContentHTML = popupContentHTML; + feature.data.overflow = (overflow) ? "auto" : "hidden"; + + var marker = feature.createMarker(); + + var markerClick = function (evt) { + if (this.popup == null) { + this.popup = this.createPopup(this.closeBox); + map.addPopup(this.popup); + this.popup.show(); + } else { + this.popup.toggle(); + this.popup.updateSize(); + } + currentPopup = this.popup; + OpenLayers.Event.stop(evt); + }; + marker.events.register("mousedown", feature, markerClick); + + markers.addMarker(marker); + } + + </script> + </head> + <body onload="init()"> + <h1 id="title">Popup KeepInMap</h1> + + <div id="map" class="smallmap"></div> + </div> + Click on popup, and the content should scroll rather than expanding outside the map. + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/reflow.html b/misc/openlayers/tests/manual/reflow.html new file mode 100644 index 0000000..bb9585e --- /dev/null +++ b/misc/openlayers/tests/manual/reflow.html @@ -0,0 +1,59 @@ +<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" type="text/javascript"></script> + <script type="text/javascript"> + + var map; + var vectors; + + function init(){ + map = new OpenLayers.Map('map'); + var wms = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", + {layers: 'basic'} + ); + + vectors = new OpenLayers.Layer.Vector( + "Simple Geometry", + { + styleMap: new OpenLayers.StyleMap({ + externalGraphic: "../../img/marker-gold.png", + pointRadius: 10 + }) + } + ); + + map.addLayers([wms, vectors]); + + var features = []; + var x = -111.04; + var y = 45.68; + for(var i = 0; i < 10; i++){ + x += i * .5; + y += i * .1; + features.push( + new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(x, y) + ) + ); + } + + map.setCenter(new OpenLayers.LonLat(x, y), 5); + vectors.addFeatures(features); + }; + + </script> + </head> + <body onload="init()"> + <div id="map"></div> + <p>Use the pan buttons. See flicker at end of animated pan.</p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/renderedDimensions.html b/misc/openlayers/tests/manual/renderedDimensions.html new file mode 100644 index 0000000..b01624b --- /dev/null +++ b/misc/openlayers/tests/manual/renderedDimensions.html @@ -0,0 +1,113 @@ +<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> + <head> + <title>OpenLayers: Popup Mayhem</title> + <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" /> + <style type="text/css"> + #map { + width: 900px; + height: 500px; + border: 1px solid black; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map; + var layer, markers; + + var currentPopup; + + +// different popup types + + + //disable the autosize for the purpose of our matrix + OpenLayers.Popup.FramedCloud.prototype.autoSize = false; + + AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { + 'autoSize': true + }); + + function init(){ + map = new OpenLayers.Map('map'); + + layer = new OpenLayers.Layer( + "popupMatrix", + {isBaseLayer: true} + ); + map.addLayer(layer); + + markers = new OpenLayers.Layer.Markers("zibo"); + map.addLayer(markers); + + addMarkers(); + map.zoomToMaxExtent(); + } + + function addMarkers() { + + var ll, popupClass, popupContentHTML; + + //anchored bubble popup small contents autosize closebox + ll = new OpenLayers.LonLat(-35,-15); + popupClass = AutoSizeFramedCloud; + popupContentHTML = "<div>This text's line-height is affected<br/>by it's parents. Thus we have to<br/>place the content inside<br/>the correct container to get<br/>the rendered size.</div>"; + addMarker(ll, popupClass, popupContentHTML, true); + + + } + + /** + * Function: addMarker + * Add a new marker to the markers layer given the following lonlat, + * popupClass, and popup contents HTML. Also allow specifying + * whether or not to give the popup a close box. + * + * Parameters: + * ll - {<OpenLayers.LonLat>} Where to place the marker + * popupClass - {<OpenLayers.Class>} Which class of popup to bring up + * when the marker is clicked. + * popupContentHTML - {String} What to put in the popup + * closeBox - {Boolean} Should popup have a close box? + * overflow - {Boolean} Let the popup overflow scrollbars? + */ + function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) { + + var feature = new OpenLayers.Feature(markers, ll); + feature.closeBox = closeBox; + feature.popupClass = popupClass; + feature.data.popupContentHTML = popupContentHTML; + feature.data.overflow = (overflow) ? "auto" : "hidden"; + + var marker = feature.createMarker(); + + var markerClick = function (evt) { + if (this.popup == null) { + this.popup = this.createPopup(this.closeBox); + map.addPopup(this.popup); + this.popup.show(); + } else { + this.popup.toggle(); + } + currentPopup = this.popup; + OpenLayers.Event.stop(evt); + }; + marker.events.register("mousedown", feature, markerClick); + + markers.addMarker(marker); + } + + </script> + </head> + <body onload="init()"> + <h1 id="title">Popup Matrix</h1> + + <div id="tags"> + </div> + <div style="line-height: 40px;"> + <div id="map" class="smallmap"></div> + </div> + Click on popup, should be able to read a full sentence, not just two lines. + </div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/select-feature-right-click.html b/misc/openlayers/tests/manual/select-feature-right-click.html new file mode 100644 index 0000000..edd79d6 --- /dev/null +++ b/misc/openlayers/tests/manual/select-feature-right-click.html @@ -0,0 +1,86 @@ +<html> + <head> + <title>OpenLayers Ticket 3404</title> + <script src="../../lib/OpenLayers.js"></script> + </head> + <body> + <table cellpadding="10px"> + <tr> + <td width="600"> + <p><a href="http://trac.osgeo.org/openlayers/ticket/3404">Ticket 3404</a> Test Page</p> + <p>This bug is only triggered by physical right mouse clicks so it is not possible to write + an automated js unit test</p> + <p>When a SelectFeature control and a Navigation control are added to a map the left-click + mousedown events are stopped by a Drag handler before reaching the Feature handler. However, + right-click mousedown events so pass through and reach the Feature handler.</p> + <p>The Feature handler records the xy of + each mousedown and mouseup events so they can be compared in the click event. Because only right-click + mousedown event are received the location of future left-click mouseup events are compared + to the location of the 'stale' right-click mousedown event resulting in the feature not being selected.</p> + <p>Steps to recreate the bug: + <ol> + <li>Left-click a point to select it.</li> + <li>Left-click the map to deselect the point.</li> + <li>Left-click a different point to select it.</li> + <li>Left-click the map to deselect the second point.</li> + <li>Right-click the map then left-click to close the browser context menu.</li> + <li>Left-click a point.</li> + </ol> + </p> + <p>Expected: The point is selected.</p> + </td> + <td> + <div style="width:300; height:400" id="map"></div> + </td> + </tr> + </table> + + <script defer="defer" type="text/javascript"> + var map = new OpenLayers.Map('map'); + + var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); + + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + + var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", { + renderers: renderer + }); + + map.addLayers([wmsLayer, vectorLayer]); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + + var selectControl = new OpenLayers.Control.SelectFeature( + vectorLayer, + { + clickout: true, toggle: false, + multiple: false, hover: false, + toggleKey: "ctrlKey", // ctrl key removes from selection + multipleKey: "shiftKey", // shift key adds to selection + } + ); + + map.addControl(selectControl); + selectControl.activate(); + + map.addControl(new OpenLayers.Control.Navigation()); + map.setCenter(new OpenLayers.LonLat(-75.1641667, 39.9522222), 10); + + var createRandomFeatures = function() { + var extent = map.getExtent(); + var features = []; + for(var i=0; i<10; ++i) { + features.push(new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(), + extent.bottom + (extent.top - extent.bottom) * Math.random() + ))); + } + return features; + } + + vectorLayer.addFeatures(createRandomFeatures()); + </script> + </body> +</html> diff --git a/misc/openlayers/tests/manual/select-feature.html b/misc/openlayers/tests/manual/select-feature.html new file mode 100644 index 0000000..6e1fba0 --- /dev/null +++ b/misc/openlayers/tests/manual/select-feature.html @@ -0,0 +1,75 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Select Feature Test</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + margin: 1em; + width: 512px; + height: 512px; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, selectControl1, selectControl2; + + function init() { + map = new OpenLayers.Map('map'); + var wmsLayer = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", + {layers: 'basic'} + ); + var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); + var pointFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(-50, -45) + ); + var polygonFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Polygon([ + new OpenLayers.Geometry.LinearRing([ + new OpenLayers.Geometry.Point(-50,-50), + new OpenLayers.Geometry.Point(-40,-50), + new OpenLayers.Geometry.Point(-40,-40), + new OpenLayers.Geometry.Point(-50,-50) + ]) + ]) + ); + vectorLayer.addFeatures([pointFeature, polygonFeature]); + map.addLayers([wmsLayer, vectorLayer]); + selectControl1 = new OpenLayers.Control.SelectFeature( + vectorLayer, {geometryTypes: ['OpenLayers.Geometry.Point']} + ); + selectControl2 = new OpenLayers.Control.SelectFeature( + vectorLayer, { + geometryTypes: ['OpenLayers.Geometry.Polygon'], + hover: true + }); + map.addControl(new OpenLayers.Control.MousePosition()); + map.addControl(selectControl1); + map.addControl(selectControl2); + selectControl1.activate(); + selectControl2.activate(); + map.setCenter(new OpenLayers.LonLat(-45, -45), 4); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Select Feature Test</h1> + <div id="map"></div> + <p> + + The map includes two select feature controls. The first one operates on + geometries of type OpenLayers.Geometry.Point only and works on clicks. The + second one operates on geometries of type OpenLayers.Geometry.Polygon and + works on mouseover's. If you select the point geometry by clicking on it, + it shouldn't be unselected when the mouse moves out if it. + + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/tiles-loading.html b/misc/openlayers/tests/manual/tiles-loading.html new file mode 100644 index 0000000..cbd0e10 --- /dev/null +++ b/misc/openlayers/tests/manual/tiles-loading.html @@ -0,0 +1,122 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Tiles Loading Acceptance Test</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + margin: 1em; + float: left; + width: 512px; + height: 512px; + } + + </style> + + <script src='http://maps.google.com/maps?file=api&v=2.82&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + // make map available for easy debugging + var map; + + // increase reload attempts + OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; + + function init(){ + var options = { + controls: [], + projection: "EPSG:900913", + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, + 20037508, 20037508.34) + }; + map = new OpenLayers.Map('map', options); + // create Google Mercator layers + var gmap = new OpenLayers.Layer.Google( + "Google Streets", + {'sphericalMercator': true} + ); + // create WMS layer + var wmsMaxResolution = 78271.51695; + var wms = new OpenLayers.Layer.WMS( + "World Map", + "http://world.freemap.in/tiles/", + {'layers': 'factbook-overlay', 'format':'png'}, + { + 'opacity': 0.4, + 'isBaseLayer': false, + 'wrapDateLine': true, + 'buffer': 0, + 'maxResolution' : wmsMaxResolution + } + ); + map.addLayers([gmap, wms]); + map.addControl(new OpenLayers.Control.Navigation()); + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.addControl(new OpenLayers.Control.PanZoomBar()); + + function onLayerChanged() { + var html = '<p>WMS Layer state - in range: ' + + this.inRange + + ', visibility: ' + + this.visibility; + + '</p>'; + document.getElementById('layerstate').innerHTML = html; + } + map.events.register('changelayer', wms, onLayerChanged); + + function onTileLoaded() { + var html = '<p>Message: '; + if (this.numLoadingTiles > 0) { + html += 'Loading tiles...'; + } else { + html += 'Done loading tiles'; + } + html += '</p>'; + document.getElementById('tilesloading').innerHTML = html; + } + wms.events.register('tileloaded', wms, onTileLoaded); + + map.zoomToMaxExtent() + } + </script> + </head> + <body onload="init()"> + <div id="map"></div> + <p> + + <b>Test 0</b> : at the initial zoom the WMS layer is in range, you should + therefore see the 'Loading tiles...' message when loading the page for + the first time. + + </p> + <p> + + <b>Test 1</b> : If you zoom out by one level (using the zoombar), the WMS + layer becomes out of range. No tile should be loaded so you shouldn't see + the 'Loading tiles...' message. + + </p> + <p> + + <b>Test 2</b> : Zoom in by one level to go back to initial state (the WMS + is back). Open the layer switcher and turn off the WMS layer. No tile + should be loaded so you shouldn't see the 'Loading tiles...' message. + + </p> + <p> + + <b>Test 3</b> : Keep the WMS layer turned off in the layer switcher. Zoom + out by one level again. The layer is both invisible and out of range, so + you shouldn't see the 'Loading tiles...' message. + + </p> + <div id="layerstate"><p>WMS Layer state - in range: true, visibility: true</p></div> + <div id="tilesloading"><p>Message:</p></div> + </body> +</html> diff --git a/misc/openlayers/tests/manual/tween.html b/misc/openlayers/tests/manual/tween.html new file mode 100644 index 0000000..88606cb --- /dev/null +++ b/misc/openlayers/tests/manual/tween.html @@ -0,0 +1,82 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Tween Example</title> + <style type="text/css"> + #viewport { + width: 500px; + height: 300px; + border: 1px solid black; + } + #block { + width: 10px; + height: 10px; + background-color: red; + position: absolute; + } + </style> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var tween, events; + + function init(){ + tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn); + + events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true); + events.register("mousedown", null, moveBlock); + + changeTween(); + } + function moveBlock(e) { + var block = OpenLayers.Util.getElement('block'); + var viewport = OpenLayers.Util.getElement('viewport'); + var blockPosition = OpenLayers.Util.pagePosition(block); + var viewportPosition = OpenLayers.Util.pagePosition(viewport); + e.xy = events.getMousePosition(e); + var from = { + x: blockPosition[0] - viewportPosition[0], + y: blockPosition[1] - viewportPosition[1] + }; + var to = { + x: e.xy.x, + y: e.xy.y + } + var duration = OpenLayers.Util.getElement('duration').value; + var callbacks = { + eachStep: function(value) { + block.style.left = (value.x + viewportPosition[0]) + 'px'; + block.style.top = (value.y + viewportPosition[1]) + 'px'; + } + } + tween.start(from, to, duration, {callbacks: callbacks}); + + } + function changeTween() { + var transition = OpenLayers.Util.getElement('transition').value; + var easing = OpenLayers.Util.getElement('easing').value; + tween.stop(); + tween.easing = OpenLayers.Easing[transition][easing]; + } + </script> + </head> + <body onload="init()"> + <div id="title">Tween Example</div> + <div id="tags"></div> + <div id="shortdesc">Show transition effects</div> + <select name="transition" id="transition" onchange="changeTween()"> + <option value="Linear">Linear</option> + <option value="Expo">Expo</option> + <option value="Quad">Quad</option> + </select> + <select name="easing" id="easing" onchange="changeTween()"> + <option value="easeIn">EaseIn</option> + <option value="easeOut">EaseOut</option> + </select> + <input type="text" name="duration" id="duration" value="100"></input> + <div id="viewport"> + <div id="block"></div> + </div> + <div id="docs"> + This is an example of transition effects. + </div> + </body> +</html>
\ No newline at end of file diff --git a/misc/openlayers/tests/manual/vector-features-performance.html b/misc/openlayers/tests/manual/vector-features-performance.html new file mode 100644 index 0000000..7990379 --- /dev/null +++ b/misc/openlayers/tests/manual/vector-features-performance.html @@ -0,0 +1,149 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Vector Features Performance Test</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + width: 512px; + height: 512px; + border: 1px solid black; + } + </style> + + <script src="../../lib/Firebug/firebug.js"></script> + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, vectorLayer, drawFeature, features + + var run = 0; + + function nextRun() { + window.setTimeout(function() { + if (run < 5) { + vectorLayer.removeFeatures(features); + } + }, 900); + + window.setTimeout(function(){ + run++; + + switch(run) { + case 1: + console.log("First run - feature bboxes will be cached"); + map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 3); + vectorTestNew() + break; + case 2: + console.log("Test with all features inside extent"); + vectorTestOld(); + break; + case 3: + vectorTestNew(); + break; + case 4: + console.log("Test with some features outside extent"); + map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 5); + vectorTestOld(); + break; + case 5: + vectorTestNew(); + break; + } + }, 1000); + } + + function vectorTestOld(){ + vectorLayer.renderer.drawFeature = function(feature, style) { + if(style == null) { + style = feature.style; + } + if (feature.geometry) { + this.drawGeometry(feature.geometry, style, feature.id); + } + }; + + console.time("addFeaturesOld"); + vectorLayer.addFeatures(features); + console.timeEnd("addFeaturesOld"); + } + + function vectorTestNew() { + vectorLayer.renderer.drawFeature = OpenLayers.Renderer[vectorLayer.renderer.CLASS_NAME.split(".")[2]].prototype.drawFeature; + + console.time("addFeatures"); + vectorLayer.addFeatures(features); + console.timeEnd("addFeatures"); + } + + function init(){ + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + + map = new OpenLayers.Map('map'); + + vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", { + isBaseLayer: true, + renderers: renderer + }); + + map.addLayers([vectorLayer]); + map.addControl(new OpenLayers.Control.MousePosition()); + map.setCenter(new OpenLayers.LonLat(-22.5, -22.5), 3); + + vectorLayer.events.register("featuresadded", this, nextRun); + + features = new Array(200); + var x, y + for (var i = 0; i < 200; i++) { + x = -Math.random()*45; + y = -Math.random()*45; + features[i] = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.LinearRing([ + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y), + new OpenLayers.Geometry.Point( + -Math.random()*5+x, -Math.random()*5+y) + ])); + + } + + nextRun(); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">New Rendering - Vector Features Performance Test</h1> + <div id="map"></div> + <p> + This test examines if checking for a feature being inside the visible + extent before rendering it has an impact on performance. Open the Firebug + console after running this test (hit F12) to see the results. + <br/> + After the performance test, you can drag around the map to see how the new + vector rendering feels where features get rendered only when they are visible + inside the map extent. + </p> + </body> +</html> diff --git a/misc/openlayers/tests/manual/vector-layer-zindex.html b/misc/openlayers/tests/manual/vector-layer-zindex.html new file mode 100644 index 0000000..d33c853 --- /dev/null +++ b/misc/openlayers/tests/manual/vector-layer-zindex.html @@ -0,0 +1,143 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Vector Layer ZIndex Test</title> + <style type="text/css"> + body { + font-size: 0.8em; + } + p { + padding-top: 1em; + } + #map { + margin: 1em; + width: 512px; + height: 512px; + } + </style> + + <script src="../../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, layerA, layerB, layerV, selectControl1, selectControl2; + + function init() { + map = new OpenLayers.Map('map'); + var wmsLayer = new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://labs.metacarta.com/wms/vmap0", + {layers: 'basic'} + ); + + layerV = new OpenLayers.Layer.Vector('v'); + var feature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Polygon([ + new OpenLayers.Geometry.LinearRing([ + new OpenLayers.Geometry.Point(-110, 60), + new OpenLayers.Geometry.Point(-110, 30), + new OpenLayers.Geometry.Point(-80, 30), + new OpenLayers.Geometry.Point(-110, 60) + ]) + ]) + ); + layerV.addFeatures([feature]); + selectControl1 = new OpenLayers.Control.SelectFeature(layerV); + selectControl2 = new OpenLayers.Control.SelectFeature(layerV, { + hover: true, + selectStyle: OpenLayers.Util.applyDefaults({fillColor: "red"}, OpenLayers.Feature.Vector.style["select"]), + onSelect: function(feature) { + selectControl2.unselect(feature); + layerV.drawFeature(feature, selectControl2.selectStyle); + } + }); + selectControl2.events.register("beforefeatureselected", null, function(feature) { + layerV.drawFeature(feature, selectControl2.selectStyle); + return false; + }) + + layerA = new OpenLayers.Layer('a', {'isBaseLayer': false}); + layerB = new OpenLayers.Layer.WMS( + 'b', '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' + }, { + 'reproject': false + }); + + map.addLayers([wmsLayer, layerV, layerA, layerB]); + map.addControl(selectControl2); + map.addControl(selectControl1); + map.addControl(new OpenLayers.Control.MousePosition()); + selectControl2.activate(); + selectControl1.activate(); + + map.setCenter(new OpenLayers.LonLat(-90, 20), 2); + } + + function removeLayerA() { + if (OpenLayers.Util.indexOf(map.layers, layerA) > -1) { + map.removeLayer(layerA); + } + } + + function toggleSelectControl1() { + if (selectControl1.active) { + selectControl1.deactivate(); + alert("SelectFeature control for clicks deactivated."); + } else { + selectControl1.activate(); + alert("SelectFeature control for clicks activated."); + } + } + + function toggleSelectControl2() { + if (selectControl2.active) { + selectControl2.deactivate(); + alert("SelectFeature control for hover deactivated."); + } else { + selectControl2.activate(); + alert("SelectFeature control for hover activated."); + } + } + </script> + </head> + <body onload="init()"> + <h1 id="title">Vector Layer ZIndex Test</h1> + <div id="map"></div> + <p> + + The map includes one base layer (vmap0) and three overlays, namely a vector + layer, a fake layer with no images, and a dmsolutions layer. The overlays are + added to the map in this order: the vector layer, the fake layer, and the + dmsolutions layer. The map also includes a select feature control, which + when activated bumped the vector layer z-index to some high value. This + makes feature selection work, even though other overlays were added after + the vector layer. + + </p> + <p> + + If the fake layer is removed from the map (first link below), the vector layer's + z-index must not be reset, so the vector layer must not go under the + dmsolutions layer and feature selection must continue to function as + expected. + + </p> + <p> + + If one of the SelectFeature controls is deactivated or activated (second + and third link below), the vector layer should change it's position in the + layer stack: on top if at least one of the controls is activated, covered + by other layers if both are deactivated. + + </p> + + <p> + <a href="javascript:removeLayerA()">Remove the fake layer</a> + <br/><a href="javascript:toggleSelectControl1()">Toggle the click SelectFeature control's active status</a> + <br/><a href="javascript:toggleSelectControl2()">Toggle the hover SelectFeature control's active status</a> + </p> + </body> +</html> |