source: genesis/nodes/nodemap.html@ 8453

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

Multiple stacked nodes are not readable/reachable by mouse. First attempt in
trying whether clustering is a good fit for this setup.
File size: 13.9 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="../lib/Firebug/firebug.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 function ignoreInterlink(cluster, feature) {
115 if (feature.attributes.name.indexOf('Interlink') != -1) {
116 return(false);
117 } else {
118 return strategy.shouldClusterOrig(cluster, feature); }
119 };
120
121 strategy = new OpenLayers.Strategy.Cluster();
122 strategy.shouldClusterOrig = strategy.shouldCluster;
123 strategy.shouldCluster = ignoreInterlink;
124 strategy.distance = 10;
125 strategy.threshold = 2;
126
127 var symbolizer = OpenLayers.Util.applyDefaults(
128 {externalGraphic: "http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png", pointRadius: 8, fillOpacity: 1},
129 OpenLayers.Feature.Vector.style["default"]);
130 var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 16,fillOpacity: 1}});
131
132 // Hack to get around all kind of caching fails
133 var epoch = new Date().getTime();
134 var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml?time=" + epoch,
135 { strategies: [strategy],
136 styleMap: styleMap,
137 format: OpenLayers.Format.KML,
138 formatOptions: {
139 extractStyles: true,
140 extractAttributes: true,
141 maxDepth: 5
142 }
143 });
144 map.addLayer(kml);
145
146 select = new OpenLayers.Control.SelectFeature(kml);
147 kml.events.on( {
148 "featureselected": onKMLFeatureSelect,
149 "featureunselected": onKMLFeatureUnselect
150 });
151 map.addControl(select);
152 select.activate();
153
154 clickControl = new OpenLayers.Control.Click();
155 map.addControl(clickControl);
156 clickControl.deactivate();
157
158
159 var vectors = new OpenLayers.Layer.Vector("Vector Layer")
160 map.addLayer(vectors);
161 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
162 map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
163 map.addControl(new OpenLayers.Control.LayerSwitcher());
164 map.addControl(new OpenLayers.Control.OverviewMap());
165 map.addControl(new OpenLayers.Control.Permalink());
166 map.addControl(new OpenLayers.Control.ScaleLine());
167 map.addControl(new OpenLayers.Control.KeyboardDefaults());
168 map.addControl(new OpenLayers.Control.ZoomBox());
169
170
171 //var in_options = {
172 // 'internalProjection': map.baseLayer.projection,
173 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
174 //};
175 //var wkt = new OpenLayers.Format.WKT(in_options);
176 //var txtFile = new XMLHttpRequest();
177 //txtFile.open("GET", "./wktfile.txt", false);
178 //// txtFile.onreadystatechange = function() {
179 //// if(txtFile.readyState == 4) {
180 //// alert(txtFile.responseText);
181 //// }
182 //// }
183 //txtFile.send(null);
184
185 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
186 //var bounds;
187 //
188 //if (features) {
189 // if(features.constructor != Array) {
190 // features = [features];
191 // }
192 // for(var i=0; i<features.length; ++i) {
193 // if (!bounds) {
194 // bounds = features[i].geometry.getBounds();
195 // }
196 // bounds.extend(features[i].geometry.getBounds());
197 // }
198 // vectors.addFeatures(features);
199 // map.zoomToExtent(bounds);
200 //} else {
201 // alert("ERROR in WTK");
202 //}
203
204
205 // style the sketch fancy
206 var sketchSymbolizers = {
207 "Point": {
208 pointRadius: 4,
209 graphicName: "square",
210 fillColor: "white",
211 fillOpacity: 1,
212 strokeWidth: 1,
213 strokeOpacity: 1,
214 strokeColor: "#333333"
215 },
216 "Line": {
217 strokeWidth: 3,
218 strokeOpacity: 1,
219 strokeColor: "#666666",
220 strokeDashstyle: "dash"
221 },
222 "Polygon": {
223 strokeWidth: 2,
224 strokeOpacity: 1,
225 strokeColor: "#666666",
226 fillColor: "white",
227 fillOpacity: 0.3
228 }
229 };
230 var style = new OpenLayers.Style();
231 style.addRules([
232 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
233 ]);
234 var styleMap = new OpenLayers.StyleMap({"default": style});
235
236 rulerControl = new OpenLayers.Control.Measure(
237 OpenLayers.Handler.Path, {
238 persist: true,
239 handlerOptions: {
240 layerOptions: {styleMap: styleMap}
241 }
242 }
243 );
244
245 rulerControl.events.on({
246 "measure": handleMeasurements,
247 "measurepartial": handleMeasurements
248 });
249 map.addControl(rulerControl);
250 }
251
252 function resize() {
253 size = new OpenLayers.Size(size.w + 10, size.h + 10);
254 icon.setSize(size);
255 }
256
257 function onPopupClose(evt) {
258 select.unselectAll();
259 }
260
261
262 function onKMLFeatureSelect(event) {
263 var feature = event.feature;
264 var content = "";
265 if (feature.cluster) {
266 for (var i = 0; i < feature.cluster.length; i++) {
267 var node = feature.cluster[i];
268 var content = content + "<h2>" + node.attributes.name + "</h2>" + node.attributes.description + "<br />";
269 }
270 } else {
271 var content = "<h2>" + feature.attributes.name + "</h2>" + feature.attributes.description;
272 }
273 popup = new OpenLayers.Popup.FramedCloud("chicken",
274 feature.geometry.getBounds().getCenterLonLat(),
275 new OpenLayers.Size(100,100),
276 content,
277 null, true, onPopupClose);
278 feature.popup = popup;
279 map.addPopup(popup);
280 }
281
282 function onKMLFeatureUnselect(event) {
283 var feature = event.feature;
284 if(feature.popup) {
285 map.removePopup(feature.popup);
286 feature.popup.destroy();
287 delete feature.popup;
288 }
289 }
290
291 function handleMeasurements(event) {
292 // For some reason 'delayed' events get posted even though the object
293 // is deactivated
294 if (!rulerControl.active) {
295 return;
296 }
297 var geometry = event.geometry;
298 var units = event.units;
299 var order = event.order;
300 var measure = event.measure;
301 var element = document.getElementById('output');
302 out = measure.toFixed(3) + " " + units;
303 if(order == 2) {
304 out += "<sup>2</" + "sup>";
305 } else {
306 }
307 element.innerHTML = out;
308 }
309
310 function toggleClickControl() {
311 if (!clickControl.active) {
312 clickControl.activate();
313 document.getElementById('click').src = url_pal3 + "icon32.png";
314 } else {
315 clickControl.deactivate();
316 document.getElementById('click').src = url_pal3 + "icon28.png";
317
318 }
319 }
320
321 function toggleRulerControl() {
322 if (!rulerControl.active) {
323 rulerControl.activate();
324 document.getElementById('ruler').src = "ruler_on.png";
325 } else {
326 rulerControl.deactivate();
327 document.getElementById('ruler').src = "ruler_off.png";
328 document.getElementById('output').innerHTML = "";
329 }
330 }
331
332 function defaultFocus() {
333 map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
334 .transform( projection_wgs, projection_smp), 12 // Zoom level
335 );
336 }
337
338 function toggleInfo() {
339 var e = document.getElementById('infofield');
340 if (e.style.visibility == "hidden") {
341 e.style.visibility = "visible";
342 } else {
343 e.style.visibility = "hidden";
344 };
345 }
346
347 function coordConvert(lam, phi) {
348 var lam_deg = Math.floor(lam);
349 var t = (lam - lam_deg) * 60;
350 var lam_min = Math.floor(t);
351 var lam_sec = (t - lam_min) * 60;
352
353 var phi_deg = Math.floor(phi);
354 var t = (phi - phi_deg) * 60;
355 var phi_min = Math.floor(t);
356 var phi_sec = (t - phi_min) * 60;
357
358 var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
359 "&lam_deg=" + lam_deg +
360 "&lam_min=" + lam_min +
361 "&lam_sec=" + lam_sec +
362 "&phi_deg=" + phi_deg +
363 "&phi_min=" + phi_min +
364 "&phi_sec=" + phi_sec
365 ;
366 return(url);
367 }
368
369
370 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
371 </script>
372 </head>
373 <body onload="init();">
374 <div id="basicMap">
375 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
376 <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
377 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()"/>
378 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" title="Information" onclick="toggleInfo()" />
379 <img id="click" height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon28.png" title="Coordinate converter" onclick="toggleClickControl()" />
380 <div id="output"></div>
381 </div>
382 <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
383 <ul>
384 <li>holding down shift, whilst dragging the mouse to do box zooming</li>
385 <li>Keyboard Navigation is enabled</li>
386 <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>
387
388
389 </ul>
390 </div>
391 </div>
392 </body>
393</html>
Note: See TracBrowser for help on using the repository browser.