source: genesis/nodes/nodemap.html@ 8478

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

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