Context Navigation

source: genesis/nodes/nodemap.html@ 8471

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

Coordinate converter with alert was not very user friendy, converted to infofield clickable setup.

Thanks to Martijn for feedback!

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

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

Download in other formats: