overlaytest

index.html

@@ -31,14 +31,42 @@
 		<div id="statusbox" style="color: red; display: none;">
 		</div>
 
+		<div id="overlaytest">
+		</div>
+
 		<div id="map" class="map"></div>
 
 		<script>
+
+		//class defs
+		class Entry {
+			constructor(data) {
+				this.date = data[0];
+				this.conntype = data[1];
+				this.loc = [parseFloat(data[3]), parseFloat(data[2])];  // long, lat
+				this.speed = [parseFloat(data[4]), parseFloat(data[6])]; // dl, up
+				this.size = [parseInt(data[5]), parseInt(data[7])]; // dl, up
+				this.ping = parseInt(data[8]);
+				this.server = data[9];
+				this.intIP = data[10];
+				this.extIP = data[11];
+				this.url = data[12];
+			}
+
+			toHTML() {
+				return "Date: " + this.date + " type: " + this.conntype + " loc: " + this.loc + " speed: " + this.speed + "  Ping: " + this.ping + " url: <a target=\"_blank\"href=\"" + this.url + "\">" + this.url + "</a><br />\n";
+			}
+		};
+
 		var statusBox = document.getElementById("statusbox");
+		var overlaytest = document.getElementById("overlaytest");
 		var test = "";
 
 		var zoomstart = 15;
 
+		var isInit = false;
+		var entryList = [];
+
 		//init map
 		var map = new ol.Map({
 		target: 'map',
@@ -53,7 +81,26 @@
 		})
 		});
 
-		var isInit = false;
+		map.on("pointermove", e => {
+			//gather overlay information
+			var fids = [];
+			map.forEachFeatureAtPixel(e.pixel, feature => {
+				var fid = feature.getProperties().id;
+				fids.push(fid);
+			})
+
+			// display information
+			if(fids.length > 0)
+				overlaytest.innerHTML = "";
+			for(var i = 0; i < fids.length; ++i) {
+				var entry = entryList[fids[i]];
+
+				console.log(entry);
+
+				//print entry
+				overlaytest.innerHTML += entry.toHTML();
+			}
+		});
 
 		function showError(error) {
 			statusBox.innerHTML += "<span class=\"error\"> Error: " + error + "</span><br />\n";
@@ -71,17 +118,26 @@
 		}
 
 		function addElement(data, features) {
-			console.log(data);
-			var dot = ol.proj.fromLonLat([parseFloat(data[3]), parseFloat(data[2])]);
+			//console.log(data);
+			var elem = new Entry(data);
+			console.log(elem);
+			var id = entryList.length;
+			entryList.push(elem);
+			var dot = ol.proj.fromLonLat(elem.loc);
 			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)
-			}));
+
+			var feat = new ol.Feature({
+				geometry: new ol.geom.Point(dot),
+				type: 'point',
+				id: id
+			});
+			features.push(feat);
+
 		}
 
 		function loadedFile(text) {