Benutzerspezifische Werkzeuge
Sie sind hier: Startseite Fächer Geschichte Stammbaumprojekt Stammbaum geschichte.html

geschichte.html

geschichte.html — HTML, 3Kb

Dateiinhalt

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html,body,#map-canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>

<script>
	var map;
	var heatmap;
	var selectLevel;

	function initialize() {
		var mapOptions = {
			mapTypeId : google.maps.MapTypeId.SATELLITE,
			center : new google.maps.LatLng(48, 12),
			zoom : 2
		};

		selectLevelDiv = document.createElement('div');
		selectLevel = document.createElement("select");
		selectLevel.options[selectLevel.options.length] = new Option(
				"Alle Generationen", -1);
		selectLevel.options[selectLevel.options.length] = new Option("Eltern",
				1);
		selectLevel.options[selectLevel.options.length] = new Option(
				"Großeltern", 2);
		selectLevel.options[selectLevel.options.length] = new Option(
				"Urgtroßeltern", 3);
		selectLevelDiv.style.paddingLeft = '5px';
		selectLevelDiv.style.paddingTop = '15px';
		selectLevelDiv.appendChild(selectLevel);
		selectLevelDiv.addEventListener("change", function(e) {
			for (var i = 0; i < e.target.length; i++)
				if (e.target[i].selected) {
					var level = e.target.value;
					load(level)
				}
		});

		map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);
		load(-1);
		map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectLevelDiv);
	}

	function load(level) {
		$.ajax({
			url : "./geschichte.csv",
			dataType : "text",
			success : function(data0) {
				var data = data0.split('\n');
				var latLng = [];
				if (data.length > 0)
					for (var i = 0; i < data.length; i++) {
						var row = data[i].split(',');
						if(row.length >= 5) {
							var lat = row[3];
							var lng = row[4];
							var typ = row[1];
							if (level == -1 || typ.length == level)
								latLng.push(new google.maps.LatLng(lat, lng));
						}
					}
				var pointArray = new google.maps.MVCArray(latLng);

				if (heatmap != null)
					heatmap.setMap(null);
				heatmap = new google.maps.visualization.HeatmapLayer({
					data : pointArray,
					dissipating : true,
					maxIntensity : 12,
					radius : 10,
					opacity : 0.8
				});
				var gradient = [ 'rgba(0, 255, 255, 0)',
						'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)',
						'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)',
						'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)',
						'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)',
						'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)',
						'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)',
						'rgba(255, 0, 0, 1)' ]
				heatmap.set('gradient', heatmap.get('gradient') ? null
						: gradient);
				heatmap.setMap(map);
			}
		});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>
Artikelaktionen
« August 2017 »
August
MoDiMiDoFrSaSo
123456
78910111213
14151617181920
21222324252627
28293031

_______________________

 
  • Für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen wird keine Haftung übernommen.
    Bei Unklarheiten wenden Sie sich bitte an unser Sekretariat: sekretariat©sgmu.de.