source: genesis/nodes/nodemap.html@ 8399

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

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