diff options
Diffstat (limited to 'misc/openlayers/tests/manual/geodesic.html')
| -rw-r--r-- | misc/openlayers/tests/manual/geodesic.html | 160 |
1 files changed, 0 insertions, 160 deletions
diff --git a/misc/openlayers/tests/manual/geodesic.html b/misc/openlayers/tests/manual/geodesic.html deleted file mode 100644 index e642558..0000000 --- a/misc/openlayers/tests/manual/geodesic.html +++ /dev/null @@ -1,160 +0,0 @@ -<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> |