You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.8 KiB
108 lines
2.8 KiB
var map = L.map('map', { zoomControl: false }).setView([45.516, -122.660], 14, null, null, 24);
|
|
|
|
var opts = {
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
zoomOffset: -1,
|
|
tileSize: 512,
|
|
id: 'mapbox/light-v10',
|
|
accessToken: 'pk.eyJ1IjoiYWFyb25wayIsImEiOiJja3A0eXV2ZXIwMGt3MnVuc2Uzcm1yYzFuIn0.-_qwPOLRiQk8t56xs6vkfg'
|
|
};
|
|
|
|
if(getQueryVariable('attribution') == 0) {
|
|
opts.attribution = 'Mapbox';
|
|
}
|
|
|
|
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', opts).addTo(map);
|
|
|
|
if(getQueryVariable('controls') != 0) {
|
|
new L.Control.Zoom({ position: 'topleft' }).addTo(map);
|
|
}
|
|
|
|
var geojsonLineOptions = {
|
|
color: "#0033ff",
|
|
weight: 4,
|
|
opacity: 0.5
|
|
};
|
|
|
|
var startIcon = L.icon({
|
|
iconUrl: '/assets/map-pin-start.png',
|
|
iconSize: [18,28],
|
|
iconAnchor: [9,28]
|
|
});
|
|
|
|
// Load the current location and show on the map
|
|
|
|
var currentLocationMarker;
|
|
var currentTrack;
|
|
var lastSeenTimestamp;
|
|
|
|
function getCurrentLocation() {
|
|
var interval = 5000;
|
|
|
|
if(getQueryVariable('interval')) {
|
|
interval = getQueryVariable('interval');
|
|
}
|
|
|
|
$.getJSON("/share/current.json?token="+$("#share_token").val(), function(data){
|
|
if(data.data) {
|
|
moveMarkerToPosition(data.data);
|
|
if(lastSeenTimestamp != data.data.properties.timestamp) {
|
|
map.setView(currentLocationMarker.getLatLng());
|
|
}
|
|
lastSeenTimestamp = data.data.properties.timestamp;
|
|
}
|
|
setTimeout(getCurrentLocation, interval);
|
|
});
|
|
}
|
|
|
|
function getRecentHistory() {
|
|
$.getJSON("/share/history.json?token="+$("#share_token").val(), function(data){
|
|
if(data.linestring) {
|
|
L.geoJson(data.linestring, {
|
|
style: geojsonLineOptions
|
|
}).addTo(map);
|
|
}
|
|
});
|
|
}
|
|
|
|
getCurrentLocation();
|
|
getRecentHistory();
|
|
|
|
|
|
|
|
|
|
|
|
function moveMarkerToPosition(feature) {
|
|
if(feature && feature.geometry) {
|
|
var coord = pointFromGeoJSON(feature.geometry.coordinates);
|
|
if(coord) {
|
|
if(!currentTrack) {
|
|
currentTrack = L.polyline([coord, coord]).addTo(map);
|
|
} else {
|
|
currentTrack.addLatLng(coord);
|
|
}
|
|
|
|
if(!currentLocationMarker) {
|
|
currentLocationMarker = L.marker(coord).addTo(map);
|
|
} else {
|
|
currentLocationMarker.setLatLng(coord);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function pointFromGeoJSON(geo) {
|
|
return L.latLng(geo[1], geo[0])
|
|
}
|
|
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split('&');
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split('=');
|
|
if (decodeURIComponent(pair[0]) == variable) {
|
|
return decodeURIComponent(pair[1]);
|
|
}
|
|
}
|
|
}
|