source: genesis/nodes/nodemap.html@ 8305

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

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