cotugno/recorder
2
Fork 0
mirror of https://github.com/owntracks/recorder.git synced 2024-11-15 09:58:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

Modernize historic map

Browse Source
This commit is contained in:
atjn 2022-04-17 19:34:04 +02:00
parent 1d4d0a9a74
commit 56f2dfd989
3 changed files with 116 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docroot/map/index.html
View File

@ -1,61 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en-US">
<head> <head>
<meta charset="UTF-8">
<title>GeoJSON track</title> <title>GeoJSON track</title>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../static/recorder.png" /> <link rel="icon" sizes="192x192" href="../static/recorder.png">
<link rel="apple-touch-icon" href="../static/recorder.png" /> <link rel="apple-touch-icon" href="../static/recorder.png">
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map-canvas { height: 100%; }
body { font-size: 80%; padding: 0; margin: 0px; }
<style>
body { font-size: 80%; }
.name, .low-level { display: none; }
</style> </style>
<link rel="stylesheet" href="../utils/map.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src="../static/js/mustache.js"></script>
<script src="../static/js/moment.min.js"></script>
<script src="map_google.js"></script>
<script src="map_leaflet.js"></script>
<script src="../static/apikey.js"></script> <script src="../static/apikey.js"></script>
<script> <script type="module">
function loadMapsAPI() { import { getApiUrl } from "../utils/network.js";
var script = document.createElement('script'); import { loadMapSolution } from "../utils/map.js";
script.type = 'text/javascript';
if (typeof apiKey != 'undefined' && apiKey != "" ) {
script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
'&key=' + apiKey +'&callback=initialize_googlemaps';
} else {
$("head").append("<link rel='stylesheet' href='../static/leaflet/leaflet.css' type='text/css' />");
// Dynamic script loading from http://stackoverflow.com/a/8578840
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){ return; }
js = d.createElement(s); js.id = id;
js.onload = function(){
initialize_leaflet();
};
js.src = "../static/leaflet/leaflet.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'leaflet'));
}
document.body.appendChild(script); const dataUrl = getApiUrl("locations", { includeSearchParams: true });
} loadMapSolution(dataUrl);
document.addEventListener("DOMContentLoaded", function(event) {
loadMapsAPI();
});
</script> </script>
</head> </head>
<body> <body>

69
docroot/map/map_google.js
View File

@ -3,7 +3,12 @@
// https://developers.google.com/maps/documentation/javascript/datalayer // https://developers.google.com/maps/documentation/javascript/datalayer
var infowindow; import { debug } from "../utils/debug.js";
import { generatePopupHTML } from "../utils/map.js";
import { markerStyle, strokeStyle } from "../utils/map_google.js";
let infowindow;
function processPoints(geometry, callback, thisArg) { function processPoints(geometry, callback, thisArg) {
if (geometry instanceof google.maps.LatLng) { if (geometry instanceof google.maps.LatLng) {
@ -17,15 +22,14 @@ function processPoints(geometry, callback, thisArg) {
} }
} }
function initialize_googlemaps() { export function initialize(dataUrl) {
let map;
var map; const center = new google.maps.LatLng( 46.993665, 10.399188);
var center = new google.maps.LatLng( 46.993665, 10.399188);
infowindow = new google.maps.InfoWindow(); infowindow = new google.maps.InfoWindow();
mapOptions = { const mapOptions = {
center: center, center,
zoom: 5, zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false, scrollwheel: false,
@ -38,35 +42,17 @@ function initialize_googlemaps() {
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var dataURL = location.protocol + "//" + location.host; debug("Loading data from URL:", dataUrl);
map.data.loadGeoJson(dataUrl);
var parts = location.pathname.split('/'); const featureStyle = {
for (var i = 1; i < parts.length - 2; i++) { ...strokeStyle,
dataURL = dataURL + "/" + parts[i]; icon: markerStyle,
}
dataURL = dataURL + "/api/0/locations" + location.search;
console.log("dataURL = " + dataURL);
map.data.loadGeoJson(dataURL);
var circle ={
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ff0000',
fillOpacity: .9,
scale: 5.5,
strokeColor: 'white',
strokeWeight: 2
};
var featureStyle = {
strokeColor: 'red',
strokeWeight: 4,
icon: circle
}; };
map.data.setStyle(featureStyle); map.data.setStyle(featureStyle);
// Zoom to show all the features // Zoom to show all the features
var bounds = new google.maps.LatLngBounds(); const bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function (e) { map.data.addListener('addfeature', function (e) {
processPoints(e.feature.getGeometry(), bounds.extend, bounds); processPoints(e.feature.getGeometry(), bounds.extend, bounds);
map.fitBounds(bounds); map.fitBounds(bounds);
@ -74,23 +60,16 @@ function initialize_googlemaps() {
// click dot on map to show info // click dot on map to show info
map.data.addListener('click', function(event) { map.data.addListener('click', function(event) {
var tst = event.feature.getProperty('tst'); const description = generatePopupHTML({
var dt = moment.utc(tst * 1000).local();
var data = {
lat: event.latLng.lat().toFixed(4), lat: event.latLng.lat().toFixed(4),
lon: event.latLng.lng().toFixed(4), lon: event.latLng.lng().toFixed(4),
tst: tst, addr: event.feature.getProperty("address"),
addr: event.feature.getProperty('address'), tst: event.feature.getProperty("tst"),
fulldate: dt.format("DD MMM YYYY HH:mm:ss"), vel: event.feature.getProperty("vel"),
vel: event.feature.getProperty('vel'), acc: event.feature.getProperty("acc"),
}; });
var t = "{{ addr }}<br/><span class='latlon'>({{ lat }},{{lon}})</span> vel={{vel}} {{ fulldate }}"; infowindow.setContent(description);
if (typeof(tst) === 'undefined') {
t = "Position: {{lat}}, {{lon}}";
}
infowindow.setContent(Mustache.render(t, data));
infowindow.setPosition(event.latLng); infowindow.setPosition(event.latLng);
infowindow.open(map); infowindow.open(map);
}); });

103
docroot/map/map_leaflet.js
View File

@ -1,97 +1,68 @@
function initialize_leaflet() { import { fetchApiData } from "../utils/network.js";
var map = L.map('map-canvas').setView([0.0, 0.0], 1); import { generatePopupHTML } from "../utils/map.js";
import { markerStyle, strokeStyle } from "../utils/map_leaflet.js";
export async function initialize(dataUrl) {
const data = fetchApiData({url: dataUrl});
const map = L.map('map-canvas').setView([0.0, 0.0], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map); }).addTo(map);
const empty_geojson = {
var dataURL = location.protocol + "//" + location.host;
var parts = location.pathname.split('/');
for (var i = 1; i < parts.length - 2; i++) {
dataURL = dataURL + "/" + parts[i];
}
dataURL = dataURL + "/api/0/locations" + location.search;
console.log("dataURL = " + dataURL);
var geojsonMarkerOptions = {
radius: 5,
fillColor: "#ff0000",
color: "#ffffff",
weight: 2,
opacity: 1,
fillOpacity: 0.9
};
var empty_geojson = {
type: "FeatureCollection", type: "FeatureCollection",
features: [] features: [],
}; };
var lastLatLng = L.latLng(0.0, 0.0); let lastLatLng = L.latLng(0.0, 0.0);
var geojsonLayer = new L.GeoJSON(empty_geojson, { const geojsonLayer = new L.GeoJSON(empty_geojson, {
pointToLayer: function (feature, latlng) { pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions); return L.circleMarker(latlng, markerStyle);
}, },
onEachFeature: function(feature, layer) { onEachFeature: function(feature, layer) {
if (feature.geometry.type == 'Point') { if (feature.geometry.type === 'Point') {
var data ={}; const description = generatePopupHTML({
data.address = feature.properties.address; ...feature.properties,
data.lat = feature.geometry.coordinates[1].toFixed(5); lat: feature.geometry.coordinates[1].toFixed(5),
data.lon = feature.geometry.coordinates[0].toFixed(5); lon: feature.geometry.coordinates[0].toFixed(5),
data.vel = feature.properties.vel; });
data.acc = feature.properties.acc;
data.tst = feature.properties.tst;
var localtime = moment.utc(data.tst * 1000).local();
data.timestring = localtime.format('YYYY-MM-DD, ddd, HH:mm:ss Z');
var text = []; layer.bindPopup(description);
data.accstring = "";
if(data.timestring) {text.push('{{ timestring }}')}
if(data.acc !== undefined) {data.accstring="acc: " + data.acc};
if(data.lat && data.lon) {text.push('<span class="latlon">{{ lat }},{{ lon }} {{ accstring }}</span>')}
if(data.address) {text.push('{{ address }}')}
if(data.vel !== undefined) {text.push('{{ vel }} km/h')}
layer.bindPopup(Mustache.render(text.join('<br/>'), data));
} }
}, },
style : function(feature) { style: function(feature) {
if (feature.geometry.type == 'Point') { if (feature.geometry.type === 'Point') {
return {} return {};
} else { } else {
return { return strokeStyle;
color : "#ff0000",
weight : 4,
}
} }
}, },
coordsToLatLng: function(coords) { coordsToLatLng: function(coords) {
var lat = coords[1]; let lat = coords[1];
var lon = coords[0]; let lon = coords[0];
var dist0 = Math.abs(lon - lastLatLng.lng); const dist0 = Math.abs(lon - lastLatLng.lng);
var dist1 = Math.abs(lon + 360.0 - lastLatLng.lng); const dist1 = Math.abs(lon + 360.0 - lastLatLng.lng);
var dist2 = Math.abs(lon - 360.0 - lastLatLng.lng); const dist2 = Math.abs(lon - 360.0 - lastLatLng.lng);
if (dist0 > dist1 || dist0 > dist2) { if (dist0 > dist1 || dist0 > dist2) {
if (dist0 > dist1) { if (dist0 > dist1) {
lon = lon + 360.0; lon += 360.0;
} else { } else {
lon = lon - 360.0; lon -= 360.0;
} }
} }
var latLng = L.GeoJSON.coordsToLatLng([lon, lat]); const latLng = L.GeoJSON.coordsToLatLng([lon, lat]);
lastLatLng = latLng; lastLatLng = latLng;
return latLng return latLng;
} },
}); });
map.addLayer(geojsonLayer); map.addLayer(geojsonLayer);
$.getJSON( dataURL, function( data ) { geojsonLayer.addData(await data);
geojsonLayer.addData(data)
map.fitBounds(geojsonLayer.getBounds()); map.fitBounds(geojsonLayer.getBounds());
});
} }