mirror of
https://github.com/owntracks/recorder.git
synced 2024-11-15 09:58:40 -07:00
Modernize historic map
This commit is contained in:
atjn
parent
1d4d0a9a74
commit
56f2dfd989
@ -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 != "" ) {
|
const dataUrl = getApiUrl("locations", { includeSearchParams: true });
|
||||||
script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
|
loadMapSolution(dataUrl);
|
||||||
'&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);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function(event) {
|
|
||||||
loadMapsAPI();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -3,95 +3,74 @@
|
|||||||
|
|
||||||
// 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) {
|
||||||
callback.call(thisArg, geometry);
|
callback.call(thisArg, geometry);
|
||||||
} else if (geometry instanceof google.maps.Data.Point) {
|
} else if (geometry instanceof google.maps.Data.Point) {
|
||||||
callback.call(thisArg, geometry.get());
|
callback.call(thisArg, geometry.get());
|
||||||
} else {
|
} else {
|
||||||
geometry.getArray().forEach(function(g) {
|
geometry.getArray().forEach(function(g) {
|
||||||
processPoints(g, callback, thisArg);
|
processPoints(g, callback, thisArg);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initialize_googlemaps() {
|
export function initialize(dataUrl) {
|
||||||
|
let map;
|
||||||
|
const center = new google.maps.LatLng( 46.993665, 10.399188);
|
||||||
|
|
||||||
var map;
|
infowindow = new google.maps.InfoWindow();
|
||||||
var center = new google.maps.LatLng( 46.993665, 10.399188);
|
|
||||||
|
|
||||||
infowindow = new google.maps.InfoWindow();
|
const mapOptions = {
|
||||||
|
center,
|
||||||
|
zoom: 5,
|
||||||
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||||
|
scrollwheel: false,
|
||||||
|
disableDefaultUI: false,
|
||||||
|
panControl: false,
|
||||||
|
scaleControl: false,
|
||||||
|
streetViewControl: true,
|
||||||
|
overviewMapControl: true,
|
||||||
|
};
|
||||||
|
|
||||||
mapOptions = {
|
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
|
||||||
center: center,
|
|
||||||
zoom: 5,
|
|
||||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
||||||
scrollwheel: false,
|
|
||||||
disableDefaultUI: false,
|
|
||||||
panControl: false,
|
|
||||||
scaleControl: false,
|
|
||||||
streetViewControl: true,
|
|
||||||
overviewMapControl: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
|
debug("Loading data from URL:", dataUrl);
|
||||||
|
map.data.loadGeoJson(dataUrl);
|
||||||
|
|
||||||
var dataURL = location.protocol + "//" + location.host;
|
const featureStyle = {
|
||||||
|
...strokeStyle,
|
||||||
|
icon: markerStyle,
|
||||||
|
};
|
||||||
|
map.data.setStyle(featureStyle);
|
||||||
|
|
||||||
var parts = location.pathname.split('/');
|
// Zoom to show all the features
|
||||||
for (var i = 1; i < parts.length - 2; i++) {
|
const bounds = new google.maps.LatLngBounds();
|
||||||
dataURL = dataURL + "/" + parts[i];
|
map.data.addListener('addfeature', function (e) {
|
||||||
}
|
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
|
||||||
dataURL = dataURL + "/api/0/locations" + location.search;
|
map.fitBounds(bounds);
|
||||||
|
});
|
||||||
|
|
||||||
console.log("dataURL = " + dataURL);
|
// click dot on map to show info
|
||||||
|
map.data.addListener('click', function(event) {
|
||||||
|
const description = generatePopupHTML({
|
||||||
|
lat: event.latLng.lat().toFixed(4),
|
||||||
|
lon: event.latLng.lng().toFixed(4),
|
||||||
|
addr: event.feature.getProperty("address"),
|
||||||
|
tst: event.feature.getProperty("tst"),
|
||||||
|
vel: event.feature.getProperty("vel"),
|
||||||
|
acc: event.feature.getProperty("acc"),
|
||||||
|
});
|
||||||
|
|
||||||
map.data.loadGeoJson(dataURL);
|
infowindow.setContent(description);
|
||||||
|
infowindow.setPosition(event.latLng);
|
||||||
var circle ={
|
infowindow.open(map);
|
||||||
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);
|
|
||||||
|
|
||||||
// Zoom to show all the features
|
|
||||||
var bounds = new google.maps.LatLngBounds();
|
|
||||||
map.data.addListener('addfeature', function (e) {
|
|
||||||
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
|
|
||||||
map.fitBounds(bounds);
|
|
||||||
});
|
|
||||||
|
|
||||||
// click dot on map to show info
|
|
||||||
map.data.addListener('click', function(event) {
|
|
||||||
var tst = event.feature.getProperty('tst');
|
|
||||||
var dt = moment.utc(tst * 1000).local();
|
|
||||||
var data = {
|
|
||||||
lat: event.latLng.lat().toFixed(4),
|
|
||||||
lon: event.latLng.lng().toFixed(4),
|
|
||||||
tst: tst,
|
|
||||||
addr: event.feature.getProperty('address'),
|
|
||||||
fulldate: dt.format("DD MMM YYYY HH:mm:ss"),
|
|
||||||
vel: event.feature.getProperty('vel'),
|
|
||||||
};
|
|
||||||
|
|
||||||
var t = "{{ addr }}<br/><span class='latlon'>({{ lat }},{{lon}})</span> vel={{vel}} {{ fulldate }}";
|
|
||||||
if (typeof(tst) === 'undefined') {
|
|
||||||
t = "Position: {{lat}}, {{lon}}";
|
|
||||||
}
|
|
||||||
|
|
||||||
infowindow.setContent(Mustache.render(t, data));
|
|
||||||
infowindow.setPosition(event.latLng);
|
|
||||||
infowindow.open(map);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
attribution: '© <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());
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user