source: genesis/nodes/nodemap.html@ 8457

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

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