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

overlay working

Browse Source
This commit is contained in:
mrbesen 2021-04-27 23:13:23 +02:00
parent dde4f26037
commit 70628d637d
Signed by: MrBesen
GPG Key ID: 596B2350DCD67504
1 changed files with 115 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
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,54 +98,82 @@
} }
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 overlay = new ol.Overlay({
element: popupcontainer,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
popupcloser.onclick = function () {
popupcontent.innerHTML = "";
overlay.setPosition(undefined);
popupcloser.blur();
return false;
};
var map = new ol.Map({ var map = new ol.Map({
target: 'map', target: 'map',
layers: [ layers: [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.OSM() source: new ol.source.OSM()
}) })
], ],
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([0, 0]), center: ol.proj.fromLonLat([0, 0]),
zoom: zoomstart zoom: zoomstart
}) }),
overlays: [overlay]
}); });
var highlightStyle = new ol.style.Style({ var highlightStyle = new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
radius: 4, radius: dotradius,
fill: new ol.style.Fill({color: 'green'}) fill: new ol.style.Fill({color: 'green'})
}) })
}); });
var defaultStyle = new ol.style.Style({ var defaultStyle = new ol.style.Style({
image: new ol.style.Circle({ image: new ol.style.Circle({
radius: 4, radius: dotradius,
fill: new ol.style.Fill({color: 'red'}) fill: new ol.style.Fill({color: 'red'})
}) })
}); });
//liste of features, that have the highlighted style
var highlighted = []; var highlighted = [];
// event listener
map.on("pointermove", e => { map.on("pointermove", e => {
var newhighlighted = []; 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);
@ -110,37 +182,44 @@
}) })
if(newhighlighted.length > 0) { if(newhighlighted.length > 0) {
//remove highlight style //remove highlight style from non hovered elements
highlighted.filter(h => newhighlighted.indexOf(h) == -1).forEach(h => h.setStyle(defaultStyle)); highlighted.filter(h => newhighlighted.indexOf(h) == -1).forEach(h => h.setStyle(defaultStyle));
highlighted = newhighlighted; 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) {
@ -151,7 +230,7 @@
if(!isInit) { if(!isInit) {
isInit = true; isInit = true;
map.setView(new ol.View({center: dot, zoom: zoomstart})); map.setView(new ol.View({center: dot, zoom: zoomstart}));
console.log(dot); //console.log(data); console.log(dot);
} }
var feat = new ol.Feature({ var feat = new ol.Feature({
@ -207,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();
@ -228,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`);
} }
} }