205 lines
7.3 KiB
HTML
205 lines
7.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>logbook2map</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
|
||
|
|
<style>
|
||
|
|
body, html {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#input_modal {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
textarea {
|
||
|
|
width: 80%;
|
||
|
|
height: 80%;
|
||
|
|
font-size: 1.5em;
|
||
|
|
min-width: 20em;
|
||
|
|
min-height: 20em;
|
||
|
|
max-width: 40em;
|
||
|
|
max-height: 40em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<div id="input_modal">
|
||
|
|
<textarea placeholder="ICAO_departure;ICAO_destination Validate with Ctrl+Enter Load new data with Ctrl+O"></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||
|
|
<script>
|
||
|
|
const osmStyle = {
|
||
|
|
"version": 8,
|
||
|
|
"sources": {
|
||
|
|
"osm": {
|
||
|
|
"type": "raster",
|
||
|
|
"tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
|
||
|
|
"tileSize": 256,
|
||
|
|
"attribution": "© OpenStreetMap Contributors",
|
||
|
|
"maxzoom": 19
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"layers": [
|
||
|
|
{
|
||
|
|
"id": "osm",
|
||
|
|
"type": "raster",
|
||
|
|
"source": "osm" // This must match the source key above
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var map = new maplibregl.Map({
|
||
|
|
container: 'map', // container id
|
||
|
|
style: osmStyle, // style URL
|
||
|
|
center: [17.97, 57.91], // starting position [lng, lat]
|
||
|
|
zoom: 3.7 // starting zoom
|
||
|
|
});
|
||
|
|
|
||
|
|
function _updateMap(csvData, airportsData) {
|
||
|
|
const lines = csvData.split('\n');
|
||
|
|
const features = lines.map(line => {
|
||
|
|
const [from, to] = line.split(',');
|
||
|
|
|
||
|
|
const fromAirport = airportsData[from];
|
||
|
|
const toAirport = airportsData[to];
|
||
|
|
|
||
|
|
if(!fromAirport) { alert(`Airport ${from} not found`); return; }
|
||
|
|
if(!toAirport) { alert(`Airport ${to} not found`); return; }
|
||
|
|
|
||
|
|
const fromLongitude = parseFloat(fromAirport.longitude);
|
||
|
|
const fromLatitude = parseFloat(fromAirport.latitude);
|
||
|
|
const toLongitude = parseFloat(toAirport.longitude);
|
||
|
|
const toLatitude = parseFloat(toAirport.latitude);
|
||
|
|
|
||
|
|
return {
|
||
|
|
type: 'Feature',
|
||
|
|
properties: {
|
||
|
|
from,
|
||
|
|
to
|
||
|
|
},
|
||
|
|
geometry: {
|
||
|
|
type: 'LineString',
|
||
|
|
coordinates: [
|
||
|
|
[fromLongitude, fromLatitude],
|
||
|
|
[toLongitude, toLatitude]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
map.addSource('routes', {
|
||
|
|
type: 'geojson',
|
||
|
|
data: {
|
||
|
|
type: 'FeatureCollection',
|
||
|
|
features
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
map.addLayer({
|
||
|
|
id: 'routes',
|
||
|
|
type: 'line',
|
||
|
|
source: 'routes',
|
||
|
|
layout: {
|
||
|
|
'line-join': 'round',
|
||
|
|
'line-cap': 'round'
|
||
|
|
},
|
||
|
|
paint: {
|
||
|
|
'line-color': '#bd34eb',
|
||
|
|
'line-width': 4
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateMap(csvData) {
|
||
|
|
// download https://davidmegginson.github.io/ourairports-data/airports.csv if not locally available
|
||
|
|
const request = indexedDB.open('my_database', 1);
|
||
|
|
request.onupgradeneeded = function(event) {
|
||
|
|
const db = event.target.result;
|
||
|
|
const objectStore = db.createObjectStore('airports');
|
||
|
|
};
|
||
|
|
request.onerror = function(event) { alert('Error while opening database:\n' + event.target.error); };
|
||
|
|
request.onsuccess = function(event) {
|
||
|
|
const db = event.target.result;
|
||
|
|
const transaction = db.transaction(['airports'], 'readwrite');
|
||
|
|
const objectStore = transaction.objectStore('airports');
|
||
|
|
|
||
|
|
const getRequest = objectStore.get('airports');
|
||
|
|
getRequest.onerror = function(event) { alert("Error getting data:\n" + event.target.error); };
|
||
|
|
getRequest.onsuccess = function(event) {
|
||
|
|
if (!event.target.result) {
|
||
|
|
// Data not found, fetch and store it
|
||
|
|
fetch('https://davidmegginson.github.io/ourairports-data/airports.csv')
|
||
|
|
.then(response => response.text())
|
||
|
|
.then(data => {
|
||
|
|
console.info('Downloaded airports.csv, parsing the data...');
|
||
|
|
const airports = {};
|
||
|
|
for(const airport of data.split('\n')) {
|
||
|
|
const [_id, ident, _type, name, latitude, longitude] = airport.split(',');
|
||
|
|
if(!ident) continue;
|
||
|
|
airports[ident.replace(/^"|"$/g, '')] = { name, latitude, longitude };
|
||
|
|
}
|
||
|
|
|
||
|
|
const transaction = db.transaction(['airports'], 'readwrite');
|
||
|
|
const objectStore = transaction.objectStore('airports');
|
||
|
|
objectStore.put(airports, 'airports');
|
||
|
|
_updateMap(csvData, airports);
|
||
|
|
})
|
||
|
|
.catch(error => { alert('Error while downloading airports.csv: \n' + error); });
|
||
|
|
} else {
|
||
|
|
console.log('Data found in local storage!');
|
||
|
|
_updateMap(csvData, event.target.result);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function showInputModal() {
|
||
|
|
document.getElementById('input_modal').style.display = 'flex';
|
||
|
|
|
||
|
|
const textarea = document.querySelector('#input_modal textarea');
|
||
|
|
textarea.focus();
|
||
|
|
textarea.addEventListener('keydown', event => {
|
||
|
|
if(event.ctrlKey && event.key === 'Enter') {
|
||
|
|
const csvData = textarea.value;
|
||
|
|
updateMap(csvData);
|
||
|
|
document.getElementById('input_modal').style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
showInputModal();
|
||
|
|
|
||
|
|
document.addEventListener('keydown', event => {
|
||
|
|
if(event.ctrlKey && event.key === 'o') {
|
||
|
|
event.preventDefault();
|
||
|
|
showInputModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|