source: genesis/nodes/nodemap.html@ 8447

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

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