source: genesis/nodes/nodemap.html@ 8302

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

Whoops html header was wrong
File size: 9.3 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 map, rulerControl;
18 var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
19 var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
20
21 function init() {
22 map = new OpenLayers.Map("basicMap");
23
24 var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
25 var mapnik = new OpenLayers.Layer.OSM("OpenStreepMap");
26 var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
27 { type: G_SATELLITE_MAP,
28 sphericalMercator: true,
29 maxExtent: world_bound,
30 wrapDateLine: false});
31 var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
32 { type: G_NORMAL_MAP,
33 sphericalMercator: true,
34 maxExtent: world_bound,
35 wrapDateLine: false});
36
37 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
38 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
39
40 map.addLayers([mapnik, google_sat, wms, google_normal]);
41 //map.setCenter(new OpenLayers.LonLat(4.40,52.186), 9);
42
43 defaultFocus();
44
45
46 //var pois = new OpenLayers.Layer.Text( "My Points",
47 // { location:"./textfile.txt",
48 // projection: map.displayProjection
49 // });
50 //map.addLayer(pois);
51
52 //function parseKML(req) {
53 // alert(req.responseText);
54 //};
55 //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
56
57 var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml",
58 { format: OpenLayers.Format.KML,
59 formatOptions: {
60 extractStyles: true,
61 extractAttributes: true,
62 maxDepth: 5
63 }
64 });
65 map.addLayer(kml);
66
67 select = new OpenLayers.Control.SelectFeature(kml);
68 kml.events.on( {
69 "featureselected": onKMLFeatureSelect,
70 "featureunselected": onKMLFeatureUnselect
71 });
72 map.addControl(select);
73 select.activate();
74
75 var vectors = new OpenLayers.Layer.Vector("Vector Layer")
76 map.addLayer(vectors);
77 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
78 map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
79 map.addControl(new OpenLayers.Control.LayerSwitcher());
80 map.addControl(new OpenLayers.Control.OverviewMap());
81 map.addControl(new OpenLayers.Control.Permalink());
82 map.addControl(new OpenLayers.Control.ScaleLine());
83 map.addControl(new OpenLayers.Control.KeyboardDefaults());
84 map.addControl(new OpenLayers.Control.ZoomBox());
85
86 //var in_options = {
87 // 'internalProjection': map.baseLayer.projection,
88 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
89 //};
90 //var wkt = new OpenLayers.Format.WKT(in_options);
91 //var txtFile = new XMLHttpRequest();
92 //txtFile.open("GET", "./wktfile.txt", false);
93 //// txtFile.onreadystatechange = function() {
94 //// if(txtFile.readyState == 4) {
95 //// alert(txtFile.responseText);
96 //// }
97 //// }
98 //txtFile.send(null);
99
100 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
101 //var bounds;
102 //
103 //if (features) {
104 // if(features.constructor != Array) {
105 // features = [features];
106 // }
107 // for(var i=0; i<features.length; ++i) {
108 // if (!bounds) {
109 // bounds = features[i].geometry.getBounds();
110 // }
111 // bounds.extend(features[i].geometry.getBounds());
112 // }
113 // vectors.addFeatures(features);
114 // map.zoomToExtent(bounds);
115 //} else {
116 // alert("ERROR in WTK");
117 //}
118
119
120 // style the sketch fancy
121 var sketchSymbolizers = {
122 "Point": {
123 pointRadius: 4,
124 graphicName: "square",
125 fillColor: "white",
126 fillOpacity: 1,
127 strokeWidth: 1,
128 strokeOpacity: 1,
129 strokeColor: "#333333"
130 },
131 "Line": {
132 strokeWidth: 3,
133 strokeOpacity: 1,
134 strokeColor: "#666666",
135 strokeDashstyle: "dash"
136 },
137 "Polygon": {
138 strokeWidth: 2,
139 strokeOpacity: 1,
140 strokeColor: "#666666",
141 fillColor: "white",
142 fillOpacity: 0.3
143 }
144 };
145 var style = new OpenLayers.Style();
146 style.addRules([
147 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
148 ]);
149 var styleMap = new OpenLayers.StyleMap({"default": style});
150
151 rulerControl = new OpenLayers.Control.Measure(
152 OpenLayers.Handler.Path, {
153 persist: true,
154 handlerOptions: {
155 layerOptions: {styleMap: styleMap}
156 }
157 }
158 );
159
160 rulerControl.events.on({
161 "measure": handleMeasurements,
162 "measurepartial": handleMeasurements
163 });
164 map.addControl(rulerControl);
165 }
166
167 function resize() {
168 size = new OpenLayers.Size(size.w + 10, size.h + 10);
169 icon.setSize(size);
170 }
171
172 function onPopupClose(evt) {
173 select.unselectAll();
174 }
175
176
177 function onKMLFeatureSelect(event) {
178 var feature = event.feature;
179 var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
180 popup = new OpenLayers.Popup.FramedCloud("chicken",
181 feature.geometry.getBounds().getCenterLonLat(),
182 new OpenLayers.Size(100,100),
183 content,
184 null, true, onPopupClose);
185 feature.popup = popup;
186 map.addPopup(popup);
187 }
188
189 function onKMLFeatureUnselect(event) {
190 var feature = event.feature;
191 if(feature.popup) {
192 map.removePopup(feature.popup);
193 feature.popup.destroy();
194 delete feature.popup;
195 }
196 }
197
198 function handleMeasurements(event) {
199 // For some reason 'delayed' events get posted even though the object
200 // is deactivated
201 if (!rulerControl.active) {
202 return;
203 }
204 var geometry = event.geometry;
205 var units = event.units;
206 var order = event.order;
207 var measure = event.measure;
208 var element = document.getElementById('output');
209 out = measure.toFixed(3) + " " + units;
210 if(order == 2) {
211 out += "<sup>2</" + "sup>";
212 } else {
213 }
214 element.innerHTML = out;
215 }
216
217 function toggleRulerControl() {
218 if (!rulerControl.active) {
219 rulerControl.activate();
220 document.getElementById('ruler').src = "ruler_on.png";
221 } else {
222 rulerControl.deactivate();
223 document.getElementById('ruler').src = "ruler_off.png";
224 document.getElementById('output').innerHTML = "";
225
226 }
227 }
228 function defaultFocus() {
229 map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
230 .transform( projection_wgs, projection_smp), 12 // Zoom level
231 );
232 }
233
234 function toggleInfo() {
235 var e = document.getElementById('infofield');
236 if (e.style.visibility == "hidden") {
237 e.style.visibility = "visible";
238 } else {
239 e.style.visibility = "hidden";
240 };
241 }
242
243 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
244 </script>
245 </head>
246 <body onload="init();">
247 <div id="basicMap">
248 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
249 <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
250 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
251 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" alt="Information" onclick="toggleInfo()" />
252 <div id="output"></div>
253 </div>
254 <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
255 <ul>
256 <li>holding down shift, whilst dragging the mouse to do box zooming</li>
257 <li>Keyboard Navigation is enabled</li>
258 </ul>
259 </div>
260 </div>
261 </body>
262</html>
Note: See TracBrowser for help on using the repository browser.