source: genesis/nodes/nodemap.html@ 8469

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

Cross-browser compatible:

Made it valid according to w3c validator, jslint, and IE8, Firefox, Chrome, Opera developer consoles.

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