source: genesis/nodes/nodemap.html@ 8594

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

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