1 |
<html xmlns="http://www.w3.org/1999/xhtml">
|
2 |
<head>
|
3 |
<title>Planet Extraction</title>
|
4 |
<style type="text/css">
|
5 |
html, body {
|
6 |
margin: 0;
|
7 |
padding: 1em;
|
8 |
font: 0.9em Verdana, Arial, sans serif;
|
9 |
}
|
10 |
input, select, textarea {
|
11 |
font: 1em Verdana, Arial, sans serif;
|
12 |
}
|
13 |
.input {
|
14 |
border: none;
|
15 |
width: 100px;
|
16 |
}
|
17 |
.bbox {
|
18 |
font-size: 12px;
|
19 |
color: #000;
|
20 |
background-color: #fff;
|
21 |
width: 300px;
|
22 |
border: 1px solid gray;
|
23 |
}
|
24 |
.button {
|
25 |
width: 200px;
|
26 |
height: 50px;
|
27 |
font-weight: bold;
|
28 |
}
|
29 |
#map {
|
30 |
float: left;
|
31 |
width: 500px;
|
32 |
height: 500px;
|
33 |
border: 1px solid gray;
|
34 |
}
|
35 |
#controls {
|
36 |
float: left;
|
37 |
|
38 |
}
|
39 |
</style>
|
40 |
<script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
|
41 |
<script type="text/javascript">
|
42 |
var map, polygonControl, polygonLayer, bbox_set;
|
43 |
|
44 |
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
45 |
function init(){
|
46 |
map = new OpenLayers.Map('map');
|
47 |
|
48 |
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
49 |
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
|
50 |
|
51 |
polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
|
52 |
|
53 |
map.addLayers([wmsLayer, polygonLayer]);
|
54 |
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
55 |
map.addControl(new OpenLayers.Control.MousePosition());
|
56 |
|
57 |
polyOptions = {sides: 4, irregular: true};
|
58 |
polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
|
59 |
OpenLayers.Handler.RegularPolygon,
|
60 |
{handlerOptions: polyOptions});
|
61 |
//alert(polygonControl);
|
62 |
|
63 |
map.addControl(polygonControl);
|
64 |
|
65 |
polygonControl.featureAdded=featureInsert;
|
66 |
|
67 |
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
|
68 |
|
69 |
document.getElementById('noneToggle').checked = true;
|
70 |
//document.getElementById('irregularToggle').checked = false;
|
71 |
|
72 |
//var polyOptions = {sides: 4, irregular: true};
|
73 |
//polygonControl.handler.setOptions(polyOptions);
|
74 |
}
|
75 |
|
76 |
function featureInsert(feature){
|
77 |
var old=[];
|
78 |
for (var i = 0; i < polygonLayer.features.length; i++) {
|
79 |
if (polygonLayer.features[i] != feature) {
|
80 |
old.push(polygonLayer.features[i]);
|
81 |
}
|
82 |
}
|
83 |
polygonLayer.destroyFeatures(old);
|
84 |
|
85 |
var bounds = feature.geometry.getBounds();
|
86 |
|
87 |
document.form.bounds_top.value = bounds.top;
|
88 |
document.form.bounds_right.value = bounds.right;
|
89 |
document.form.bounds_btm.value = bounds.bottom;
|
90 |
document.form.bounds_left.value = bounds.left;
|
91 |
bbox_set=true;
|
92 |
}
|
93 |
function download() {
|
94 |
var bbox = document.form.bounds_left.value + "," +
|
95 |
document.form.bounds_btm.value + "," +
|
96 |
document.form.bounds_right.value + "," +
|
97 |
document.form.bounds_top.value;
|
98 |
if (bbox_set) {
|
99 |
location.href="http://maps.navit-project.org/api/map?bbox=" + bbox;
|
100 |
} else {
|
101 |
alert("Please select a bounding box first\n");
|
102 |
}
|
103 |
}
|
104 |
function setOptions(options) {
|
105 |
polygonControl.handler.setOptions(options);
|
106 |
}
|
107 |
function setSize(fraction) {
|
108 |
var radius = fraction * map.getExtent().getHeight();
|
109 |
polygonControl.handler.setOptions({radius: radius,
|
110 |
angle: 0});
|
111 |
}
|
112 |
</script>
|
113 |
</head>
|
114 |
<body onload="init()">
|
115 |
<h2>Planet extract</h2>
|
116 |
<div id="map"></div>
|
117 |
<div id="controls">
|
118 |
<ul style="list-style:none;"><b>Map Controls</b>
|
119 |
<li>
|
120 |
<input type="radio" name="type"
|
121 |
value="none" id="noneToggle"
|
122 |
onclick="polygonControl.deactivate()"
|
123 |
checked="checked" />
|
124 |
<label for="noneToggle">navigate</label>
|
125 |
</li>
|
126 |
<li>
|
127 |
<input type="radio" name="type"
|
128 |
value="polygon" id="polygonToggle"
|
129 |
onclick="polygonControl.activate()" />
|
130 |
<label for="polygonToggle">select</label>
|
131 |
</li>
|
132 |
</ul>
|
133 |
<ul style="list-style:none"><b>Fetch box</b>
|
134 |
<form name="form">
|
135 |
<li>Top Right: <input type="text" name="bounds_top" class="input">,
|
136 |
<input type="text" name="bounds_right" class="input"></li>
|
137 |
<li>Bottom left: <input type="text" name="bounds_btm" class="input">,
|
138 |
<input type="text" name="bounds_left" class="input"></li>
|
139 |
</form>
|
140 |
<li> </li>
|
141 |
<li><input type="button" class="button" value="Get map!" onclick="javascript:download()"></li>
|
142 |
</ul>
|
143 |
</div>
|
144 |
</body>
|
145 |
</html>
|