source: genesis/nodes/nodemap.html@ 8454

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

Nodemap refactoring to allow better readable output:

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