DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code Activity

fix: synchro repository with production

Browse Source
This commit is contained in:
mberard
2021-10-21 00:07:26 +02:00
parent febc76934b
commit 4ea4011a18
74 changed files with 17935 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

750
src/map.js
View File

@ -1,266 +1,484 @@
mapboxgl.accessToken = config.mapboxKey;
const owmKey = config.owmKey
var map = new mapboxgl.Map({
container: 'map',
style: {
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"light": {
"anchor": "viewport",
"color": "white",
"intensity": 0.1
},
'version': 8,
'sources': {
'default-background': {
'type': 'raster',
'tiles': [
//'https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default//GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg'
//'https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'
//'https://stamen-tiles-b.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
],
'tileSize': 256
}
},
'layers': [{
id: 'background',
type: 'background',
paint: {
'background-color': '#ffffff'
}
},
{
'id': 'default-background',
'type': 'raster',
'source': 'default-background',
'minzoom': 0,
'maxzoom': 18
}
]
},
center: [0, 20],
zoom: 2,
attributionControl: false
});
//prevent world duplication
map.setRenderWorldCopies(status === 'false')
map.on('load', function () {
//displaying clouds from OpenWeatherMap free API not enough
// map.addSource('clouds', {
// 'type': 'raster',
// 'tiles': [
// 'https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid='+owmKey+''
// ],
// 'tileSize': 256
// });
// map.addLayer({
// 'id': 'clouds',
// 'type': 'raster',
// 'source': 'clouds',
// 'minzoom': 0,
// 'maxzoom': 10,
// 'paint':{
// 'raster-opacity':0.5
// }
// });
//loading icons and colors, too lazy to make a loop, to change.
map.loadImage('src/img/plane-FFE419.png',
function (error, image) {
if (error) throw error;
map.addImage('plane-FFE419', image);
})
map.loadImage('src/img/plane-66FF00.png',
function (error, image) {
if (error) throw error;
map.addImage('plane-66FF00', image);
})
map.loadImage('src/img/plane-FF5555.png',
function (error, image) {
if (error) throw error;
map.addImage('plane-FF5555', image);
})
var colors = ["FFE419","66FF00","FF5555"]
//get now in GMT+0
var nowGMTSeconds = moment.tz(new Date(), "Europe/London").unix()
//get the planes from firestore
db.collection("planes").where("deliverySecondsServer", ">", nowGMTSeconds).get().then((querySnapshot) => { //change query to get only the ones who are still flying
querySnapshot.forEach((doc) => {
var id = doc.id
var data = doc.data()
//creating arcs
var line = turf.lineString([data.startCoordo,data.destCoordo])
var lineDistance = turf.length(line);
var arc = [];
var steps = 500;
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
var segment = turf.along(line, i);
arc.push(segment.geometry.coordinates);
}
line.geometry.coordinates = arc;
//random color
var randomColor = colors[Math.floor(Math.random() * colors.length)];
map.addSource('route-'+id+'', {
'type': 'geojson',
'data': line
});
map.addLayer({
'id': 'route-'+id+'',
'source': 'route-'+id+'',
'type': 'line',
'paint': {
'line-width': 2,
'line-color': '#'+randomColor
}
});
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
//creating and animating planes
// calculating area already travelled
var dateStart = moment(data.sentDate[0])
var dateEnd = moment(data.deliveryDate[0])
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var lineDistance = turf.length(line);
var currentPosition = turf.along(line, lineDistance*travelRatio,{units: 'kilometers'})
var plane = turf.point(currentPosition.geometry.coordinates,data)
//calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along(line, (lineDistance*travelRatio)-0.00001,{units: 'kilometers'})
var positionAfter = turf.along(line, (lineDistance*travelRatio)+0.00001,{units: 'kilometers'})
plane.properties.bearing = turf.bearing(
positionBefore,
positionAfter
);
map.addSource('plane-'+id+'', {
'type': 'geojson',
'data': plane
});
map.addLayer({
'id': 'plane-'+id+'',
'source': 'plane-'+id+'',
'type': 'symbol',
'layout': {
'icon-image': 'plane-'+randomColor+'',
'icon-rotate': ['get', 'bearing'],
'icon-size':0.05,
'icon-rotation-alignment': 'map',
'icon-allow-overlap': true,
'icon-ignore-placement': true
}
});
//animating
function animate(){
var dateStart = moment(data.sentDate[0])
var dateEnd = moment(data.deliveryDate[0])
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var lineDistance = turf.length(line);
var currentPosition = turf.along(line, lineDistance*travelRatio,{units: 'kilometers'})
var plane = turf.point(currentPosition.geometry.coordinates,data)
//calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along(line, (lineDistance*travelRatio)-0.00001,{units: 'kilometers'})
var positionAfter = turf.along(line, (lineDistance*travelRatio)+0.00001,{units: 'kilometers'})
plane.properties.bearing = turf.bearing(
positionBefore,
positionAfter
);
map.getSource('plane-'+id+'').setData(plane);
var nowGMTSeconds = moment.tz(new Date(), "Europe/London").unix()
//removing the plane from map if arrived
if (data.deliverySecondsServer < nowGMTSeconds){
map.setLayoutProperty('plane-'+id+'', 'visibility', 'none');
}
requestAnimationFrame(animate)
}
// uncomment to animate below, still some clipping issues
//animate()
//on click on a plane: get popup + display route
map.on('click', 'plane-'+id+'', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var prop = e.features[0].properties;
var sentDate = JSON.parse(prop.sentDate)[0]
var deliveryDate = JSON.parse(prop.deliveryDate)[0]
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
//displying route
map.setLayoutProperty('route-'+id+'', 'visibility', 'visible');
var popup = new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<b>Origine:</b> "+prop.startName+"<br><em>"+sentDate+"</em><br><b>Destination:</b> "+prop.destName+"<br><em>"+deliveryDate+"</em>")
.addTo(map);
//removing route
popup.on('close', function(){
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
});
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'plane-'+id+'', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'plane-'+id+'', function () {
map.getCanvas().style.cursor = '';
});
//adapt icon size to zoom level
map.on('zoom', function() {
map.setLayoutProperty('plane-'+id+'', 'icon-size', (map.getZoom())*0.025);
});
//URL Parameter : zooming to ID and opening popup when url in format avion-poe.me?plane=id
var queryString = window.location.search;
queryString = queryString.substring(7)
if(id == queryString){
map.setLayoutProperty('route-'+id+'', 'visibility', 'visible');
var bboxTravel = turf.bbox(line);
var bounds = [[bboxTravel[0],bboxTravel[1]],[bboxTravel[2],bboxTravel[3]]]
map.fitBounds(bounds, {
padding: 65,
speed: 0.5, // make the flying slow
curve: 0.8, // change the speed at which it zooms out
// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function(
t) {
return t;
},
});
var sentDate = plane.properties.sentDate[0]
var deliveryDate = plane.properties.deliveryDate[0]
var popup = new mapboxgl.Popup()
.setLngLat(currentPosition.geometry.coordinates)
.setHTML("<b>Origine:</b> "+plane.properties.startName+"<br><em>"+sentDate+"</em><br><b>Destination:</b> "+plane.properties.destName+"<br><em>"+deliveryDate+"</em>")
.addTo(map);
//removing route
popup.on('close', function(){
map.setLayoutProperty('route-'+id+'', 'visibility', 'none');
});
}
});
});
})
var loader = new PIXI.Loader();
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
for (var i in colors){
loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png');
}
//global variable
var nbPlane = 0
loader.add('shadow', 'src/img/shadow.png');
loader.load(function(loader, resources) {
var pixiContainer = new PIXI.Container();
var map = L.map('map',{
zoomControl: false,
minZoom:2,
maxZoom: 16,
maxBounds: [
[-Infinity, -360],
[Infinity, 360]
],
//worldCopyJump: true,
attributionControl: false
})
//zoom controls
L.control.zoom({position: 'bottomright'}).addTo(map);
//Locate user
L.control.locate({position: 'bottomright'}).addTo(map);
//fullscreen
map.addControl(new L.Control.Fullscreen({position: 'bottomright'}));
// Licence Icon
L.Control.Watermark = L.Control.extend({
onAdd: function(map) {
var img = L.DomUtil.create('img');
img.src = 'src/img/licence.svg';
img.style.width = '100px';
return img;
}
});
L.control.watermark = function(opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({ position: 'bottomleft' }).addTo(map);
//scale
L.control.scale().addTo(map);
//disabling send plane button if alreada 100 planes sent the current day
$.post("avionJournalier.php", function(result) {
result = result.replace(/'/g, '"');
result = $.parseJSON(result)
nbPlane = Number(result.nAvion)
$("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
if (nbPlane > 99){
$("#buttonNewPlane").prop("disabled",true);
}
else{
}
translateUI(lang)
})
//background
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '',
//minZoom:8,
maxZoom: 16,
}).addTo(map);
//adding terminator
var terminator = L.terminator()
.addTo(map);
setInterval(function() {
terminator.setTime();
}, 1000);
//center map on sun by default
function centerOnSun(){
var equator = turf.lineString([[-1000, 0], [1000, 0]])
var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
//console.log(intersects)
var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
//console.log(lonCenter)
return lonCenter
}
map.setView([30,0], 2);
//could layer from GBIS NASA - always 1 day of delay
var twoDaysAgo = moment(new Date()).subtract(2, "days").format('YYYY-MM-DD')
L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
attribution: '',
maxZoom: 8,
opacity:0.4
})
.addTo(map);
//Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
var svg = map.getPanes().overlayPane.firstChild,
svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
svgFilter.setAttribute('id', 'blur');
svgFilter.setAttribute('x', '-100%');
svgFilter.setAttribute('y', '-100%');
svgFilter.setAttribute('width', '500%');
svgFilter.setAttribute('height', '500%');
svgBlur.setAttribute('stdDeviation', 15);
svgFilter.appendChild(svgBlur);
svg.appendChild(svgFilter);
terminator._path.setAttribute('filter', 'url(#blur)');
//geojson for arclines
//travel
var arcTravelStyle = {
"color": "#00ff00",
"weight": 2.5,
"dashArray": "10 5",
"opacity": 0.65
};
var arcTravel = L.geoJSON([],{style: arcTravelStyle}).addTo(map);
//travelled
var arcTravelledStyle = {
"color": "#00ff00",
"weight": 2.5,
"opacity": 0.65
};
var arcTravelled = L.geoJSON([],{style: arcTravelledStyle}).addTo(map);
var pulsatingMarker = L.layerGroup([]).addTo(map)
var originMarker = L.layerGroup([]).addTo(map)
var firstDraw = true;
var prevZoom;
var pixiOverlay = L.pixiOverlay(function(utils, event) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var scale = utils.getScale();
if (firstDraw) {
//get planes
$.post( "getCurrentPlanes.php", function(result) {
// console.log(result)
var planes = $.parseJSON(result)
console.log(planes)
function formatResults(data){
data.deliveryTime = Number(data.deliveryTime)*1000
data.startTime = Number(data.startTime)*1000
return data
}
function displayPlane(data){
var line = turf.greatCircle(turf.point([Number(data.startLon),Number(data.startLat)]), turf.point([Number(data.destLon),Number(data.destLat)]),{offset:20})
var lineDistance = turf.length(line);
var dateStart = moment(data.startTime)
var dateEnd = moment(data.deliveryTime)
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var travelledDistance = lineDistance*travelRatio // getting the travelled distance
var segment;
if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline, well it's a mess.
var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
var l1Length = turf.length(l1) // calculating length of first segment
if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1
data.position = 1
}
else{
segment = l2 // otherwise on segment 2
data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
}
}
else{
segment = line
data.position = 0
}
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
//calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along(segment, (travelledDistance)-0.00001,{units: 'kilometers'})
var positionAfter = turf.along(segment, (travelledDistance)+0.00001,{units: 'kilometers'})
var rotation = turf.bearing(
positionBefore,
positionAfter
);
//plane
var iconColor = 'marker'+data.color
var markerTexture = resources[iconColor].texture;
var marker = new PIXI.Sprite(markerTexture);
marker.anchor.set(0.5, 0.5);
var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
marker.angle = rotation;
marker.scale.set(5);
marker.interactive = true;
marker.cursor = 'pointer'
marker.data = data
marker.data.line = line
marker.data.currentPosition = currentPosition
//shadow
var shadowTexture = resources.shadow.texture;
var shadow = new PIXI.Sprite(shadowTexture);
shadow.anchor.set(0.5, 0.5);
shadow.x = markerCoords.x;
shadow.y = markerCoords.y + 0.5;
shadow.angle = rotation;
shadow.scale.set(0.00025);
shadow.alpha = 0.3
shadow.visible = false
//popup
marker.popup = L.popup({className: 'pixi-popup'})
pixiContainer.addChild(shadow);
pixiContainer.addChild(marker);
renderer.render(container)
//adapting scale based on zoom level. Max zoom = writting visible
map.on('zoomend', function() {
marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
if(map.getZoom() == 16){
shadow.visible = true
}
else{
shadow.visible = false
}
});
//animating moving plane
setInterval(function() {
animate();
}, 1000)
function animate() {
if (map.getZoom() > 12){ // we animate only starting zoom 12
var bounds = map.getBounds()
var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];
var extentPoly = turf.bboxPolygon(bbox);
var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
if(planeInExtent == true){ // we animate only the planes in map extent
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var lineDistance = turf.length(line);
var segment;
var travelledDistance = lineDistance*travelRatio // getting the travelled distance
if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
var l1Length = turf.length(l1) // calculating length of first segment
if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1
marker.data.position = 1 // we store it, usefull for popup event
}
else{
segment = l2 // otherwise on segment 2
marker.data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
}
}
else{
segment = line
}
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
//troubleshooting extreme lons
if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
marker.data.currentPosition = currentPosition
var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
shadow.x = markerCoords.x;
shadow.y = markerCoords.y + 0.5;
renderer.render(container);
}
}
}
//if parameter in URL, zoom on it
var queryString = window.location.search;
queryString = queryString.split('=')[1]
if(Number(queryString)==data.uid){
setTimeout(
function()
{
map.setView([data.currentPosition.geometry.coordinates[1],data.currentPosition.geometry.coordinates[0]], 15);
openPopup(marker)
}, 100);
}
}
for (var i in planes){
displayPlane(formatResults(planes[i]),0)
}
});
function openPopup(target){
//drawing arcs
arcTravel.clearLayers()
arcTravelled.clearLayers()
arcTravelStyle.color = '#'+target.data.color
arcTravelledStyle.color = '#'+target.data.color
var travel = target.data.line
var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
var current = target.data.currentPosition
var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
// for linestrings
if(travel.geometry.type == "LineString"){
var sliced1 = turf.lineSlice(start, current, travel);
var sliced2 = turf.lineSlice(current, end, travel);
arcTravelled.addData(sliced1);
arcTravel.addData(sliced2);
}
// we create a copy of lines crossing the datetime
function createCopy(c){
for (var i in c.geometry.coordinates){
if (c.geometry.coordinates[i][0] > 0){
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360)
}
else{
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
}
}
return c
}
//for multilinetrings
if(travel.geometry.type == "MultiLineString"){
var l1 = turf.lineString(travel.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(travel.geometry.coordinates[1]) // creating a line from second segment
if(target.data.position == 1){
var sliced1 = turf.lineSlice(start, current, l1);
var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
arcTravelled.addData(sliced1);
arcTravel.addData(sliced2);
arcTravel.addData(l2);
}
else if(target.data.position == 2){
var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
var sliced2 = turf.lineSlice(current, end, l2);
arcTravelled.addData(l1);
arcTravelled.addData(sliced1);
arcTravel.addData(sliced2);
}
var travelledGeoJSON = arcTravelled.toGeoJSON()
for (var i in travelledGeoJSON.features){
arcTravelled.addData(createCopy(travelledGeoJSON.features[i]))
}
var travelGeoJSON = arcTravel.toGeoJSON()
for (var i in travelGeoJSON.features){
arcTravel.addData(createCopy(travelGeoJSON.features[i]))
}
}
//add pulsating marker on destination;
pulsatingMarker.clearLayers()
var pulseIcon = L.divIcon({
className: 'pulse-icon', //empty class to overwrite leaflet defaults
html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
iconSize: [22,22]
});
var endCoordo = [Number(target.data.destLat),Number(target.data.destLon)]
pulsatingMarker.addLayer(new L.marker(endCoordo, {icon: pulseIcon}));
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon}));
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon}));
}
//adding static marker on origin
originMarker.clearLayers()
var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
originMarker.addLayer(new L.circleMarker(startCoordo, {radius: 6,opacity:0.7, weight:2,color:'#'+target.data.color}));
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]-Number(360)], {radius: 6,opacity:0.7,weight:2,color:'#'+target.data.color}));
originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]+Number(360)], {radius: 6,opacity:0.7,color:'#'+target.data.color}));
}
//popup
var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
moment.locale(momentLocale)
target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
//arabic popup
if(lang=="ar"){
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
}
//other languages
else{
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
}
target.popup.openOn(map);
target.popup.on('remove', function() {
arcTravel.clearLayers()
arcTravelled.clearLayers()
pulsatingMarker.clearLayers()
originMarker.clearLayers()
});
target.popup.on('popupclose', function() {
arcTravel.clearLayers()
arcTravelled.clearLayers()
pulsatingMarker.clearLayers()
originMarker.clearLayers()
});
}
//utils for popup
utils.getMap().on('click', function(e) {
var interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point();
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) {
openPopup(target)
}
});
utils.getMap().on('touchend', function(e) {
var interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point();
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) {
openPopup(target)
}
});
}
firstDraw = false;
prevZoom = zoom;
renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);
});
//hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 )
(function(){
var originalInitTile = L.GridLayer.prototype._initTile
L.GridLayer.include({
_initTile: function (tile) {
originalInitTile.call(this, tile);
var tileSize = this.getTileSize();
tile.style.width = tileSize.x + 1 + 'px';
tile.style.height = tileSize.y + 1 + 'px';
}
});
})()