259 lines
7.9 KiB
JavaScript
259 lines
7.9 KiB
JavaScript
'use strict';
|
|
/* global $ io google mapuser userid disp noHeader */
|
|
|
|
|
|
// Variables
|
|
var map, pano, marker, elevator,
|
|
mapElem = document.getElementById('map'),
|
|
panoElem = document.getElementById('pano');
|
|
const socket = io('//'+window.location.hostname);
|
|
|
|
function waitForElements(vars,cb){
|
|
if (vars.every(function(v){ return v!==undefined; })){
|
|
cb();
|
|
} else {
|
|
setTimeout(waitForElements, 100);
|
|
}
|
|
}
|
|
|
|
function onConnect(socket,userid,mapuserid) {
|
|
|
|
// Can get location
|
|
socket.emit('can-get', mapuserid );
|
|
console.log("🚹 Receiving updates for",mapuserid);
|
|
|
|
// Can set location too
|
|
if (mapuserid==userid) {
|
|
socket.emit('can-set', userid );
|
|
console.log("🚹 Sending updates for",userid);
|
|
}
|
|
|
|
}
|
|
|
|
// socket.io stuff
|
|
socket
|
|
.on('connect', function(){
|
|
console.log("⬆️ Connected!");
|
|
waitForElements([mapuser,userid], function() {
|
|
onConnect(socket,userid,mapuser._id);
|
|
});
|
|
})
|
|
.on('disconnect', function(){
|
|
console.log("⬇️ Disconnected!");
|
|
})
|
|
.on('error', function (err){
|
|
console.error('⛔️',err.message);
|
|
});
|
|
|
|
// Parse location
|
|
function parseLoc(loc) {
|
|
loc.spd = (mapuser.settings.units=='standard')?parseFloat(loc.spd)*2.23694:parseFloat(loc.spd);
|
|
loc.dir = parseFloat(loc.dir);
|
|
loc.lat = parseFloat(loc.lat);
|
|
loc.lon = parseFloat(loc.lon);
|
|
loc.time = new Date(loc.time).toLocaleString();
|
|
loc.glatlng = new google.maps.LatLng(loc.lat, loc.lon);
|
|
return loc;
|
|
}
|
|
|
|
// Show/hide map if location is set/unset
|
|
function toggleMaps(loc) {
|
|
if (loc.lat===0&&loc.lon===0) {
|
|
$('#map').hide();
|
|
$('#pano').hide();
|
|
$('#notset').show();
|
|
} else {
|
|
$('#map').show();
|
|
$('#pano').show();
|
|
$('#notset').hide();
|
|
}
|
|
}
|
|
// Toggle maps on page load
|
|
$(function() {
|
|
toggleMaps(mapuser.last);
|
|
});
|
|
|
|
// Google maps API callback
|
|
window.gmapsCb = function() {
|
|
|
|
// Create map
|
|
if (disp!='1'||!mapuser.settings.showStreetview) {
|
|
map = new google.maps.Map( mapElem, {
|
|
center: new google.maps.LatLng( mapuser.last.lat, mapuser.last.lon ),
|
|
panControl: false,
|
|
draggable: false,
|
|
zoom: mapuser.settings.defaultZoom,
|
|
streetViewControl: false,
|
|
zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
|
|
mapTypeId: (mapuser.settings.defaultMap=='road')?google.maps.MapTypeId.ROADMAP:google.maps.MapTypeId.HYBRID
|
|
});
|
|
marker = new google.maps.Marker({
|
|
position: { lat:mapuser.last.lat, lng:mapuser.last.lon },
|
|
title: mapuser.name,
|
|
map: map,
|
|
draggable: false
|
|
});
|
|
map.addListener('zoom_changed',function(){
|
|
map.setCenter(marker.getPosition());
|
|
});
|
|
|
|
// Create iFrame logo
|
|
if (noHeader.length) {
|
|
var logoDiv = document.createElement('div');
|
|
logoDiv.className = 'map-logo';
|
|
logoDiv.innerHTML = '<a href="https://tracman.org/">'+
|
|
'<img src="https://tracman.org/static/img/style/logo-28.png" alt="[]">'+
|
|
'Tracman</a>';
|
|
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv);
|
|
}
|
|
|
|
// Create update time block
|
|
var timeDiv = document.createElement('div');
|
|
timeDiv.className = 'tim';
|
|
if (mapuser.last.time) {
|
|
timeDiv.innerHTML = 'location updated '+new Date(mapuser.last.time).toLocaleString();
|
|
}
|
|
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(timeDiv);
|
|
|
|
// Create speed block
|
|
if (mapuser.settings.showSpeed) {
|
|
const speedSign = document.createElement('div'),
|
|
speedLabel = document.createElement('div'),
|
|
speedText = document.createElement('div'),
|
|
speedUnit = document.createElement('div');
|
|
speedLabel.className = 'spd-label';
|
|
speedLabel.innerHTML = 'SPEED';
|
|
speedText.className = 'spd';
|
|
speedText.innerHTML = (mapuser.settings.units=='standard')?(parseFloat(mapuser.last.spd)*2.23694).toFixed():mapuser.last.spd.toFixed();
|
|
speedUnit.className = 'spd-unit';
|
|
speedUnit.innerHTML = (mapuser.settings.units=='standard')?'m.p.h.':'k.p.h.';
|
|
speedSign.className = 'spd-sign';
|
|
speedSign.appendChild(speedLabel);
|
|
speedSign.appendChild(speedText);
|
|
speedSign.appendChild(speedUnit);
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(speedSign);
|
|
}
|
|
|
|
// Create altitude block
|
|
if (mapuser.settings.showAlt) {
|
|
var elevator = new google.maps.ElevationService;
|
|
const altitudeSign = document.createElement('div'),
|
|
altitudeLabel = document.createElement('div'),
|
|
altitudeText = document.createElement('div'),
|
|
altitudeUnit = document.createElement('div');
|
|
altitudeLabel.className = 'alt-label';
|
|
altitudeText.className = 'alt';
|
|
altitudeUnit.className = 'alt-unit';
|
|
altitudeSign.className = 'alt-sign';
|
|
altitudeText.innerHTML = '';
|
|
altitudeLabel.innerHTML = 'ALTITUDE';
|
|
getAltitude(new google.maps.LatLng(mapuser.last.lat,mapuser.last.lon), elevator, function(alt) {
|
|
if (alt) { altitudeText.innerHTML = (mapuser.settings.units=='standard')?(alt*3.28084).toFixed():alt.toFixed(); }
|
|
});
|
|
altitudeUnit.innerHTML = (mapuser.settings.units=='standard')?'feet':'meters';
|
|
altitudeSign.appendChild(altitudeLabel);
|
|
altitudeSign.appendChild(altitudeText);
|
|
altitudeSign.appendChild(altitudeUnit);
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign);
|
|
}
|
|
}
|
|
|
|
// Create streetview
|
|
updateStreetView(parseLoc(mapuser.last),10);
|
|
};
|
|
|
|
// Get location
|
|
socket.on('get', function(loc) {
|
|
|
|
loc = parseLoc(loc);
|
|
|
|
// Update street view
|
|
if (disp!='1' || !mapuser.settings.showStreetview) {
|
|
$('.tim').text('location updated '+loc.time);
|
|
if (mapuser.settings.showSpeed) { $('.spd').text(loc.spd.toFixed()); }
|
|
if (mapuser.settings.showAlt) {
|
|
getAltitude({lat:loc.lat,lng:loc.lon}, elevator, function(alt) {
|
|
if (alt) { $('.alt').text((mapuser.settings.units=='standard')?(alt*3.28084).toFixed():alt.toFixed()); }
|
|
});
|
|
}
|
|
toggleMaps(loc);
|
|
map.setCenter({lat:loc.lat,lng:loc.lon});
|
|
marker.setPosition({lat:loc.lat,lng:loc.lon});
|
|
}
|
|
updateStreetView(loc,10);
|
|
|
|
console.log("🌐️ Got location:",loc.lat+", "+loc.lon);
|
|
});
|
|
|
|
// Check altitude
|
|
function getAltitude(loc,elev,cb){
|
|
elev = elev || new google.maps.ElevationService;
|
|
elev.getElevationForLocations({
|
|
'locations': [loc]
|
|
}, function(results, status) {
|
|
if (status === google.maps.ElevationStatus.OK && results[0]) {
|
|
cb(results[0].elevation);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Get street view imagery
|
|
function getStreetViewData(loc,rad,cb) {
|
|
if (!sv) { var sv=new google.maps.StreetViewService(); }
|
|
sv.getPanorama({location:{lat:loc.lat,lng:loc.lon},radius:rad},function(data,status){
|
|
if (status===google.maps.StreetViewStatus.ZERO_RESULTS){
|
|
getStreetViewData(loc,rad*2,cb);
|
|
} else if (status!==google.maps.StreetViewStatus.OK){ console.error(new Error('⛔️ Street view not available:',status).message); }
|
|
else { cb(data); }
|
|
});
|
|
}
|
|
|
|
// Update streetview
|
|
function updateStreetView(loc) {
|
|
|
|
// Moving
|
|
if (loc.spd>1) {
|
|
if (mapuser.settings.showStreetview && disp!='0') {
|
|
var imgElem = document.getElementById('panoImg');
|
|
getStreetViewData(loc, 50, function(data){
|
|
if (!imgElem) {
|
|
// Create image
|
|
pano = undefined;
|
|
$('#pano').empty();
|
|
$('#pano').append($('<img>',{
|
|
alt: 'Street view image',
|
|
src: 'https://maps.googleapis.com/maps/api/streetview?size=800x800&location='+loc.lat+','+loc.lon+'&fov=90&heading='+loc.dir+'&key={{api}}',
|
|
id: 'panoImg'
|
|
}));
|
|
}
|
|
// Set image
|
|
$('#panoImg').attr('src','https://maps.googleapis.com/maps/api/streetview?size='+$('#pano').width()+'x'+$('#pano').height()+'&location='+data.location.latLng.lat()+','+data.location.latLng.lng()+'&fov=90&heading='+loc.dir+'&key={{api}}');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Not moving and pano not set
|
|
else if (pano==null) {
|
|
getStreetViewData(loc, 50, function(data){
|
|
// Create panorama
|
|
$('#pano').empty();
|
|
const panoOptions = {
|
|
panControl: false,
|
|
zoomControl: false,
|
|
addressControl: false,
|
|
linksControl: false,
|
|
motionTracking: false,
|
|
motionTrackingControl: false
|
|
};
|
|
pano = new google.maps.StreetViewPanorama(panoElem, panoOptions);
|
|
// Set panorama
|
|
pano.setPano(data.location.pano);
|
|
pano.setPov({
|
|
pitch: 0,
|
|
heading: Math.atan((loc.lon-data.location.latLng.lng())/(loc.lat-data.location.latLng.lat()))*(180/Math.PI)
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|