source: genesis/nodes/nodemap.html@ 8283

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

More layers, buttons and other cool stuff added
File size: 7.4 KB
RevLine 
[8280]1<html>
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>
[8283]11 <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></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>
[8283]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
[8280]21 function init() {
22 map = new OpenLayers.Map("basicMap");
23
[8283]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
[8282]46 //var pois = new OpenLayers.Layer.Text( "My Points",
47 // { location:"./textfile.txt",
48 // projection: map.displayProjection
49 // });
50 //map.addLayer(pois);
[8280]51
[8283]52 //function parseKML(req) {
53 // alert(req.responseText);
54 //};
55 //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
56
[8282]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: 2
63 }
64 });
65 map.addLayer(kml);
[8280]66
67
[8283]68 var vectors = new OpenLayers.Layer.Vector("Vector Layer")
69 map.addLayer(vectors);
70 map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
71 map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
72 map.addControl(new OpenLayers.Control.LayerSwitcher());
73 map.addControl(new OpenLayers.Control.OverviewMap());
74 map.addControl(new OpenLayers.Control.Permalink());
75 map.addControl(new OpenLayers.Control.ScaleLine());
76 map.addControl(new OpenLayers.Control.KeyboardDefaults());
[8280]77
[8282]78 //var in_options = {
79 // 'internalProjection': map.baseLayer.projection,
80 // 'externalProjection': new OpenLayers.Projection("EPSG:4326")
81 //};
82 //var wkt = new OpenLayers.Format.WKT(in_options);
83 //var txtFile = new XMLHttpRequest();
84 //txtFile.open("GET", "./wktfile.txt", false);
85 //// txtFile.onreadystatechange = function() {
86 //// if(txtFile.readyState == 4) {
87 //// alert(txtFile.responseText);
88 //// }
89 //// }
90 //txtFile.send(null);
91
92 //var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
93 //var bounds;
94 //
95 //if (features) {
96 // if(features.constructor != Array) {
97 // features = [features];
98 // }
99 // for(var i=0; i<features.length; ++i) {
100 // if (!bounds) {
101 // bounds = features[i].geometry.getBounds();
102 // }
103 // bounds.extend(features[i].geometry.getBounds());
104 // }
105 // vectors.addFeatures(features);
106 // map.zoomToExtent(bounds);
107 //} else {
108 // alert("ERROR in WTK");
109 //}
110
[8283]111
112 // style the sketch fancy
113 var sketchSymbolizers = {
114 "Point": {
115 pointRadius: 4,
116 graphicName: "square",
117 fillColor: "white",
118 fillOpacity: 1,
119 strokeWidth: 1,
120 strokeOpacity: 1,
121 strokeColor: "#333333"
122 },
123 "Line": {
124 strokeWidth: 3,
125 strokeOpacity: 1,
126 strokeColor: "#666666",
127 strokeDashstyle: "dash"
128 },
129 "Polygon": {
130 strokeWidth: 2,
131 strokeOpacity: 1,
132 strokeColor: "#666666",
133 fillColor: "white",
134 fillOpacity: 0.3
135 }
136 };
137 var style = new OpenLayers.Style();
138 style.addRules([
139 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
140 ]);
141 var styleMap = new OpenLayers.StyleMap({"default": style});
142
143 rulerControl = new OpenLayers.Control.Measure(
144 OpenLayers.Handler.Path, {
145 persist: true,
146 handlerOptions: {
147 layerOptions: {styleMap: styleMap}
148 }
149 }
[8280]150 );
[8283]151
152 rulerControl.events.on({
153 "measure": handleMeasurements,
154 "measurepartial": handleMeasurements
155 });
156 map.addControl(rulerControl);
[8280]157 }
[8283]158
159 function resize() {
160 size = new OpenLayers.Size(size.w + 10, size.h + 10);
161 icon.setSize(size);
162 }
163
164
165 function handleMeasurements(event) {
166 // For some reason 'delayed' events get posted even though the object
167 // is deactivated
168 if (!rulerControl.active) {
169 return;
170 }
171 var geometry = event.geometry;
172 var units = event.units;
173 var order = event.order;
174 var measure = event.measure;
175 var element = document.getElementById('output');
176 out = measure.toFixed(3) + " " + units;
177 if(order == 2) {
178 out += "<sup>2</" + "sup>";
179 } else {
180 }
181 element.innerHTML = out;
182 }
183
184 function toggleRulerControl() {
185 if (!rulerControl.active) {
186 rulerControl.activate();
187 document.getElementById('ruler').src = "ruler_on.png";
188 } else {
189 rulerControl.deactivate();
190 document.getElementById('ruler').src = "ruler_off.png";
191 document.getElementById('output').innerHTML = "";
192
193 }
194 }
195 function defaultFocus() {
196 map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
197 .transform( projection_wgs, projection_smp), 12 // Zoom level
198 );
199 }
200
201 // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
[8280]202 </script>
203 </head>
204 <body onload="init();">
[8283]205 <div id="basicMap">
206 <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
207 <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
208 <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
209 <div id="output"></div>
210 </div>
211 </div>
[8280]212 </body>
213</html>
Note: See TracBrowser for help on using the repository browser.