source: genesis/nodes/nodemap.html@ 8304

Last change on this file since 8304 was 8304, checked in by rick, 15 years ago

RD to GPS coordinate convertion hack
File size: 12.8 KB
Line 
1<html>
2 <head>
3 <title>Wireless Leiden Nodemap using OpenLayers.org and OpenSteetmap.org</title>
4 <style type="text/css">
5 html, body, #basicMap {
6 width: 100%;
7 height: 100%;
8 margin: 0;
9 }
10 </style>
11 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"></script>
12
13 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
14 <!-- <script src="http://openlayers.org/dev/OpenLayers.js"</script> -->
15
16 <script>
17 var url_pal3 = "http://maps.google.com/mapfiles/kml/pal3/";
18 var map, rulerControl, clickControl;
19 var mapnik, wms;
20 var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
21 var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
22
23 var current_opacity = 0.5;
24 var max_opacity = 0.9;
25 var min_opacity = 0.1;
26
27 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
28 defaultHandlerOptions: {
29 'single': true,
30 'double': false,
31 'pixelTolerance': 0,
32 'stopSingle': false,
33 'stopDouble': false
34 },
35
36 initialize: function(options) {
37 this.handlerOptions = OpenLayers.Util.extend(
38 {}, this.defaultHandlerOptions
39 );
40 OpenLayers.Control.prototype.initialize.apply(
41 this, arguments
42 );
43 this.handler = new OpenLayers.Handler.Click(
44 this, {
45 'click': this.trigger
46 }, this.handlerOptions
47 );
48 },
49
50 trigger: function(e) {
51 var lonlat = map.getLonLatFromViewPortPx(e.xy);
52 lonlat = lonlat.transform( projection_smp, projection_wgs);
53 var url = coordConvert(lonlat.lon, lonlat.lat);
54 alert("You clicked near " + lonlat.lon + " N, " +
55 + lonlat.lat + " E\n\n" +
56 'Copy/paste URL in NEW browser window to get your RDNAP coordinates\n\n' + url);
57 }
58
59 });
60
61
62 function setOpacity(new_opacity) {
63 current_opacity = new_opacity;
64 mapnik.setOpacity(new_opacity);
65 wms.setOpacity(new_opacity);
66 }
67
68 function changeOpacity(by_opacity) {
69 var new_opacity = current_opacity + by_opacity;
70 new_opacity = Math.min(max_opacity, Math.max(min_opacity, new_opacity));
71 setOpacity(new_opacity);
72 }
73
74 function init() {
75 map = new OpenLayers.Map("basicMap");
76
77 var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
78 // Development focus maps
79 mapnik = new OpenLayers.Layer.OSM("OpenStreetMap");
80 wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
81 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
82
83 // Added extra's
84 var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
85 { type: G_SATELLITE_MAP,
86 sphericalMercator: true,
87 maxExtent: world_bound,
88 wrapDateLine: false,
89 });
90 var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
91 { type: G_NORMAL_MAP,
92 sphericalMercator: true,
93 maxExtent: world_bound,
94 wrapDateLine: false
95 });
96
97
98 map.addLayers([mapnik, wms, google_sat, google_normal]);
99 setOpacity(0.5);
100 defaultFocus();
101
102
103 //var pois = new OpenLayers.Layer.Text( "My Points",
104 // { location:"./textfile.txt",
105 // projection: map.displayProjection
106 // });
107 //map.addLayer(pois);
108
109 //function parseKML(req) {
110 // alert(req.responseText);
111 //};
112 //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
113
114 var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml",
115 { format: OpenLayers.Format.KML,
116 formatOptions: {
117 extractStyles: true,
118 extractAttributes: true,
119 maxDepth: 5
120 }
121 });
122 map.addLayer(kml);
123
124 select = new OpenLayers.Control.SelectFeature(kml);
125 kml.events.on( {
126 "featureselected": onKMLFeatureSelect,
127 "featureunselected": onKMLFeatureUnselect
128 });
129 map.addControl(select);
130 select.activate();
131
132 clickControl = new OpenLayers.Control.Click();
133 map.addControl(clickControl);
134 clickControl.deactivate();
135
136
137 var vectors = new OpenLayers.Layer.Vector("Vector Layer")
138 map.addLayer(vectors);
139 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
140 map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
141 map.addControl(new OpenLayers.Control.LayerSwitcher());
142 map.addControl(new OpenLayers.Control.OverviewMap());
143 map.addControl(new OpenLayers.Control.Permalink());
144 map.addControl(new OpenLayers.Control.ScaleLine());
145 map.addControl(new OpenLayers.Control.KeyboardDefaults());
146 map.addControl(new OpenLayers.Control.ZoomBox());
147
148
149 var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
150 {clickout: true}
151 );
152 map.addControl(selectCtrl);
153 selectCtrl.activate();
154
155
156 //var in_options = {
157 // 'internalProjection': map.baseLayer.projection,
158 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
159 //};
160 //var wkt = new OpenLayers.Format.WKT(in_options);
161 //var txtFile = new XMLHttpRequest();
162 //txtFile.open("GET", "./wktfile.txt", false);
163 //// txtFile.onreadystatechange = function() {
164 //// if(txtFile.readyState == 4) {
165 //// alert(txtFile.responseText);
166 //// }
167 //// }
168 //txtFile.send(null);
169
170 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
171 //var bounds;
172 //
173 //if (features) {
174 // if(features.constructor != Array) {
175 // features = [features];
176 // }
177 // for(var i=0; i<features.length; ++i) {
178 // if (!bounds) {
179 // bounds = features[i].geometry.getBounds();
180 // }
181 // bounds.extend(features[i].geometry.getBounds());
182 // }
183 // vectors.addFeatures(features);
184 // map.zoomToExtent(bounds);
185 //} else {
186 // alert("ERROR in WTK");
187 //}
188
189
190 // style the sketch fancy
191 var sketchSymbolizers = {
192 "Point": {
193 pointRadius: 4,
194 graphicName: "square",
195 fillColor: "white",
196 fillOpacity: 1,
197 strokeWidth: 1,
198 strokeOpacity: 1,
199 strokeColor: "#333333"
200 },
201 "Line": {
202 strokeWidth: 3,
203 strokeOpacity: 1,
204 strokeColor: "#666666",
205 strokeDashstyle: "dash"
206 },
207 "Polygon": {
208 strokeWidth: 2,
209 strokeOpacity: 1,
210 strokeColor: "#666666",
211 fillColor: "white",
212 fillOpacity: 0.3
213 }
214 };
215 var style = new OpenLayers.Style();
216 style.addRules([
217 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
218 ]);
219 var styleMap = new OpenLayers.StyleMap({"default": style});
220
221 rulerControl = new OpenLayers.Control.Measure(
222 OpenLayers.Handler.Path, {
223 persist: true,
224 handlerOptions: {
225 layerOptions: {styleMap: styleMap}
226 }
227 }
228 );
229
230 rulerControl.events.on({
231 "measure": handleMeasurements,
232 "measurepartial": handleMeasurements
233 });
234 map.addControl(rulerControl);
235 }
236
237 function resize() {
238 size = new OpenLayers.Size(size.w + 10, size.h + 10);
239 icon.setSize(size);
240 }
241
242 function onPopupClose(evt) {
243 select.unselectAll();
244 }
245
246
247 function onKMLFeatureSelect(event) {
248 var feature = event.feature;
249 var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
250 popup = new OpenLayers.Popup.FramedCloud("chicken",
251 feature.geometry.getBounds().getCenterLonLat(),
252 new OpenLayers.Size(100,100),
253 content,
254 null, true, onPopupClose);
255 feature.popup = popup;
256 map.addPopup(popup);
257 }
258
259 function onKMLFeatureUnselect(event) {
260 var feature = event.feature;
261 if(feature.popup) {
262 map.removePopup(feature.popup);
263 feature.popup.destroy();
264 delete feature.popup;
265 }
266 }
267
268 function handleMeasurements(event) {
269 // For some reason 'delayed' events get posted even though the object
270 // is deactivated
271 if (!rulerControl.active) {
272 return;
273 }
274 var geometry = event.geometry;
275 var units = event.units;
276 var order = event.order;
277 var measure = event.measure;
278 var element = document.getElementById('output');
279 out = measure.toFixed(3) + " " + units;
280 if(order == 2) {
281 out += "<sup>2</" + "sup>";
282 } else {
283 }
284 element.innerHTML = out;
285 }
286
287 function toggleClickControl() {
288 if (!clickControl.active) {
289 clickControl.activate();
290 document.getElementById('click').src = url_pal3 + "icon32.png";
291 } else {
292 clickControl.deactivate();
293 document.getElementById('click').src = url_pal3 + "icon28.png";
294
295 }
296 }
297
298 function toggleRulerControl() {
299 if (!rulerControl.active) {
300 rulerControl.activate();
301 document.getElementById('ruler').src = "ruler_on.png";
302 } else {
303 rulerControl.deactivate();
304 document.getElementById('ruler').src = "ruler_off.png";
305 }
306 }
307
308 function defaultFocus() {
309 map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
310 .transform( projection_wgs, projection_smp), 12 // Zoom level
311 );
312 }
313
314 function toggleInfo() {
315 var e = document.getElementById('infofield');
316 if (e.style.visibility == "hidden") {
317 e.style.visibility = "visible";
318 } else {
319 e.style.visibility = "hidden";
320 };
321 }
322
323 function coordConvert(lam, phi) {
324 var lam_deg = Math.floor(lam);
325 var t = (lam - lam_deg) * 60;
326 var lam_min = Math.floor(t);
327 var lam_sec = (t - lam_min) * 60;
328
329 var phi_deg = Math.floor(phi);
330 var t = (phi - phi_deg) * 60;
331 var phi_min = Math.floor(t);
332 var phi_sec = (t - phi_min) * 60;
333
334 var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
335 "&lam_deg=" + lam_deg +
336 "&lam_min=" + lam_min +
337 "&lam_sec=" + lam_sec +
338 "&phi_deg=" + phi_deg +
339 "&phi_min=" + phi_min +
340 "&phi_sec=" + phi_sec
341 ;
342 return(url);
343 }
344
345
346 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
347 </script>
348 </head>
349 <body onload="init();">
350 <div id="basicMap">
351 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
352 <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
353 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()"/>
354 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" title="Information" onclick="toggleInfo()" />
355 <img id="click" height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon28.png" title="Coordinate converter" onclick="toggleClickControl()" />
356 <div id="output"></div>
357 </div>
358 <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
359 <ul>
360 <li>holding down shift, whilst dragging the mouse to do box zooming</li>
361 <li>Keyboard Navigation is enabled</li>
362 <li>Contrast of background: <a title="decrease opacity" href="javascript: changeOpacity(-0.1);">Decrease</a> or <a title="increase opacity" href="javascript: changeOpacity(0.1);">Increase</a></li>
363
364
365 </ul>
366 </div>
367 </div>
368 </body>
369</html>
Note: See TracBrowser for help on using the repository browser.