Context Navigation

source: genesis/nodes/nodemap.html@ 8456

Last change on this file since 8456 was 8456, checked in by rick, 15 years ago
Nagios node information if node is having issues.
File size: 16.4 KB

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

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

Download in other formats: