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>
|
||||
<html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GeoJSON track</title>
|
||||
<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="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" 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; }
|
||||
<link rel="icon" sizes="192x192" href="../static/recorder.png">
|
||||
<link rel="apple-touch-icon" href="../static/recorder.png">
|
||||
|
||||
<style>
|
||||
body { font-size: 80%; }
|
||||
.name, .low-level { display: none; }
|
||||
</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>
|
||||
function loadMapsAPI() {
|
||||
var script = document.createElement('script');
|
||||
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);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
loadMapsAPI();
|
||||
});
|
||||
<script type="module">
|
||||
import { getApiUrl } from "../utils/network.js";
|
||||
import { loadMapSolution } from "../utils/map.js";
|
||||
|
||||
const dataUrl = getApiUrl("locations", { includeSearchParams: true });
|
||||
loadMapSolution(dataUrl);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -3,95 +3,74 @@
|
||||
|
||||
// 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) {
|
||||
if (geometry instanceof google.maps.LatLng) {
|
||||
callback.call(thisArg, geometry);
|
||||
} else if (geometry instanceof google.maps.Data.Point) {
|
||||
callback.call(thisArg, geometry.get());
|
||||
} else {
|
||||
geometry.getArray().forEach(function(g) {
|
||||
processPoints(g, callback, thisArg);
|
||||
});
|
||||
}
|
||||
if (geometry instanceof google.maps.LatLng) {
|
||||
callback.call(thisArg, geometry);
|
||||
} else if (geometry instanceof google.maps.Data.Point) {
|
||||
callback.call(thisArg, geometry.get());
|
||||
} else {
|
||||
geometry.getArray().forEach(function(g) {
|
||||
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;
|
||||
var center = new google.maps.LatLng( 46.993665, 10.399188);
|
||||
infowindow = new google.maps.InfoWindow();
|
||||
|
||||
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 = {
|
||||
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);
|
||||
|
||||
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('/');
|
||||
for (var i = 1; i < parts.length - 2; i++) {
|
||||
dataURL = dataURL + "/" + parts[i];
|
||||
}
|
||||
dataURL = dataURL + "/api/0/locations" + location.search;
|
||||
// Zoom to show all the features
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
map.data.addListener('addfeature', function (e) {
|
||||
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
// 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);
|
||||
});
|
||||
infowindow.setContent(description);
|
||||
infowindow.setPosition(event.latLng);
|
||||
infowindow.open(map);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,97 +1,68 @@
|
||||
|
||||
function initialize_leaflet() {
|
||||
var map = L.map('map-canvas').setView([0.0, 0.0], 1);
|
||||
import { fetchApiData } from "../utils/network.js";
|
||||
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', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(map);
|
||||
|
||||
|
||||
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 = {
|
||||
const empty_geojson = {
|
||||
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) {
|
||||
return L.circleMarker(latlng, geojsonMarkerOptions);
|
||||
return L.circleMarker(latlng, markerStyle);
|
||||
},
|
||||
onEachFeature: function(feature, layer) {
|
||||
if (feature.geometry.type == 'Point') {
|
||||
var data ={};
|
||||
data.address = feature.properties.address;
|
||||
data.lat = feature.geometry.coordinates[1].toFixed(5);
|
||||
data.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');
|
||||
if (feature.geometry.type === 'Point') {
|
||||
const description = generatePopupHTML({
|
||||
...feature.properties,
|
||||
lat: feature.geometry.coordinates[1].toFixed(5),
|
||||
lon: feature.geometry.coordinates[0].toFixed(5),
|
||||
});
|
||||
|
||||
var text = [];
|
||||
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));
|
||||
layer.bindPopup(description);
|
||||
}
|
||||
},
|
||||
style : function(feature) {
|
||||
if (feature.geometry.type == 'Point') {
|
||||
return {}
|
||||
style: function(feature) {
|
||||
if (feature.geometry.type === 'Point') {
|
||||
return {};
|
||||
} else {
|
||||
return {
|
||||
color : "#ff0000",
|
||||
weight : 4,
|
||||
}
|
||||
return strokeStyle;
|
||||
}
|
||||
},
|
||||
coordsToLatLng: function(coords) {
|
||||
var lat = coords[1];
|
||||
var lon = coords[0];
|
||||
var dist0 = Math.abs(lon - lastLatLng.lng);
|
||||
var dist1 = Math.abs(lon + 360.0 - lastLatLng.lng);
|
||||
var dist2 = Math.abs(lon - 360.0 - lastLatLng.lng);
|
||||
if (dist0 > dist1 || dist0 > dist2) {
|
||||
if (dist0 > dist1) {
|
||||
lon = lon + 360.0;
|
||||
} else {
|
||||
lon = lon - 360.0;
|
||||
}
|
||||
}
|
||||
var latLng = L.GeoJSON.coordsToLatLng([lon, lat]);
|
||||
lastLatLng = latLng;
|
||||
return latLng
|
||||
}
|
||||
let lat = coords[1];
|
||||
let lon = coords[0];
|
||||
const dist0 = Math.abs(lon - lastLatLng.lng);
|
||||
const dist1 = Math.abs(lon + 360.0 - lastLatLng.lng);
|
||||
const dist2 = Math.abs(lon - 360.0 - lastLatLng.lng);
|
||||
if (dist0 > dist1 || dist0 > dist2) {
|
||||
if (dist0 > dist1) {
|
||||
lon += 360.0;
|
||||
} else {
|
||||
lon -= 360.0;
|
||||
}
|
||||
}
|
||||
const latLng = L.GeoJSON.coordsToLatLng([lon, lat]);
|
||||
lastLatLng = latLng;
|
||||
return latLng;
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(geojsonLayer);
|
||||
|
||||
$.getJSON( dataURL, function( data ) {
|
||||
geojsonLayer.addData(data)
|
||||
map.fitBounds(geojsonLayer.getBounds());
|
||||
});
|
||||
geojsonLayer.addData(await data);
|
||||
map.fitBounds(geojsonLayer.getBounds());
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user