source: genesis/nodes/nodemap.html@ 8480

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