'use strict';
/* global mapuser userid disp noHeader mapKey */
import css from '../css/map.css';
import io from 'socket.io-client';
import $ from 'jquery';
import loadGoogleMapsAPI from 'load-google-maps-api';
// Variables
var map, pano, marker, elevator, newLoc;
const mapElem = document.getElementById('map'),
panoElem = document.getElementById('pano'),
socket = io('//'+window.location.hostname);
// socket.io stuff
socket
.on('connect', function(){
console.log("⬆️ Connected!");
// Can get location
socket.emit('can-get', mapuser._id );
// Can set location too
if (mapuser._id===userid) {
socket.emit('can-set', userid );
}
})
.on('disconnect', function(){
console.log("⬇️ Disconnected!");
})
.on('error', function (err){
console.error('❌️',err.message);
});
// 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);
});
// Load google maps
loadGoogleMapsAPI({ key:mapKey })
.then(function(googlemaps) {
// Create map
if (disp!=='1') {
map = new googlemaps.Map( mapElem, {
center: new googlemaps.LatLng( mapuser.last.lat, mapuser.last.lon ),
panControl: false,
scaleControl: (mapuser.settings.showScale)?true:false,
draggable: false,
zoom: mapuser.settings.defaultZoom,
streetViewControl: false,
zoomControlOptions: {position: googlemaps.ControlPosition.LEFT_TOP},
mapTypeId: (mapuser.settings.defaultMap=='road')?googlemaps.MapTypeId.ROADMAP:googlemaps.MapTypeId.HYBRID
});
marker = new googlemaps.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!=='0' && mapuser._id!=='demo') {
const logoDiv = document.createElement('div');
logoDiv.id = 'map-logo';
logoDiv.innerHTML = ''+
'
'+
"Tracman";
map.controls[googlemaps.ControlPosition.BOTTOM_LEFT].push(logoDiv);
}
// Create update time block
const timeDiv = document.createElement('div');
timeDiv.id = 'timestamp';
if (mapuser.last.time) {
timeDiv.innerHTML = 'location updated '+new Date(mapuser.last.time).toLocaleString();
}
map.controls[googlemaps.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.id = 'spd-label';
speedLabel.innerHTML = 'SPEED';
speedText.id = 'spd';
speedText.innerHTML = (mapuser.settings.units=='standard')?(parseFloat(mapuser.last.spd)*2.23694).toFixed():mapuser.last.spd.toFixed();
speedUnit.id = 'spd-unit';
speedUnit.innerHTML = (mapuser.settings.units=='standard')?'m.p.h.':'k.p.h.';
speedSign.id = 'spd-sign';
speedSign.appendChild(speedLabel);
speedSign.appendChild(speedText);
speedSign.appendChild(speedUnit);
map.controls[googlemaps.ControlPosition.TOP_RIGHT].push(speedSign);
}
// Create altitude block
if (mapuser.settings.showAlt) {
const elevator = new googlemaps.ElevationService,
altitudeSign = document.createElement('div'),
altitudeLabel = document.createElement('div'),
altitudeText = document.createElement('div'),
altitudeUnit = document.createElement('div');
altitudeLabel.id = 'alt-label';
altitudeText.id = 'alt';
altitudeUnit.id = 'alt-unit';
altitudeSign.id = 'alt-sign';
altitudeText.innerHTML = '';
altitudeLabel.innerHTML = 'ALTITUDE';
getAltitude(new googlemaps.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[googlemaps.ControlPosition.TOP_RIGHT].push(altitudeSign);
}
}
// Create streetview
if (disp!=='0' && mapuser.settings.showStreetview) {
updateStreetView(parseLoc(mapuser.last),10);
}
// 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.tim = new Date(loc.tim).toLocaleString();
loc.glatlng = new googlemaps.LatLng(loc.lat, loc.lon);
return loc;
}
// Got location
socket.on('get', function(loc) {
console.log("🌐️ Got location:",loc.lat+", "+loc.lon);
// Parse location
newLoc = parseLoc(loc);
// Update map
if (disp!=='1') {
// Update time
$('#timestamp').text('location updated '+newLoc.tim);
// Update marker and map center
googlemaps.event.trigger(map,'resize');
map.setCenter({ lat:newLoc.lat, lng:newLoc.lon });
marker.setPosition({ lat:newLoc.lat, lng:newLoc.lon });
// Update speed
if (mapuser.settings.showSpeed) {
$('#spd').text( newLoc.spd.toFixed() );
}
// Update altitude
if (mapuser.settings.showAlt) {
getAltitude({
lat: newLoc.lat,
lng: newLoc.lon
}, elevator, function(alt) {
if (alt) {
$('#alt').text( (mapuser.settings.units=='standard')?(alt*3.28084).toFixed():alt.toFixed() );
}
});
}
}
// Update street view
if (disp!=='0' && mapuser.settings.showStreetview) {
updateStreetView(newLoc,10);
}
});
// Check altitude
function getAltitude(loc,elev,cb){
elev = elev || new googlemaps.ElevationService;
elev.getElevationForLocations({
'locations': [loc]
}, function(results, status) {
if (status === googlemaps.ElevationStatus.OK && results[0]) {
cb(results[0].elevation);
}
});
}
// Get street view imagery
function getStreetViewData(loc,rad,cb) {
// Ensure that the location hasn't changed (or this is the initial setting)
if ( newLoc == null || loc.tim===newLoc.tim ) {
if (!sv) { var sv=new googlemaps.StreetViewService(); }
sv.getPanorama({
location: {
lat: loc.lat,
lng: loc.lon
},
radius: rad
}, function(data,status){ switch (status){
// Success
case googlemaps.StreetViewStatus.OK:
cb(data);
break;
// No results in that radius
case googlemaps.StreetViewStatus.ZERO_RESULTS:
// Try again with a bigger radius
getStreetViewData(loc,rad*2,cb);
break;
// Error
default:
console.error(new Error('❌️ Street view not available: '+status).message);
} });
}
}
// Update streetview
function updateStreetView(loc) {
// Moving (show image)
if (loc.spd>1) {
// Create image
const imgElem = document.getElementById('panoImg');
if (!imgElem) {
pano = undefined;
$('#pano').empty();
$('#pano').append($('
',{
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
getStreetViewData(loc, 2, function(data){
$('#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='+mapKey);
});
}
// Not moving and pano not set (create panoramic image)
else if (pano==null) {
// Create panorama
$('#pano').empty();
pano = new googlemaps.StreetViewPanorama(panoElem, {
panControl: false,
zoomControl: false,
addressControl: false,
linksControl: false,
motionTracking: false,
motionTrackingControl: false
});
// Set panorama
getStreetViewData(loc, 2, function(data){
pano.setPano(data.location.pano);
pano.setPov({
pitch: 0,
// Point towards users's location from street
heading: Math.atan((loc.lon-data.location.latLng.lng())/(loc.lat-data.location.latLng.lat()))*(180/Math.PI)
});
});
}
}
}).catch((err) => {
console.error(err);
});