source: genesis/nodes/nodemap.html@ 8471

Last change on this file since 8471 was 8471, checked in by rick, 14 years ago

Coordinate converter with alert was not very user friendy, converted to infofield clickable setup.

Thanks to Martijn for feedback!
File size: 18.0 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6 <title>Wireless Leiden Nodemap using OpenLayers.org and OpenSteetmap.org</title>
7 <style type="text/css">
8 html, body, #basicMap {
9 width: 100%;
10 height: 100%;
11 margin: 0;
12 }
13 </style>
14 <script
15 src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"> </script>
16 <script src="http://openlayers.org/dev/OpenLayers.js" type="text/javascript"> </script>
17 <script type="text/javascript">
18 // <![CDATA[
19 var url_pal3 = "http://maps.google.com/mapfiles/kml/pal3/";
20 var map, rulerControl, clickControl;
21 var mapnik, wms;
22 var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
23 var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
24
25 var current_opacity = 0.5;
26 var max_opacity = 0.9;
27 var min_opacity = 0.1;
28
29 var nodeStatusImg = [];
30 nodeStatusImg.up = 'http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png';
31 nodeStatusImg.down = 'http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png';
32 nodeStatusImg.planned = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
33 nodeStatusImg.unknown = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
34
35 function log(message) {
36 /* Determine whether Firebug is actually installed and activated before trying to log
37 * Taken from http://code.google.com/p/fbug/source/browse/branches/firebug1.5/lite/firebugx.js
38 */
39 if (window.console && console.firebug) {
40 console.log(message);
41 }
42 }
43
44 function isInterlink(feature) {
45 return (feature.attributes.name.indexOf('Interlink') != -1);
46 }
47
48 function coordConvert(lam, phi) {
49 var lam_deg = Math.floor(lam);
50 var t = (lam - lam_deg) * 60;
51 var lam_min = Math.floor(t);
52 var lam_sec = (t - lam_min) * 60;
53
54 var phi_deg = Math.floor(phi);
55 t = (phi - phi_deg) * 60;
56 var phi_min = Math.floor(t);
57 var phi_sec = (t - phi_min) * 60;
58
59 var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
60 "&lam_deg=" + lam_deg +
61 "&lam_min=" + lam_min +
62 "&lam_sec=" + lam_sec +
63 "&phi_deg=" + phi_deg +
64 "&phi_min=" + phi_min +
65 "&phi_sec=" + phi_sec
66 ;
67 return(url);
68 }
69
70 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
71 defaultHandlerOptions: {
72 'single': true,
73 'double': false,
74 'pixelTolerance': 0,
75 'stopSingle': false,
76 'stopDouble': false
77 },
78
79 initialize: function(options) {
80 this.handlerOptions = OpenLayers.Util.extend(
81 {}, this.defaultHandlerOptions
82 );
83 OpenLayers.Control.prototype.initialize.apply(
84 this, arguments
85 );
86 this.handler = new OpenLayers.Handler.Click(
87 this, {
88 'click': this.trigger
89 }, this.handlerOptions
90 );
91 },
92
93 trigger: function(e) {
94 var lonlat = map.getLonLatFromViewPortPx(e.xy);
95 lonlat = lonlat.transform( projection_smp, projection_wgs);
96 var url = coordConvert(lonlat.lon, lonlat.lat);
97 document.getElementById('coordOutput').href = url;
98 document.getElementById('coordOutput').innerHTML = Math.round(lonlat.lon * 1000) / 1000 + " N, " + Math.round(lonlat.lat * 1000) / 1000 + " E";
99 }
100
101 });
102
103
104 function setOpacity(new_opacity) {
105 current_opacity = new_opacity;
106 mapnik.setOpacity(new_opacity);
107 wms.setOpacity(new_opacity);
108 }
109
110 function changeOpacity(by_opacity) {
111 var new_opacity = current_opacity + by_opacity;
112 new_opacity = Math.min(max_opacity, Math.max(min_opacity, new_opacity));
113 setOpacity(new_opacity);
114 }
115
116 function init() {
117 map = new OpenLayers.Map("basicMap");
118
119 var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
120 // Development focus maps
121 mapnik = new OpenLayers.Layer.OSM("OpenStreetMap");
122 wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
123 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
124
125 // Added extra's
126 var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
127 { type: G_SATELLITE_MAP,
128 sphericalMercator: true,
129 maxExtent: world_bound,
130 wrapDateLine: false
131 });
132 var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
133 { type: G_NORMAL_MAP,
134 sphericalMercator: true,
135 maxExtent: world_bound,
136 wrapDateLine: false
137 });
138
139
140 map.addLayers([mapnik, wms, google_sat, google_normal]);
141 setOpacity(0.5);
142 defaultFocus();
143
144
145 //var pois = new OpenLayers.Layer.Text( "My Points",
146 // { location:"./textfile.txt",
147 // projection: map.displayProjection
148 // });
149 //map.addLayer(pois);
150
151 //function parseKML(req) {
152 // alert(req.responseText);
153 //};
154 //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
155
156
157 function ignoreInterlink(cluster, feature) {
158 if (isInterlink(feature)) {
159 return(false);
160 } else {
161 return strategy.shouldClusterOrig(cluster, feature); }
162 }
163
164 strategy = new OpenLayers.Strategy.Cluster();
165 strategy.shouldClusterOrig = strategy.shouldCluster;
166 strategy.shouldCluster = ignoreInterlink;
167 strategy.distance = 10;
168 strategy.threshold = 2;
169
170 //OpenLayers.Feature.Vector.style["default"]);
171
172 var symbolizer = new OpenLayers.Style({
173 externalGraphic: "${icon}",
174 pointRadius: "${radius}",
175 fillOpacity: 1
176 }, { context : {
177 icon : function(feature) {
178 var iconStatus = "DEADCODE";
179 if(feature.cluster) {
180 for (var i = 0; i < feature.cluster.length; i++) {
181 var nodeStatus = feature.cluster[i].attributes.styleUrl.split('_')[2];
182 iconStatus = nodeStatus;
183 // If one if having issues, update the overview icon to reflect this
184 if (nodeStatus == 'unknown' || nodeStatus == 'planned' || nodeStatus == 'down') { break; }
185 }
186 } else {
187 iconStatus = feature.attributes.styleUrl.split('_')[2];
188 }
189 return nodeStatusImg[iconStatus];
190 },
191 radius : function(feature) {
192 var pix = 8;
193 if(feature.cluster) {
194 pix = pix + feature.attributes.count;
195 for (var i = 0; i < feature.cluster.length; i++) {
196 var node = feature.cluster[i];
197 log(node.attributes.styleUrl);
198 }
199 }
200 return pix;
201 }
202 }
203 });
204
205 var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 16,fillOpacity: 1}});
206
207 // Hack to get around all kind of caching fails
208 var epoch = new Date().getTime();
209 var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml?time=" + epoch,
210 { strategies: [strategy],
211 styleMap: styleMap,
212 format: OpenLayers.Format.KML,
213 formatOptions: {
214 extractStyles: true,
215 extractAttributes: true,
216 maxDepth: 5
217 }
218 });
219 map.addLayer(kml);
220
221 function onPopupClose(evt) {
222 select.unselectAll();
223 }
224
225 function onKMLFeatureSelect(event) {
226 var feature = event.feature;
227 var content = "";
228 if (feature.cluster) {
229 for (var i = 0; i < feature.cluster.length; i++) {
230 var node = feature.cluster[i];
231 iconStatus = node.attributes.styleUrl.split('_')[2];
232 iconImg = nodeStatusImg[iconStatus];
233 content = content + "<h4><img src='" + iconImg + "' />" + node.attributes.name + "</h4>" + node.attributes.description + "<br />";
234 }
235 } else {
236 if (isInterlink(feature)) {
237 content = "<h4>" + feature.attributes.name + "</h4>" + "<br />" + "<em>Link information: " + feature.attributes.description + "</em>";
238 } else {
239 var nodeName = feature.attributes.name.split(' ')[1];
240 log(nodeName);
241 content = "<iframe frameborder='0' height='300px' width='700px' src='http://sunny.wleiden.net/nagios/cgi-bin/status.cgi?host=" + nodeName + "&servicestatustypes=28&hoststatustypes=15&noheader=true'></iframe><br />" + "<em>Locatie: " + feature.attributes.description + "</em>";
242 }
243 }
244 popup = new OpenLayers.Popup.FramedCloud("chicken",
245 feature.geometry.getBounds().getCenterLonLat(),
246 new OpenLayers.Size(100,100),
247 content,
248 null, true, onPopupClose);
249 feature.popup = popup;
250 map.addPopup(popup);
251 }
252
253 function onKMLFeatureUnselect(event) {
254 var feature = event.feature;
255 if(feature.popup) {
256 map.removePopup(feature.popup);
257 feature.popup.destroy();
258 delete feature.popup;
259 }
260 }
261
262 function handleMeasurements(event) {
263 // For some reason 'delayed' events get posted even though the object
264 // is deactivated
265 if (!rulerControl.active) {
266 return;
267 }
268 var units = event.units;
269 var order = event.order;
270 var measure = event.measure;
271 var element = document.getElementById('output');
272 out = measure.toFixed(3) + " " + units;
273 if(order == 2) {
274 out += "<sup>2</" + "sup>";
275 } else {
276 }
277 element.innerHTML = out;
278 }
279
280 select = new OpenLayers.Control.SelectFeature(kml);
281 kml.events.on( {
282 "featureselected": onKMLFeatureSelect,
283 "featureunselected": onKMLFeatureUnselect
284 });
285 map.addControl(select);
286 select.activate();
287
288 clickControl = new OpenLayers.Control.Click();
289 map.addControl(clickControl);
290 clickControl.deactivate();
291
292
293 // XXX: Enable if we found some use for it somewhere
294 // var vectors = new OpenLayers.Layer.Vector("Vector Layer");
295 // map.addLayer(vectors);
296 // map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
297
298 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
299 map.addControl(new OpenLayers.Control.LayerSwitcher());
300 map.addControl(new OpenLayers.Control.OverviewMap());
301 map.addControl(new OpenLayers.Control.Permalink());
302 map.addControl(new OpenLayers.Control.ScaleLine());
303 map.addControl(new OpenLayers.Control.KeyboardDefaults());
304 map.addControl(new OpenLayers.Control.ZoomBox());
305
306
307 //var in_options = {
308 // 'internalProjection': map.baseLayer.projection,
309 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
310 //};
311 //var wkt = new OpenLayers.Format.WKT(in_options);
312 //var txtFile = new XMLHttpRequest();
313 //txtFile.open("GET", "./wktfile.txt", false);
314 //// txtFile.onreadystatechange = function() {
315 //// if(txtFile.readyState == 4) {
316 //// alert(txtFile.responseText);
317 //// }
318 //// }
319 //txtFile.send(null);
320
321 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
322 //var bounds;
323 //
324 //if (features) {
325 // if(features.constructor != Array) {
326 // features = [features];
327 // }
328 // for(var i=0; i<features.length; ++i) {
329 // if (!bounds) {
330 // bounds = features[i].geometry.getBounds();
331 // }
332 // bounds.extend(features[i].geometry.getBounds());
333 // }
334 // vectors.addFeatures(features);
335 // map.zoomToExtent(bounds);
336 //} else {
337 // alert("ERROR in WTK");
338 //}
339
340
341 // style the sketch fancy
342 var sketchSymbolizers = {
343 "Point": {
344 pointRadius: 4,
345 graphicName: "square",
346 fillColor: "white",
347 fillOpacity: 1,
348 strokeWidth: 1,
349 strokeOpacity: 1,
350 strokeColor: "#333333"
351 },
352 "Line": {
353 strokeWidth: 3,
354 strokeOpacity: 1,
355 strokeColor: "#666666",
356 strokeDashstyle: "dash"
357 },
358 "Polygon": {
359 strokeWidth: 2,
360 strokeOpacity: 1,
361 strokeColor: "#666666",
362 fillColor: "white",
363 fillOpacity: 0.3
364 }
365 };
366 var style = new OpenLayers.Style();
367 style.addRules([
368 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
369 ]);
370 var rulerStyleMap = new OpenLayers.StyleMap({"default": style});
371
372 rulerControl = new OpenLayers.Control.Measure(
373 OpenLayers.Handler.Path, {
374 persist: true,
375 handlerOptions: {
376 layerOptions: {styleMap: rulerStyleMap}
377 }
378 }
379 );
380
381 rulerControl.events.on({
382 "measure": handleMeasurements,
383 "measurepartial": handleMeasurements
384 });
385 map.addControl(rulerControl);
386 }
387
388 function resize() {
389 size = new OpenLayers.Size(size.w + 10, size.h + 10);
390 icon.setSize(size);
391 }
392
393 function toggleFieldById(field) {
394 var e = document.getElementById(field);
395 if (e.style.visibility == "hidden") {
396 e.style.visibility = "visible";
397 } else {
398 e.style.visibility = "hidden";
399 }
400 }
401
402 function toggleClickControl() {
403 toggleFieldById('coordField');
404 if (!clickControl.active) {
405 clickControl.activate();
406 document.getElementById('click').src = url_pal3 + "icon32.png";
407 } else {
408 clickControl.deactivate();
409 document.getElementById('click').src = url_pal3 + "icon28.png";
410
411 }
412 }
413
414
415 function toggleRulerControl() {
416 if (!rulerControl.active) {
417 rulerControl.activate();
418 document.getElementById('ruler').src = "ruler_on.png";
419 } else {
420 rulerControl.deactivate();
421 document.getElementById('ruler').src = "ruler_off.png";
422 document.getElementById('output').innerHTML = "";
423 }
424 }
425
426 function defaultFocus() {
427 map.setCenter(new OpenLayers.LonLat(4.50,52.186).transform( projection_wgs, projection_smp), 12);
428 }
429
430 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
431 // ]]>
432
433</script>
434
435 </head>
436 <body onload="init()">
437 <div id="basicMap">
438 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
439 <img id="ruler" src="ruler_off.png"
440 onclick="toggleRulerControl()" alt="ruler" title="Measure distance between points"/>
441 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()" alt="Focus reset" />
442 <img height="22"
443 src="http://maps.google.com/mapfiles/kml/pal3/icon36.png"
444 title="Information" onclick="toggleFieldById('infoField')" alt="information" />
445 <img id="click" height="22"
446 src="http://maps.google.com/mapfiles/kml/pal3/icon28.png"
447 title="Get RD coordinates for use in Genesis" onclick="toggleClickControl()"
448 alt="coordinate converter"/>
449 <div id="output"></div>
450 </div>
451 <div id="infoField" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
452 <ul>
453 <li>holding down shift, whilst dragging the mouse to do box zooming</li>
454 <li>Keyboard Navigation is enabled</li>
455 <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>
456 </ul>
457<p>
458 <a href="http://validator.w3.org/check?uri=referer"><img
459 src="http://www.w3.org/Icons/valid-xhtml10" title="Valid XHTML 1.0 Strict"
460 alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
461 <a href="http://jslint.com"><img src="http://www.jslint.com/jslintpill.gif" title="Valid JavaScript code" alt="Valid JavaScript code" /></a>
462 </p>
463 </div>
464 <div id="coordField" style="position: absolute; bottom: 40px; left : 10px; z-index:1005; background-color: green; visibility: hidden">
465 Click on a location on the map to receive a link to calculate the RD coordinates: <br />
466 <a id="coordOutput" href="#" target="_blank">Click on MAP first</a>
467 </div>
468 </div>
469 </body>
470</html>
Note: See TracBrowser for help on using the repository browser.