initial; dots working

2021-04-27 19:01:23 +02:00 · 2021-04-27 19:01:23 +02:00 · 8dbe03c9b4
commit 8dbe03c9b4
2 changed files with 166 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+*.csv
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,164 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>FileListTest</title>
+		<meta charset="utf-8" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
+
+		<style>
+		.error {
+			color: red;
+		}
+		.success {
+			color: darkgreen;
+		}
+		.map {
+			height: 800px;
+			width: 100%;
+		}
+		</style>
+		<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
+	</head>
+	<body>
+		<h1>SpeedTest.net file mapper</h1>
+		<hr />
+		<form action="" method="post" onsubmit="return trigger(this);">
+		<input type="file" name="file" id="files" multiple /><br />
+		<input type="reset" value="clear"/><input type="submit" id="ok" value="ok"/>
+		</form>
+
+		<h3>Status:</h3>
+		<div id="statusbox" style="color: red; display: none;">
+		</div>
+
+		<div id="map" class="map"></div>
+
+		<script>
+		var statusBox = document.getElementById("statusbox");
+		var test = "";
+
+		var zoomstart = 15;
+
+		//init map
+		var map = new ol.Map({
+		target: 'map',
+		layers: [
+			new ol.layer.Tile({
+				source: new ol.source.OSM()
+			})
+		],
+		view: new ol.View({
+			center: ol.proj.fromLonLat([0, 0]),
+			zoom: zoomstart
+		})
+		});
+
+		var isInit = false;
+
+		function showError(error) {
+			statusBox.innerHTML += "<span class=\"error\"> Error: " + error + "</span><br />\n";
+			statusBox.style.display = "";
+		}
+
+		function showSuccess(success) {
+			statusBox.innerHTML += "<span class=\"success\"> Success: " + success + "</span><br />\n";
+			statusBox.style.display = "";
+		}
+
+		function clearStatus() {
+			statusBox.innerHTML = "";
+			statusBox.style.display = "none";
+		}
+
+		function addElement(data, features) {
+			console.log(data);
+			var dot = ol.proj.fromLonLat([parseFloat(data[3]), parseFloat(data[2])]);
+			if(!isInit) {
+				isInit = true;
+				map.setView(new ol.View({center: dot, zoom: zoomstart}));
+				console.log(dot);
+			}
+
+			features.push(new ol.Feature({
+				geometry: new ol.geom.Point(dot)
+			}));
+		}
+
+		function loadedFile(text) {
+			var lines = text.split("\n");
+			console.group();
+			var features = [];
+			for(var i = 1; i < lines.length; ++i) {
+				var line = lines[i];
+				if(line.length < 10) continue;
+
+				var date = line.substr(1, 17);
+				line = line.substr(20);
+				var lineSplit = line.split(",");
+				lineSplit = [date ,... lineSplit];
+
+				addElement(lineSplit, features);
+			}
+			console.groupEnd();
+
+			updateMap(features);
+		}
+
+		function updateMap(features) {
+			var sourceLayer = new ol.source.Vector({
+				features
+			});
+
+			var vectorLayer = new ol.layer.Vector({
+				source: sourceLayer,
+				style: new ol.style.Style({
+					image: new ol.style.Circle({
+						radius: 4,
+						fill: new ol.style.Fill({color: 'red'})
+					})
+				})
+			});
+
+			map.addLayer(vectorLayer);
+		}
+
+		function loadFile(file) {
+			console.log("loadFile: " + file.name);
+			console.log(file);
+
+			var text = file.text();
+			text.then(t => loadedFile(t));
+		}
+
+		function trigger(form) {
+			console.log("OK");
+
+			clearStatus();
+			isInit = false;
+
+			//try to read the files
+			var filelist = document.getElementById("files").files;
+
+			if(filelist.length == 0) {
+				showError("No file selected");
+				return false;
+			}
+
+			var successC = 0;
+			for(var i = 0; i < filelist.length; ++i) {
+				var f = filelist[i];
+				if(f.type == "text/csv") {
+					loadFile(f);
+					successC ++;
+				} else {
+					showError("The file <i>" + f.name + "</i> is not in the csv format");
+				}
+			}
+
+			showSuccess("Loaded " + successC + " files");
+
+			return false;
+		}
+		</script>
+	</body>
+</html>