149 lines
3.1 KiB
HTML
149 lines
3.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>MeshRange</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="js/leaflet/leaflet.css" />
|
|
<script src="js/leaflet/leaflet.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
font-size: 1em;
|
|
line-height: 150%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
header {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #335;
|
|
height: 50px;
|
|
}
|
|
h1 {
|
|
font-size: 25px;
|
|
font-weight: normal;
|
|
line-height: 25px;
|
|
padding: 12px 12px;
|
|
margin: 0;
|
|
width: 50%;
|
|
color: #eee;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
}
|
|
form {
|
|
margin: 0;
|
|
padding: 0;
|
|
float:right;
|
|
}
|
|
input {
|
|
display: none;
|
|
}
|
|
label {
|
|
float:right;
|
|
display: inline-block;
|
|
background: #669;
|
|
color: #fff;
|
|
border-radius: 14px;
|
|
border: 1px solid #000;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
padding: 4px 14px;
|
|
margin: 10px;
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
|
transition: border linear .2s,box-shadow linear .2s;
|
|
cursor: pointer;
|
|
|
|
}
|
|
a {
|
|
color: #eee;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<form>
|
|
<label for="geojson-file" class="file-upload-label">Open geojson</label>
|
|
<input type="file" id="geojson-file">
|
|
</form>
|
|
|
|
<h1>MeshRange</h1>
|
|
</header>
|
|
<div id="map"> </div>
|
|
<script>
|
|
const map = L.map('map').setView([52.55120, 13.40397], 14);
|
|
|
|
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
var dots = null
|
|
|
|
function load_dots(geojson) {
|
|
if (dots) {
|
|
map.removeLayer(dots);
|
|
}
|
|
dots = L.geoJSON(geojson, {
|
|
pointToLayer: function (feature, latlng) {
|
|
if (feature.properties.snr_recv) {
|
|
h = (Math.max(Math.min(feature.properties.snr_recv, 12), -20) + 20) * 3.7 + 20
|
|
color = "lch(50% 100% " + h + ")";
|
|
} else {
|
|
color = "#000000";
|
|
}
|
|
|
|
return L.circleMarker(latlng,
|
|
{
|
|
radius: 8,
|
|
fillColor: color,
|
|
color: "#000",
|
|
weight: 1,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
}
|
|
);
|
|
},
|
|
onEachFeature: function(feature, layer) {
|
|
layer.bindPopup(
|
|
"<table>" +
|
|
"<tr><td>SNR send</td><td>" + (feature.properties.snr_send ? feature.properties.snr_send : "-") + " dB</td></tr>" +
|
|
"<tr><td>SNR recv</td><td>" + (feature.properties.snr_recv ? feature.properties.snr_recv : "-") + " dB</td></tr>" +
|
|
"<tr><td>Recv delay</td><td>" + feature.properties.recv_delay.toFixed(2) + " s</td></tr>" +
|
|
"<tr><td>Position delay</td><td>" + feature.properties.pos_delay.toFixed(2) + " s</td></tr>" +
|
|
"</table>",
|
|
{
|
|
minWidth: 200
|
|
}
|
|
);
|
|
}
|
|
}).addTo(map);
|
|
}
|
|
|
|
async function load_sample() {
|
|
const sample_name = window.location.hash.substring(1);
|
|
if (sample_name) {
|
|
const response = await fetch("samples/" + sample_name + ".geojson");
|
|
if (response.ok) {
|
|
var geojson = await response.json();
|
|
load_dots(geojson);
|
|
}
|
|
}
|
|
|
|
}
|
|
load_sample();
|
|
|
|
const fileInput = document.getElementById('geojson-file');
|
|
fileInput.onchange = () => {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", e => {
|
|
geojson = JSON.parse(reader.result)
|
|
load_dots(geojson)
|
|
});
|
|
reader.readAsText(fileInput.files[0]);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |