source: genesis/nodes/nodemap.html@ 8303

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

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