source: genesis/nodes/nodemap.html@ 8468

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

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