MrBesen/osmSpeedtestMapper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: MrBesen:179d83194300f00b16a74472af2164e91bdd0ca7
Branches Tags
MrBesen:master
...
compare: MrBesen:70628d637ddc36c4e66f872d3fb0d2e83cc03436
Branches Tags
MrBesen:master

2 Commits
179d831943 ... 70628d637d

Author SHA1 Message Date
mrbesen
70628d637d
overlay working 2021-04-27 23:13:23 +02:00
mrbesen
dde4f26037
color selected 2021-04-27 20:52:18 +02:00
1 changed files with 138 additions and 38 deletions
Show Stats Expand all files Collapse all files

176
index.html
View File

@ -1,11 +1,13 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>FileListTest</title> <title>Speedtest.net map</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"> <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> <style>
#statusbox p { margin: 0; }
.error { .error {
color: red; color: red;
} }
@ -16,32 +18,74 @@
height: 800px; height: 800px;
width: 100%; width: 100%;
} }
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
white-space: nowrap;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
</style> </style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
</head> </head>
<body> <body>
<h1>SpeedTest.net file mapper</h1> <h1>SpeedTest.net file mapper</h1>
<hr /> <hr />
<form action="" method="post" onsubmit="return trigger(this);"> <form action="javascript:void(0);">
<input type="file" name="file" id="files" multiple /><br /> <input type="file" name="file" id="files" oninput="trigger(event)" multiple />
<input type="reset" value="clear"/><input type="submit" id="ok" value="ok"/> <button type="button" onclick="trigger(event)">OK</button>
</form> </form>
<h3>Status:</h3> <h3>Status:</h3>
<div id="statusbox" style="color: red; display: none;"> <div id="statusbox"></div>
</div>
<div id="overlaytest"> <div id="overlaytest"></div>
</div>
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer">✖</a>
<div id="popup-content"></div>
</div>
<script> <script>
//class defs //class defs
class Entry { class Entry {
constructor(data) { constructor(data) {
this.date = data[0]; this.date = data[0].replaceAll("/", ".").replace(",", "");
this.conntype = data[1]; this.conntype = data[1];
this.loc = [parseFloat(data[3]), parseFloat(data[2])]; // long, lat this.loc = [parseFloat(data[3]), parseFloat(data[2])]; // long, lat
this.speed = [parseFloat(data[4]), parseFloat(data[6])]; // dl, up this.speed = [parseFloat(data[4]), parseFloat(data[6])]; // dl, up
@ -54,73 +98,132 @@
} }
toHTML() { 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"; return this.conntype.toUpperCase() + " [" + this.date + "] " + "<br />\n" + this.speedStr + "<br />\nPing: " + this.ping + "ms<br />\n<a target=\"_blank\"href=\"" + this.url + "\">result Page&#128279;</a><br />\n";
}
get speedStr() {
return this.speed[0].toFixed(2) + " Mbps ↓ / " + this.speed[1].toFixed(2) + " Mbps ↑";
} }
}; };
/** @type {HTMLDivElement} */
var statusBox = document.getElementById("statusbox"); var statusBox = document.getElementById("statusbox");
var overlaytest = document.getElementById("overlaytest"); var overlaytest = document.getElementById("overlaytest");
var test = "";
var popupcontainer = document.getElementById('popup');
var popupcontent = document.getElementById('popup-content');
var popupcloser = document.getElementById('popup-closer');
var zoomstart = 15; var zoomstart = 15;
var dotradius = 5;
var isInit = false; var isInit = false;
var entryList = []; var entryList = [];
//init map //init map
var map = new ol.Map({ var overlay = new ol.Overlay({
target: 'map', element: popupcontainer,
layers: [ autoPan: true,
new ol.layer.Tile({ autoPanAnimation: {
source: new ol.source.OSM() duration: 250,
}) },
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: zoomstart
})
}); });
popupcloser.onclick = function () {
popupcontent.innerHTML = "";
overlay.setPosition(undefined);
popupcloser.blur();
return false;
};
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
}),
overlays: [overlay]
});
var highlightStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: dotradius,
fill: new ol.style.Fill({color: 'green'})
})
});
var defaultStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: dotradius,
fill: new ol.style.Fill({color: 'red'})
})
});
//liste of features, that have the highlighted style
var highlighted = [];
// event listener
map.on("pointermove", e => { map.on("pointermove", e => {
var newhighlighted = [];
//gather overlay information //gather overlay information
var fids = []; var fids = []; //lsit of currently hovered feature ids
map.forEachFeatureAtPixel(e.pixel, feature => { map.forEachFeatureAtPixel(e.pixel, feature => {
var fid = feature.getProperties().id; var fid = feature.getProperties().id;
fids.push(fid); fids.push(fid);
feature.setStyle(highlightStyle);
newhighlighted.push(feature);
}) })
if(newhighlighted.length > 0) {
//remove highlight style from non hovered elements
highlighted.filter(h => newhighlighted.indexOf(h) == -1).forEach(h => h.setStyle(defaultStyle));
highlighted = newhighlighted;
}
// display information // display information
if(fids.length > 0) if(fids.length > 0) {
overlaytest.innerHTML = ""; popupcontent.innerHTML = "";
overlay.setPosition(e.coordinate);
}
for(var i = 0; i < fids.length; ++i) { for(var i = 0; i < fids.length; ++i) {
var entry = entryList[fids[i]]; var entry = entryList[fids[i]];
console.log(entry); console.log(entry);
//print entry //print entry
overlaytest.innerHTML += entry.toHTML(); popupcontent.innerHTML += entry.toHTML();
if(i+1 < fids.length)
popupcontent.innerHTML += "<hr />\n";
} }
}); });
function showError(error) { function showError(error) {
statusBox.innerHTML += "<span class=\"error\"> Error: " + error + "</span><br />\n"; var span = document.createElement('p');
statusBox.style.display = ""; span.classList.add('error');
span.innerHTML = `Error: ${error}`;
statusBox.appendChild(span);
} }
function showSuccess(success) { function showSuccess(success) {
statusBox.innerHTML += "<span class=\"success\"> Success: " + success + "</span><br />\n"; var span = document.createElement('p');
statusBox.style.display = ""; span.classList.add('success');
span.innerHTML = `Success: ${success}`;
statusBox.appendChild(span);
} }
function clearStatus() { function clearStatus() {
statusBox.innerHTML = ""; statusBox.innerHTML = "";
statusBox.style.display = "none";
} }
function addElement(data, features) { function addElement(data, features) {
//console.log(data);
var elem = new Entry(data); var elem = new Entry(data);
console.log(elem);
var id = entryList.length; var id = entryList.length;
entryList.push(elem); entryList.push(elem);
var dot = ol.proj.fromLonLat(elem.loc); var dot = ol.proj.fromLonLat(elem.loc);
@ -130,7 +233,6 @@
console.log(dot); console.log(dot);
} }
var feat = new ol.Feature({ var feat = new ol.Feature({
geometry: new ol.geom.Point(dot), geometry: new ol.geom.Point(dot),
type: 'point', type: 'point',
@ -142,7 +244,6 @@
function loadedFile(text) { function loadedFile(text) {
var lines = text.split("\n"); var lines = text.split("\n");
console.group();
var features = []; var features = [];
for(var i = 1; i < lines.length; ++i) { for(var i = 1; i < lines.length; ++i) {
var line = lines[i]; var line = lines[i];
@ -155,7 +256,6 @@
addElement(lineSplit, features); addElement(lineSplit, features);
} }
console.groupEnd();
updateMap(features); updateMap(features);
} }
@ -186,7 +286,7 @@
text.then(t => loadedFile(t)); text.then(t => loadedFile(t));
} }
function trigger(form) { function trigger(event) {
console.log("OK"); console.log("OK");
clearStatus(); clearStatus();
@ -207,7 +307,7 @@
loadFile(f); loadFile(f);
successC ++; successC ++;
} else { } else {
showError("The file <i>" + f.name + "</i> is not in the csv format"); showError(`The file <i>${f.name}</i> is not in the csv format`);
} }
} }