source: genesis/nodes/nodemap.html@ 8472

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

Made more clear where nagios do come from and enable external referral by default.

File size: 18.2 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">
3<html xmlns="http://www.w3.org/1999/xhtml">
[8280]4 <head>
[8468]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">
[8280]8 html, body, #basicMap {
9 width: 100%;
10 height: 100%;
11 margin: 0;
12 }
[8468]13 </style>
[8469]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>
[8468]17 <script type="text/javascript">
[8469]18 // <![CDATA[
[8304]19 var url_pal3 = "http://maps.google.com/mapfiles/kml/pal3/";
20 var map, rulerControl, clickControl;
[8303]21 var mapnik, wms;
[8283]22 var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
23 var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
[8468]24
[8303]25 var current_opacity = 0.5;
26 var max_opacity = 0.9;
27 var min_opacity = 0.1;
[8468]28
[8469]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';
[8468]34
[8457]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 }
[8468]43
[8456]44 function isInterlink(feature) {
45 return (feature.attributes.name.indexOf('Interlink') != -1);
46 }
[8469]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;
[8468]53
[8469]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
[8471]70 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
[8304]71 defaultHandlerOptions: {
72 'single': true,
73 'double': false,
74 'pixelTolerance': 0,
75 'stopSingle': false,
76 'stopDouble': false
77 },
[8468]78
[8304]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 },
[8468]92
[8304]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);
[8471]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";
[8304]99 }
[8468]100
[8304]101 });
[8468]102
103
[8303]104 function setOpacity(new_opacity) {
105 current_opacity = new_opacity;
106 mapnik.setOpacity(new_opacity);
107 wms.setOpacity(new_opacity);
108 }
[8468]109
[8303]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 }
[8468]115
[8280]116 function init() {
117 map = new OpenLayers.Map("basicMap");
[8468]118
[8283]119 var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
[8303]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'} );
[8468]124
[8303]125 // Added extra's
[8283]126 var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
127 { type: G_SATELLITE_MAP,
128 sphericalMercator: true,
129 maxExtent: world_bound,
[8469]130 wrapDateLine: false
[8303]131 });
[8283]132 var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
133 { type: G_NORMAL_MAP,
134 sphericalMercator: true,
135 maxExtent: world_bound,
[8303]136 wrapDateLine: false
137 });
[8468]138
[8303]139
140 map.addLayers([mapnik, wms, google_sat, google_normal]);
141 setOpacity(0.5);
[8283]142 defaultFocus();
[8468]143
144
[8282]145 //var pois = new OpenLayers.Layer.Text( "My Points",
146 // { location:"./textfile.txt",
147 // projection: map.displayProjection
148 // });
149 //map.addLayer(pois);
[8468]150
[8283]151 //function parseKML(req) {
152 // alert(req.responseText);
153 //};
154 //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
[8468]155
156
[8453]157 function ignoreInterlink(cluster, feature) {
[8456]158 if (isInterlink(feature)) {
[8469]159 return(false);
[8453]160 } else {
161 return strategy.shouldClusterOrig(cluster, feature); }
[8469]162 }
[8468]163
[8447]164 strategy = new OpenLayers.Strategy.Cluster();
[8453]165 strategy.shouldClusterOrig = strategy.shouldCluster;
166 strategy.shouldCluster = ignoreInterlink;
167 strategy.distance = 10;
168 strategy.threshold = 2;
[8468]169
[8454]170 //OpenLayers.Feature.Vector.style["default"]);
[8468]171
[8454]172 var symbolizer = new OpenLayers.Style({
173 externalGraphic: "${icon}",
174 pointRadius: "${radius}",
[8469]175 fillOpacity: 1
[8454]176 }, { context : {
177 icon : function(feature) {
[8469]178 var iconStatus = "DEADCODE";
[8454]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];
[8457]197 log(node.attributes.styleUrl);
[8454]198 }
199 }
200 return pix;
201 }
202 }
203 });
[8468]204
[8453]205 var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 16,fillOpacity: 1}});
[8468]206
[8307]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,
[8447]210 { strategies: [strategy],
[8453]211 styleMap: styleMap,
[8447]212 format: OpenLayers.Format.KML,
[8282]213 formatOptions: {
214 extractStyles: true,
215 extractAttributes: true,
[8285]216 maxDepth: 5
[8282]217 }
218 });
219 map.addLayer(kml);
[8469]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 {
[8472]239 var nagiosRoot = 'http://sunfire.wirelessleiden.nl/nagios';
[8469]240 var nodeName = feature.attributes.name.split(' ')[1];
[8472]241 var nagiosUrl = nagiosRoot + "/cgi-bin/status.cgi?host=" + nodeName + "&servicestatustypes=28&hoststatustypes=15&noheader=true";
242
243 content = "Status provided by <a href='" + nagiosRoot +
244 "/'>Nagios monitoring system</a><br />" +
245 "<iframe frameborder='0' height='300px' width='700px'" +
246 "src='" + nagiosUrl + "'></iframe>" +
247 "<br />" +
248 "<em>Locatie: " + feature.attributes.description + "</em>";
[8469]249 }
250 }
251 popup = new OpenLayers.Popup.FramedCloud("chicken",
252 feature.geometry.getBounds().getCenterLonLat(),
253 new OpenLayers.Size(100,100),
254 content,
255 null, true, onPopupClose);
256 feature.popup = popup;
257 map.addPopup(popup);
258 }
[8468]259
[8469]260 function onKMLFeatureUnselect(event) {
261 var feature = event.feature;
262 if(feature.popup) {
263 map.removePopup(feature.popup);
264 feature.popup.destroy();
265 delete feature.popup;
266 }
267 }
268
269 function handleMeasurements(event) {
270 // For some reason 'delayed' events get posted even though the object
271 // is deactivated
272 if (!rulerControl.active) {
273 return;
274 }
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
[8285]287 select = new OpenLayers.Control.SelectFeature(kml);
288 kml.events.on( {
289 "featureselected": onKMLFeatureSelect,
290 "featureunselected": onKMLFeatureUnselect
291 });
292 map.addControl(select);
293 select.activate();
[8468]294
[8304]295 clickControl = new OpenLayers.Control.Click();
296 map.addControl(clickControl);
297 clickControl.deactivate();
[8468]298
299
[8471]300 // XXX: Enable if we found some use for it somewhere
301 // var vectors = new OpenLayers.Layer.Vector("Vector Layer");
302 // map.addLayer(vectors);
303 // map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
304
[8283]305 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
306 map.addControl(new OpenLayers.Control.LayerSwitcher());
307 map.addControl(new OpenLayers.Control.OverviewMap());
308 map.addControl(new OpenLayers.Control.Permalink());
309 map.addControl(new OpenLayers.Control.ScaleLine());
310 map.addControl(new OpenLayers.Control.KeyboardDefaults());
[8285]311 map.addControl(new OpenLayers.Control.ZoomBox());
[8468]312
313
[8282]314 //var in_options = {
315 // 'internalProjection': map.baseLayer.projection,
316 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
317 //};
318 //var wkt = new OpenLayers.Format.WKT(in_options);
319 //var txtFile = new XMLHttpRequest();
320 //txtFile.open("GET", "./wktfile.txt", false);
321 //// txtFile.onreadystatechange = function() {
322 //// if(txtFile.readyState == 4) {
323 //// alert(txtFile.responseText);
324 //// }
325 //// }
326 //txtFile.send(null);
[8468]327
[8282]328 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
329 //var bounds;
330 //
331 //if (features) {
332 // if(features.constructor != Array) {
333 // features = [features];
334 // }
335 // for(var i=0; i<features.length; ++i) {
336 // if (!bounds) {
337 // bounds = features[i].geometry.getBounds();
338 // }
339 // bounds.extend(features[i].geometry.getBounds());
340 // }
341 // vectors.addFeatures(features);
342 // map.zoomToExtent(bounds);
343 //} else {
344 // alert("ERROR in WTK");
345 //}
[8468]346
347
[8283]348 // style the sketch fancy
349 var sketchSymbolizers = {
350 "Point": {
351 pointRadius: 4,
352 graphicName: "square",
353 fillColor: "white",
354 fillOpacity: 1,
355 strokeWidth: 1,
356 strokeOpacity: 1,
357 strokeColor: "#333333"
358 },
359 "Line": {
360 strokeWidth: 3,
361 strokeOpacity: 1,
362 strokeColor: "#666666",
363 strokeDashstyle: "dash"
364 },
365 "Polygon": {
366 strokeWidth: 2,
367 strokeOpacity: 1,
368 strokeColor: "#666666",
369 fillColor: "white",
370 fillOpacity: 0.3
371 }
372 };
373 var style = new OpenLayers.Style();
374 style.addRules([
375 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
376 ]);
[8469]377 var rulerStyleMap = new OpenLayers.StyleMap({"default": style});
[8283]378
379 rulerControl = new OpenLayers.Control.Measure(
380 OpenLayers.Handler.Path, {
381 persist: true,
382 handlerOptions: {
[8469]383 layerOptions: {styleMap: rulerStyleMap}
[8283]384 }
385 }
[8280]386 );
[8468]387
[8283]388 rulerControl.events.on({
389 "measure": handleMeasurements,
390 "measurepartial": handleMeasurements
391 });
392 map.addControl(rulerControl);
[8280]393 }
[8468]394
[8283]395 function resize() {
396 size = new OpenLayers.Size(size.w + 10, size.h + 10);
397 icon.setSize(size);
398 }
[8468]399
[8471]400 function toggleFieldById(field) {
401 var e = document.getElementById(field);
402 if (e.style.visibility == "hidden") {
403 e.style.visibility = "visible";
404 } else {
405 e.style.visibility = "hidden";
406 }
407 }
[8468]408
[8304]409 function toggleClickControl() {
[8471]410 toggleFieldById('coordField');
[8304]411 if (!clickControl.active) {
412 clickControl.activate();
413 document.getElementById('click').src = url_pal3 + "icon32.png";
414 } else {
415 clickControl.deactivate();
416 document.getElementById('click').src = url_pal3 + "icon28.png";
417
418 }
419 }
[8468]420
[8471]421
[8283]422 function toggleRulerControl() {
423 if (!rulerControl.active) {
424 rulerControl.activate();
425 document.getElementById('ruler').src = "ruler_on.png";
426 } else {
427 rulerControl.deactivate();
428 document.getElementById('ruler').src = "ruler_off.png";
[8305]429 document.getElementById('output').innerHTML = "";
[8283]430 }
431 }
[8468]432
[8283]433 function defaultFocus() {
[8469]434 map.setCenter(new OpenLayers.LonLat(4.50,52.186).transform( projection_wgs, projection_smp), 12);
[8283]435 }
[8468]436
437 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
[8469]438 // ]]>
[8304]439
[8468]440</script>
[8304]441
[8280]442 </head>
[8469]443 <body onload="init()">
[8283]444 <div id="basicMap">
[8285]445 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
[8471]446 <img id="ruler" src="ruler_off.png"
447 onclick="toggleRulerControl()" alt="ruler" title="Measure distance between points"/>
[8468]448 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()" alt="Focus reset" />
449 <img height="22"
450 src="http://maps.google.com/mapfiles/kml/pal3/icon36.png"
[8471]451 title="Information" onclick="toggleFieldById('infoField')" alt="information" />
[8468]452 <img id="click" height="22"
453 src="http://maps.google.com/mapfiles/kml/pal3/icon28.png"
[8471]454 title="Get RD coordinates for use in Genesis" onclick="toggleClickControl()"
[8468]455 alt="coordinate converter"/>
[8285]456 <div id="output"></div>
457 </div>
[8471]458 <div id="infoField" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
[8285]459 <ul>
460 <li>holding down shift, whilst dragging the mouse to do box zooming</li>
461 <li>Keyboard Navigation is enabled</li>
[8303]462 <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>
[8285]463 </ul>
[8469]464<p>
465 <a href="http://validator.w3.org/check?uri=referer"><img
466 src="http://www.w3.org/Icons/valid-xhtml10" title="Valid XHTML 1.0 Strict"
467 alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
468 <a href="http://jslint.com"><img src="http://www.jslint.com/jslintpill.gif" title="Valid JavaScript code" alt="Valid JavaScript code" /></a>
469 </p>
[8285]470 </div>
[8471]471 <div id="coordField" style="position: absolute; bottom: 40px; left : 10px; z-index:1005; background-color: green; visibility: hidden">
472 Click on a location on the map to receive a link to calculate the RD coordinates: <br />
473 <a id="coordOutput" href="#" target="_blank">Click on MAP first</a>
474 </div>
[8283]475 </div>
[8280]476 </body>
477</html>
Note: See TracBrowser for help on using the repository browser.