Context Navigation

source: genesis/nodes/nodemap.html@ 8468

Last change on this file since 8468 was 8468, checked in by rick, 15 years ago
Make XHTML valid
File size: 17.3 KB

Rev	Line
[8468]	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	2	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	3	<html xmlns="http://www.w3.org/1999/xhtml">
[8280]	4	<head>
[8468]	5	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	6	<title>Wireless Leiden Nodemap using OpenLayers.org and OpenSteetmap.org</title>
	7	<style type="text/css">
[8280]	8	html, body, #basicMap {
	9	width: 100%;
	10	height: 100%;
	11	margin: 0;
	12	}
[8468]	13	</style>
	14	<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript" />
	15	<script src="http://openlayers.org/dev/OpenLayers.js" type="text/javascript" />
	16	<script type="text/javascript">
[8282]	17
[8468]	18	<![CDATA[
[8304]	19	var url_pal3 = "http://maps.google.com/mapfiles/kml/pal3/";
	20	var map, rulerControl, clickControl;
[8303]	21	var mapnik, wms;
[8283]	22	var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
	23	var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
[8468]	24
[8303]	25	var current_opacity = 0.5;
	26	var max_opacity = 0.9;
	27	var min_opacity = 0.1;
[8468]	28
[8454]	29	var nodeStatusImg = new Array();
	30	nodeStatusImg['up'] = 'http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png';
	31	nodeStatusImg['down'] = 'http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png';
	32	nodeStatusImg['planned'] = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
	33	nodeStatusImg['unknown'] = 'http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png';
[8468]	34
[8457]	35	function log(message) {
	36	/* Determine whether Firebug is actually installed and activated before trying to log
	37	* Taken from http://code.google.com/p/fbug/source/browse/branches/firebug1.5/lite/firebugx.js
	38	*/
	39	if (window.console && console.firebug) {
	40	console.log(message);
	41	}
	42	}
[8468]	43
[8456]	44	function isInterlink(feature) {
	45	return (feature.attributes.name.indexOf('Interlink') != -1);
	46	}
[8468]	47
[8304]	48	OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
	49	defaultHandlerOptions: {
	50	'single': true,
	51	'double': false,
	52	'pixelTolerance': 0,
	53	'stopSingle': false,
	54	'stopDouble': false
	55	},
[8468]	56
[8304]	57	initialize: function(options) {
	58	this.handlerOptions = OpenLayers.Util.extend(
	59	{}, this.defaultHandlerOptions
	60	);
	61	OpenLayers.Control.prototype.initialize.apply(
	62	this, arguments
	63	);
	64	this.handler = new OpenLayers.Handler.Click(
	65	this, {
	66	'click': this.trigger
	67	}, this.handlerOptions
	68	);
	69	},
[8468]	70
[8304]	71	trigger: function(e) {
	72	var lonlat = map.getLonLatFromViewPortPx(e.xy);
	73	lonlat = lonlat.transform( projection_smp, projection_wgs);
	74	var url = coordConvert(lonlat.lon, lonlat.lat);
	75	alert("You clicked near " + lonlat.lon + " N, " +
	76	+ lonlat.lat + " E\n\n" +
	77	'Copy/paste URL in NEW browser window to get your RDNAP coordinates\n\n' + url);
	78	}
[8468]	79
[8304]	80	});
[8468]	81
	82
[8303]	83	function setOpacity(new_opacity) {
	84	current_opacity = new_opacity;
	85	mapnik.setOpacity(new_opacity);
	86	wms.setOpacity(new_opacity);
	87	}
[8468]	88
[8303]	89	function changeOpacity(by_opacity) {
	90	var new_opacity = current_opacity + by_opacity;
	91	new_opacity = Math.min(max_opacity, Math.max(min_opacity, new_opacity));
	92	setOpacity(new_opacity);
	93	}
[8468]	94
[8280]	95	function init() {
	96	map = new OpenLayers.Map("basicMap");
[8468]	97
[8283]	98	var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
[8303]	99	// Development focus maps
	100	mapnik = new OpenLayers.Layer.OSM("OpenStreetMap");
	101	wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	102	"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
[8468]	103
[8303]	104	// Added extra's
[8283]	105	var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
	106	{ type: G_SATELLITE_MAP,
	107	sphericalMercator: true,
	108	maxExtent: world_bound,
[8303]	109	wrapDateLine: false,
	110	});
[8283]	111	var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
	112	{ type: G_NORMAL_MAP,
	113	sphericalMercator: true,
	114	maxExtent: world_bound,
[8303]	115	wrapDateLine: false
	116	});
[8468]	117
[8303]	118
	119	map.addLayers([mapnik, wms, google_sat, google_normal]);
	120	setOpacity(0.5);
[8283]	121	defaultFocus();
[8468]	122
	123
[8282]	124	//var pois = new OpenLayers.Layer.Text( "My Points",
	125	// { location:"./textfile.txt",
	126	// projection: map.displayProjection
	127	// });
	128	//map.addLayer(pois);
[8468]	129
[8283]	130	//function parseKML(req) {
	131	// alert(req.responseText);
	132	//};
	133	//alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
[8468]	134
	135
[8453]	136	function ignoreInterlink(cluster, feature) {
[8456]	137	if (isInterlink(feature)) {
[8453]	138	return(false);
	139	} else {
	140	return strategy.shouldClusterOrig(cluster, feature); }
	141	};
[8468]	142
[8447]	143	strategy = new OpenLayers.Strategy.Cluster();
[8453]	144	strategy.shouldClusterOrig = strategy.shouldCluster;
	145	strategy.shouldCluster = ignoreInterlink;
	146	strategy.distance = 10;
	147	strategy.threshold = 2;
[8468]	148
[8454]	149	//OpenLayers.Feature.Vector.style["default"]);
[8468]	150
[8454]	151	var symbolizer = new OpenLayers.Style({
	152	externalGraphic: "${icon}",
	153	pointRadius: "${radius}",
	154	fillOpacity: 1,
	155	}, { context : {
	156	icon : function(feature) {
	157	var iconStatus = "DEADCODE"
	158	if(feature.cluster) {
	159	for (var i = 0; i < feature.cluster.length; i++) {
	160	var nodeStatus = feature.cluster[i].attributes.styleUrl.split('_')[2];
	161	iconStatus = nodeStatus;
	162	// If one if having issues, update the overview icon to reflect this
	163	if (nodeStatus == 'unknown' \|\| nodeStatus == 'planned' \|\| nodeStatus == 'down') { break; }
	164	}
	165	} else {
	166	iconStatus = feature.attributes.styleUrl.split('_')[2];
	167	}
	168	return nodeStatusImg[iconStatus];
	169	},
	170	radius : function(feature) {
	171	var pix = 8;
	172	if(feature.cluster) {
	173	pix = pix + feature.attributes.count;
	174	for (var i = 0; i < feature.cluster.length; i++) {
	175	var node = feature.cluster[i];
[8457]	176	log(node.attributes.styleUrl);
[8454]	177	}
	178	}
	179	return pix;
	180	}
	181	}
	182	});
[8468]	183
[8453]	184	var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 16,fillOpacity: 1}});
[8468]	185
[8307]	186	// Hack to get around all kind of caching fails
	187	var epoch = new Date().getTime();
	188	var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml?time=" + epoch,
[8447]	189	{ strategies: [strategy],
[8453]	190	styleMap: styleMap,
[8447]	191	format: OpenLayers.Format.KML,
[8282]	192	formatOptions: {
	193	extractStyles: true,
	194	extractAttributes: true,
[8285]	195	maxDepth: 5
[8282]	196	}
	197	});
	198	map.addLayer(kml);
[8468]	199
[8285]	200	select = new OpenLayers.Control.SelectFeature(kml);
	201	kml.events.on( {
	202	"featureselected": onKMLFeatureSelect,
	203	"featureunselected": onKMLFeatureUnselect
	204	});
	205	map.addControl(select);
	206	select.activate();
[8468]	207
[8304]	208	clickControl = new OpenLayers.Control.Click();
	209	map.addControl(clickControl);
	210	clickControl.deactivate();
[8468]	211
	212
[8283]	213	var vectors = new OpenLayers.Layer.Vector("Vector Layer")
	214	map.addLayer(vectors);
	215	map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
	216	map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
	217	map.addControl(new OpenLayers.Control.LayerSwitcher());
	218	map.addControl(new OpenLayers.Control.OverviewMap());
	219	map.addControl(new OpenLayers.Control.Permalink());
	220	map.addControl(new OpenLayers.Control.ScaleLine());
	221	map.addControl(new OpenLayers.Control.KeyboardDefaults());
[8285]	222	map.addControl(new OpenLayers.Control.ZoomBox());
[8468]	223
	224
[8282]	225	//var in_options = {
	226	// 'internalProjection': map.baseLayer.projection,
	227	// 'externalProjection': new OpenLayers.Projection("EPSG:4326")
	228	//};
	229	//var wkt = new OpenLayers.Format.WKT(in_options);
	230	//var txtFile = new XMLHttpRequest();
	231	//txtFile.open("GET", "./wktfile.txt", false);
	232	//// txtFile.onreadystatechange = function() {
	233	//// if(txtFile.readyState == 4) {
	234	//// alert(txtFile.responseText);
	235	//// }
	236	//// }
	237	//txtFile.send(null);
[8468]	238
[8282]	239	//var features = wkt.read(txtFile.responseText.replace(/\n/g,''));
	240	//var bounds;
	241	//
	242	//if (features) {
	243	// if(features.constructor != Array) {
	244	// features = [features];
	245	// }
	246	// for(var i=0; i<features.length; ++i) {
	247	// if (!bounds) {
	248	// bounds = features[i].geometry.getBounds();
	249	// }
	250	// bounds.extend(features[i].geometry.getBounds());
	251	// }
	252	// vectors.addFeatures(features);
	253	// map.zoomToExtent(bounds);
	254	//} else {
	255	// alert("ERROR in WTK");
	256	//}
[8468]	257
	258
[8283]	259	// style the sketch fancy
	260	var sketchSymbolizers = {
	261	"Point": {
	262	pointRadius: 4,
	263	graphicName: "square",
	264	fillColor: "white",
	265	fillOpacity: 1,
	266	strokeWidth: 1,
	267	strokeOpacity: 1,
	268	strokeColor: "#333333"
	269	},
	270	"Line": {
	271	strokeWidth: 3,
	272	strokeOpacity: 1,
	273	strokeColor: "#666666",
	274	strokeDashstyle: "dash"
	275	},
	276	"Polygon": {
	277	strokeWidth: 2,
	278	strokeOpacity: 1,
	279	strokeColor: "#666666",
	280	fillColor: "white",
	281	fillOpacity: 0.3
	282	}
	283	};
	284	var style = new OpenLayers.Style();
	285	style.addRules([
	286	new OpenLayers.Rule({symbolizer: sketchSymbolizers})
	287	]);
	288	var styleMap = new OpenLayers.StyleMap({"default": style});
	289
	290	rulerControl = new OpenLayers.Control.Measure(
	291	OpenLayers.Handler.Path, {
	292	persist: true,
	293	handlerOptions: {
	294	layerOptions: {styleMap: styleMap}
	295	}
	296	}
[8280]	297	);
[8468]	298
[8283]	299	rulerControl.events.on({
	300	"measure": handleMeasurements,
	301	"measurepartial": handleMeasurements
	302	});
	303	map.addControl(rulerControl);
[8280]	304	}
[8468]	305
[8283]	306	function resize() {
	307	size = new OpenLayers.Size(size.w + 10, size.h + 10);
	308	icon.setSize(size);
	309	}
[8468]	310
[8285]	311	function onPopupClose(evt) {
	312	select.unselectAll();
	313	}
[8468]	314
	315
	316
[8285]	317	function onKMLFeatureSelect(event) {
	318	var feature = event.feature;
[8447]	319	var content = "";
	320	if (feature.cluster) {
	321	for (var i = 0; i < feature.cluster.length; i++) {
	322	var node = feature.cluster[i];
[8454]	323	iconStatus = node.attributes.styleUrl.split('_')[2];
	324	iconImg = nodeStatusImg[iconStatus];
[8456]	325	content = content + "<h4><img src='" + iconImg + "' />" + node.attributes.name + "</h4>" + node.attributes.description + "<br />";
[8447]	326	}
	327	} else {
[8456]	328	if (isInterlink(feature)) {
	329	content = "<h4>" + feature.attributes.name + "</h4>" + "<br />" + "<em>Link information: " + feature.attributes.description + "</em>";
	330	} else {
	331	var nodeName = feature.attributes.name.split(' ')[1];
[8457]	332	log(nodeName);
[8456]	333	content = "<iframe frameborder='0' height='300px' width='700px' src='http://sunny.wleiden.net/nagios/cgi-bin/status.cgi?host=" + nodeName + "&servicestatustypes=28&hoststatustypes=15&noheader=true'></iframe><br />" + "<em>Locatie: " + feature.attributes.description + "</em>";
	334	}
[8447]	335	}
[8285]	336	popup = new OpenLayers.Popup.FramedCloud("chicken",
	337	feature.geometry.getBounds().getCenterLonLat(),
	338	new OpenLayers.Size(100,100),
	339	content,
	340	null, true, onPopupClose);
	341	feature.popup = popup;
	342	map.addPopup(popup);
	343	}
[8468]	344
[8285]	345	function onKMLFeatureUnselect(event) {
	346	var feature = event.feature;
	347	if(feature.popup) {
	348	map.removePopup(feature.popup);
	349	feature.popup.destroy();
	350	delete feature.popup;
	351	}
	352	}
[8468]	353
[8283]	354	function handleMeasurements(event) {
	355	// For some reason 'delayed' events get posted even though the object
	356	// is deactivated
	357	if (!rulerControl.active) {
	358	return;
	359	}
	360	var geometry = event.geometry;
	361	var units = event.units;
	362	var order = event.order;
	363	var measure = event.measure;
	364	var element = document.getElementById('output');
	365	out = measure.toFixed(3) + " " + units;
	366	if(order == 2) {
	367	out += "<sup>2</" + "sup>";
	368	} else {
	369	}
	370	element.innerHTML = out;
	371	}
[8468]	372
[8304]	373	function toggleClickControl() {
	374	if (!clickControl.active) {
	375	clickControl.activate();
	376	document.getElementById('click').src = url_pal3 + "icon32.png";
	377	} else {
	378	clickControl.deactivate();
	379	document.getElementById('click').src = url_pal3 + "icon28.png";
	380
	381	}
	382	}
[8468]	383
[8283]	384	function toggleRulerControl() {
	385	if (!rulerControl.active) {
	386	rulerControl.activate();
	387	document.getElementById('ruler').src = "ruler_on.png";
	388	} else {
	389	rulerControl.deactivate();
	390	document.getElementById('ruler').src = "ruler_off.png";
[8305]	391	document.getElementById('output').innerHTML = "";
[8283]	392	}
	393	}
[8468]	394
[8283]	395	function defaultFocus() {
	396	map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
	397	.transform( projection_wgs, projection_smp), 12 // Zoom level
	398	);
	399	}
[8468]	400
[8285]	401	function toggleInfo() {
	402	var e = document.getElementById('infofield');
	403	if (e.style.visibility == "hidden") {
	404	e.style.visibility = "visible";
	405	} else {
	406	e.style.visibility = "hidden";
	407	};
	408	}
[8468]	409
	410	function coordConvert(lam, phi) {
[8304]	411	var lam_deg = Math.floor(lam);
	412	var t = (lam - lam_deg) * 60;
	413	var lam_min = Math.floor(t);
	414	var lam_sec = (t - lam_min) * 60;
[8468]	415
[8304]	416	var phi_deg = Math.floor(phi);
	417	var t = (phi - phi_deg) * 60;
	418	var phi_min = Math.floor(t);
	419	var phi_sec = (t - phi_min) * 60;
	420
	421	var url = "http://www.rdnap.nl/cgi-bin/rdetrs.pl?func=etrs2rd&h=0" +
	422	"&lam_deg=" + lam_deg +
	423	"&lam_min=" + lam_min +
	424	"&lam_sec=" + lam_sec +
	425	"&phi_deg=" + phi_deg +
	426	"&phi_min=" + phi_min +
	427	"&phi_sec=" + phi_sec
	428	;
	429	return(url);
	430	}
[8468]	431
	432	// http://openlayers.org/dev/examples/strategy-cluster-threshold.html
	433	]]>
[8304]	434
[8468]	435	</script>
[8304]	436
[8280]	437	</head>
	438	<body onload="init();">
[8283]	439	<div id="basicMap">
[8285]	440	<div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
[8468]	441	<img id="ruler" src="ruler_off.png" onclick="toggleRulerControl()" alt="ruler"/>
	442	<img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()" alt="Focus reset" />
	443	<img height="22"
	444	src="http://maps.google.com/mapfiles/kml/pal3/icon36.png"
	445	title="Information" onclick="toggleInfo()" alt="information" />
	446	<img id="click" height="22"
	447	src="http://maps.google.com/mapfiles/kml/pal3/icon28.png"
	448	title="Coordinate converter" onclick="toggleClickControl()"
	449	alt="coordinate converter"/>
[8285]	450	<div id="output"></div>
	451	</div>
	452	<div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
	453	<ul>
	454	<li>holding down shift, whilst dragging the mouse to do box zooming</li>
	455	<li>Keyboard Navigation is enabled</li>
[8303]	456	<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>
	457
	458
[8285]	459	</ul>
	460	</div>
[8283]	461	</div>
[8280]	462	</body>
	463	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: