fix: synchro repository with production

src/about.js

@@ -0,0 +1,33 @@
+//open / close
+var aboutOpen = 0
+
+$('#buttonAbout').on('click',function(){
+	//hiding navbar
+	$('.navbar-collapse').collapse('hide');
+	if (aboutOpen > 0){
+		$('#about').css('visibility','hidden');
+		$('#about').css('opacity','0')
+		$('#backToMap').css('visibility','hidden');
+		$('#backToMap').css('opacity','0')
+		aboutOpen = 0
+	}
+	else{
+		$('#about').css('visibility','visible')
+		$('#about').css('opacity','1')
+		$('#backToMap').css('visibility','visible');
+		$('#backToMap').css('opacity','1')
+		aboutOpen = 1
+	}
+	//closing anthology
+	$('#anthology').css('opacity','0')
+	$('#anthology').css('visibility','hidden')
+	anthologyOpen = 0
+})
+
+$('#closeAnthologyAbout').on('click',function(){
+	$('#about').css('opacity','0')
+	$('#about').css('visibility','hidden')
+	$('#backToMap').css('opacity','0')
+	$('#backToMap').css('visibility','hidden')
+	aboutOpen = 0
+})

src/anthology.js

@@ -0,0 +1,130 @@
+//open / close
+var anthologyOpen = 0
+
+$('#buttonAnthology').on('click',function(){
+	//hiding navbar
+	$('.navbar-collapse').collapse('hide');
+	if (anthologyOpen > 0){
+		$('#anthology').css('visibility','hidden');
+		$('#anthology').css('opacity','0')
+		$('#backToMap').css('visibility','hidden');
+		$('#backToMap').css('opacity','0')
+		anthologyOpen = 0
+	}
+	else{
+		$('#anthology').css('visibility','visible')
+		$('#anthology').css('opacity','1')
+		$('#backToMap').css('visibility','visible');
+		$('#backToMap').css('opacity','1')
+		anthologyOpen = 1
+		displayAnthology()
+		
+	}
+	//closing about
+	$('#about').css('visibility','hidden');
+	$('#about').css('opacity','0')
+	aboutOpen = 0
+})
+
+$('#closeAnthologyAbout').on('click',function(){
+	$('#anthology').css('opacity','0')
+	$('#anthology').css('visibility','hidden')
+	$('#backToMap').css('opacity','0')
+	$('#backToMap').css('visibility','hidden')
+	anthologyOpen = 0
+})
+
+$('#navTitle').on('click',function(){
+	$('#anthology').css('opacity','0')
+	$('#anthology').css('visibility','hidden')
+	$('#backToMap').css('opacity','0')
+	$('#backToMap').css('visibility','hidden')
+	$('#about').css('opacity','0')
+	$('#about').css('visibility','hidden')
+	aboutOpen = 0
+	anthologyOpen = 0
+})
+
+
+
+
+
+function flightTime(a,b){
+	var days = Math.round((b-a)/86400 * 100) / 100
+	var months = Math.round(days/30)
+	var years = Math.round(months/12)
+	if (days < 30){
+		return ""+days+" "+dictionnary.jours
+	}
+	else if (days >= 30 && days < 365){
+		if(months>1){
+			return ""+months+" "+dictionnary.mois_pluriel
+		}
+		else{
+			return ""+months+" "+dictionnary.mois
+		}
+	}
+	else if (days >= 365){
+		if(years>1){
+			return ""+years+" "+dictionnary.ans
+		}
+		else{
+			return ""+years+" "+dictionnary.an
+		}
+	}
+}
+
+//load
+var nPages;
+var nPagesLoaded = 1
+$.post( "getAnthology.php", function(pages) {
+	pages = $.parseJSON(pages)
+	nPages = Number(pages.nPages)
+})
+
+function displayAnthology(){ // clean and display first page
+	$("#anthologyItems").html('')
+	nPagesLoaded = 1
+	$.post( "getAnthology.php?page=1", function(result) {
+		results = $.parseJSON(result)
+		var momentLocale = lang;
+		if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
+		moment.locale(momentLocale)
+		for (var i in results){
+			addAnthologyLine(results[i])
+		}
+	})
+}
+
+$( "#anthology" ).scroll(function() {
+   if($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()){
+	   if (nPagesLoaded < nPages){
+		   nPagesLoaded++
+		    console.log('Loading anthology page '+nPagesLoaded+'/'+nPages)
+		   $.post( "getAnthology.php?page="+nPagesLoaded+"", function(result) {
+			results = $.parseJSON(result)
+			var momentLocale = lang;
+			if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
+			moment.locale(momentLocale)
+			for (var i in results){
+				addAnthologyLine(results[i])
+			}
+		})
+	   }
+   }
+});
+
+function addAnthologyLine(results){
+	if (lang == 'ar'){ // arabic : rtl + add <br>
+		$("#anthologyItems").append(
+		'<small style="float:right">'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
+		)
+	}
+	else{
+		$("#anthologyItems").append(
+		'<small>'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
+		)
+	}
+}
+
+

src/app.css

@@ -1,73 +1,264 @@
-body { 
-	margin: 0; 
-	padding: 0; 
-	font-family: 'PT Mono', monospace;
-	/* font-family: 'Special Elite', cursive !important */
-}
-
-#map { 
-	position: absolute; 
-	top: 0; 
-	bottom: 0; 
-	width: 100%; 
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  /* Set the fixed height of the footer here */
-  height: 30px;
-  line-height: 30px; /* Vertically center the text there */
-  background-color: #f5f5f5;
-  font-size: 12px
-}
-
-/* removing footer on mobile */
-@media screen and (max-width: 400px) {
-	.footer {
-		display:none
-	}
-}
-
-/* big modal */
-.modal-lg {
-	max-width:1140px !important;
-}
-
-.mapboxgl-map{
-	font-family: 'PT Mono', monospace;
-	/* font-family: 'Special Elite', cursive !important */
-}
-
-.mapboxgl-ctrl-logo{
-    display: none !important;
-}
-
-
-/* paper plane animation */
-#canvas3d{
-	display:none;
-	transition: all .3s;
-	position:fixed;
-	height:100vh;
-	width:100vw;
-	background-color: rgba(0,0,0,0);
-	z-index:9999;
-	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
-    transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
-	margin-left: 50vw; /* poussé de la moitié de hauteur de viewport */ 
-}
-
-/* qill text editor */
-#messageTextArea {
-  min-height: 200px;
-  border-radius: 0px 0px .25em .25em !important;
-  border-color: #ced4da !important
-}
-
-.ql-toolbar{
-   border-radius:  .25em .25em 0px 0px !important;
-   border-color: #ced4da !important
-}
-
+html,
+body {
+  overflow-x: hidden;
+  height: 100%;
+}
+
+body { 
+    position: relative;
+	margin: 0; 
+	padding: 0; 
+	font-family: 'PT Mono', monospace;
+}
+
+#map { 
+	position: fixed; 
+	top: 0; 
+	bottom: 0; 
+	height:100%;
+	width: 100%; 
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 30px;
+  line-height: 30px; /* Vertically center the text there */
+  background-color: #f5f5f5;
+  font-size: 12px
+}
+
+
+/* big modal */
+.modal-lg {
+	max-width:1140px !important;
+}
+
+/* paper plane animation */
+#canvas3d{
+	display:none;
+	transition: all .3s;
+	position:fixed;
+	height:100vh;
+	width:100vw;
+	background-color: rgba(0,0,0,0);
+	z-index:9999;
+	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
+    transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
+	margin-left: 50vw; /* poussé de la moitié de hauteur de viewport */ 
+}
+
+/* qill text editor */
+#messageTextArea {
+  min-height: 200px;
+  border-radius: 0px 0px .25em .25em !important;
+  border-color: #ced4da !important
+}
+
+.ql-toolbar{
+   border-radius:  .25em .25em 0px 0px !important;
+   border-color: #ced4da !important
+}
+/* make the pixi overlay on top of the arc lines */
+.leaflet-pixi-overlay {
+ position: absolute !important;
+ z-index: 201 !important;
+}
+
+.bold{
+	font-weight:bold !important
+}
+
+/* Anthology */
+#anthology{
+	visibility:hidden;
+	opacity:0;
+    transition:visibility 0.2s linear,opacity 0.2s linear;
+	position:absolute;
+	z-index:1029; 
+	padding-top:66px;
+	padding-bottom:35px;
+	padding-left:30%;
+	padding-right:30%;
+	overflow-x:hidden;
+	height:100vh;
+	width:100vw;
+	background-color:rgba(255,255,255,0.9)
+}
+
+/* About */
+#about{
+	visibility:hidden;
+	opacity:0;
+    transition:visibility 0.2s linear,opacity 0.2s linear;
+	position:absolute;
+	z-index:1029; 
+	padding-top:66px;
+	padding-bottom:35px;
+	padding-left:30%;
+	padding-right:30%;
+	overflow-x:hidden;
+	height:100vh;
+	width:100vw;
+	background-color:rgba(255,255,255,0.9)
+}
+
+#backToMap{
+	visibility:hidden;
+	opacity:0;
+    transition:visibility 0.2s linear,opacity 0.2s linear;
+	position:fixed;
+	z-index:1035; 
+	padding-left:10%;
+	padding-right:10%;
+	overflow-x:hidden;
+	width:100vw;
+	bottom:0px;
+	background-color:rgba(255,255,255,1);
+	border-top: 1px solid #ddd;
+}
+
+#backToMap a{
+	color:#070707
+}
+
+#backToMap p{
+	margin-bottom:5px;
+	padding-top:3px;
+}
+
+#backToMap a:hover{
+	color:black
+}
+
+.leaflet-popup-content-wrapper{
+	font-family: 'PT Mono', monospace;
+	border-radius: 1px;
+	/* font-family: 'Special Elite', cursive !important */
+}
+
+.leaflet-popup-content{
+	/* min-width:280px; */
+    margin-left: 10px;
+    margin-right: 21px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.leaflet-popup-content hr{
+    width: 267px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.leaflet-control-scale-line:not(:first-child) {
+    border-top: none;
+    border-bottom: 1px solid;
+    margin-top: 0px;
+}
+
+.leaflet-control-scale-line {
+    FONT-WEIGHT: 100;
+	font-family: 'PT Mono', monospace;
+    border: 1px solid #fff;
+    border-right: none;
+    border-top: none;
+    border-left: none;
+    line-height: 1.1;
+    padding: 2px 5px 1px;
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    color: white;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /* background: #fff; */
+    background: rgba(255, 255, 255, 0);
+}
+
+.leaflet-bar a:last-child {
+     border-bottom-left-radius: 1px !important; 
+     border-bottom-right-radius: 1px !important;
+}
+
+.leaflet-bar a:first-child {
+    border-top-left-radius: 1px !important;
+    border-top-right-radius: 1px !important;
+}
+
+/* pulsating marker */
+
+.pulse-icon-anim {
+    margin-top:2px;
+	margin-left:2px;
+    border: 3px solid;
+     -webkit-border-radius: 30px;
+     height: 18px;
+     width: 18px;       
+    -webkit-animation: pulsate 1s ease-out;
+    -webkit-animation-iteration-count: infinite; 
+    /*opacity: 0.0*/
+}
+
+@-webkit-keyframes pulsate {
+        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+        50% {opacity: 1.0;}
+        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}
+
+a#navbarDropdownLang.nav-link.dropdown-toggle::after{
+	margin-left:0px !important
+}
+
+.nav-item{
+	margin-right:10px
+}
+
+.dropdown-menu{
+	font-size:0.9em !important;
+	padding: 0px !important
+}
+
+.ql-editor {
+	min-height:170px !important;
+	width: 100% !important	
+}
+
+.ql-editor p {
+	font-size:1.25em !important;
+	
+}
+
+.ql-editor .ql-size-small {
+    font-size: 0.9em !important;
+}
+
+@media screen and (max-width: 600px) {
+	.modal-body {
+		font-size:0.9rem
+	}
+	.modal-body .form-control{
+		font-size:0.8rem
+	}
+	.leaflet-popup-content {
+		margin: 10px 10px;
+		line-height: 1.4;
+	}
+	#anthologyItems{
+		font-size:0.8rem
+	}
+	#about{
+		padding-left:5% !important;
+		padding-right:5% !important;
+	}
+	#anthology{
+		padding-left:5% !important;
+		padding-right:5% !important;
+	}
+}
+
+
+
+

src/config.js

@@ -1,4 +1,4 @@
-var config = {
-	mapboxKey: 'pk.eyJ1IjoibGVvLWlnYSIsImEiOiJjazY2bGV3MTYxMjV3M25sMmdtNWluM2wzIn0.2THSqD6nz9OhE0Xsjnbw1g',
-	owmKey: "39d5c3be709ba4f5b6230cdffdedd2ac",
+var config = {
+	mapboxKey: 'pk.eyJ1IjoiYXZpb25wb2VtZSIsImEiOiJja20yY28xaWQyNnRiMnBvNm1kdjF4M3A5In0.gbs_ozL4rwh7KNsLmph-yQ',
+	owmKey: "39d5c3be709ba4f5b6230cdffdedd2ac",
 }

src/formValidation.js

@@ -0,0 +1,25 @@
+var validExpeMail = false
+var validExpeLoc = false  //turned to true in geocoder.js
+var validDestMail = false
+var validDestLoc = false  //turned to true in geocoder.js
+
+function validateEmail(email) {  //from https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+}
+
+$("#expeMail").change(function() {
+	validExpeMail = validateEmail($("#expeMail").val())
+	checkFormValid()
+})
+
+$("#destMail").change(function() {
+	validDestMail = validateEmail($("#destMail").val())
+	checkFormValid()
+})
+
+function checkFormValid(){
+	if(validExpeMail && validExpeLoc && validDestMail && validDestLoc){
+		$('#sendNewPlane').prop("disabled", false)
+	}
+}

src/geocoder.js

@@ -1,67 +1,129 @@
-let langGeocoder = "fr"
-
-// Expediteur
-var expeLocList = []
-var expeLoc;
-$('#expeGeocoderPhoton').typeahead({
-    source: function (query, process) {
-		expeLocList = []
-		var url = "https://photon.komoot.io/api?q="+query+"&lang="+langGeocoder+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality";
-		var res = []
-		return $.getJSON(url,function(data){
-			for (var i in data.features){
-				res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
-				expeLocList.push({
-					name: data.features[i].properties.name,
-					center: data.features[i].geometry.coordinates,
-					fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
-				})
-			}
-			return process(res)
-		})
-    },
-	matcher: function(item){ //needed when spelling not exact
-     return true
-	},
-
-    afterSelect: function (obj) {
-      for (var i in expeLocList){
-		  if (expeLocList[i].fullname == obj){
-			expeLoc = expeLocList[i]
-		  }
-	  }
-    }
-})
-
-//Destinataire
-var destLocList = []
-var destLoc;
-$('#destGeocoderPhoton').typeahead({
-    source: function (query, process) {
-		destLocList = []
-		var url = "https://photon.komoot.io/api?q="+query+"&lang="+langGeocoder+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality";
-		var res = []
-		return $.getJSON(url,function(data){
-			for (var i in data.features){
-				res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
-				destLocList.push({
-					name: data.features[i].properties.name,
-					center: data.features[i].geometry.coordinates,
-					fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
-				})
-			}
-			return process(res)
-		})
-    },
-	matcher: function(item){ //needed when spelling not exact
-     return true
-	},
-
-    afterSelect: function (obj) {
-      for (var i in destLocList){
-		  if (destLocList[i].fullname == obj){
-			destLoc = destLocList[i]
-		  }
-	  }
-    }
+function langGeocoder(lang){
+	if (lang == 'fr' || lang == 'en' || lang == 'de' || lang == 'it'){  //photon only supports fr en de it, the rest will be en by default
+		return lang
+	}
+	else return "en"
+}
+
+// Expediteur
+var expeLocList = []
+var expeLoc;
+$('#expeGeocoderPhoton').typeahead({
+    source: function (query, process) {
+		var timer;
+		clearTimeout(timer);
+		timer = setTimeout(function() {  // using a timer of 400 ms to troubleshot people typing super fast
+			expeLocList = []
+			var l = langGeocoder(lang)
+			var url = "https://photon.komoot.io/api?q="+query+"&lang="+l+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality&osm_tag=place:suburb&osm_tag=place:neighbourhood&osm_tag=place:hamlet&osm_tag=highway";
+			//var url = "https://photon.komoot.io/api?q="+query+"&lang="+l+"&limit=4";
+			var res = []
+			return $.getJSON(url,function(data){
+				for (var i in data.features){
+					if(data.features[i].properties.type == "street"){
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")")
+						expeLocList.push({
+							name: data.features[i].properties.city,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")"
+						})
+					}
+					else if(data.features[i].properties.osm_value == "suburb" || data.features[i].properties.osm_value == "neighbourhood"){
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")")
+						expeLocList.push({
+							name: data.features[i].properties.city,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")"
+						})
+					}
+					else{
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
+						expeLocList.push({
+							name: data.features[i].properties.name,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
+						})
+					}
+					
+				}
+				return process(res)
+			})
+			},
+			400  
+		)
+    },
+	matcher: function(item){ //needed when spelling not exact
+     return true
+	},
+
+    afterSelect: function (obj) {
+      for (var i in expeLocList){
+		  if (expeLocList[i].fullname == obj){
+			expeLoc = expeLocList[i]
+			validExpeLoc = true
+			checkFormValid()
+		  }
+	  }
+    }
+})
+
+//Destinataire
+var destLocList = []
+var destLoc;
+$('#destGeocoderPhoton').typeahead({
+    source: function (query, process) {
+		var timer;
+		clearTimeout(timer);
+		timer = setTimeout(function() {  // using a timer of 400 ms to troubleshot people typing super fast
+			destLocList = []
+			var l = langGeocoder(lang)
+			var url = "https://photon.komoot.io/api?q="+query+"&lang="+l+"&limit=4&osm_tag=place:city&osm_tag=place:town&osm_tag=place:village&osm_tag=place:municipality&osm_tag=place:suburb&osm_tag=place:neighbourhood&osm_tag=place:hamlet&osm_tag=highway";
+			var res = []
+			return $.getJSON(url,function(data){
+				for (var i in data.features){
+					if(data.features[i].properties.type == "street"){
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")")
+						destLocList.push({
+							name: data.features[i].properties.city,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")"
+						})
+					}
+					else if(data.features[i].properties.osm_value == "suburb" || data.features[i].properties.osm_value == "neighbourhood"){
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")")
+						destLocList.push({
+							name: data.features[i].properties.city,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.city+", "+data.features[i].properties.country+")"
+						})
+					}
+					else{
+						res.push(data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")")
+						destLocList.push({
+							name: data.features[i].properties.name,
+							center: data.features[i].geometry.coordinates,
+							fullname: data.features[i].properties.name+" ("+data.features[i].properties.state+", "+data.features[i].properties.country+")"
+						})
+					}
+					
+				}
+				return process(res)
+			})
+		},
+			400  
+		)
+    },
+	matcher: function(item){ //needed when spelling not exact
+     return true
+	},
+
+    afterSelect: function (obj) {
+      for (var i in destLocList){
+		  if (destLocList[i].fullname == obj){
+			destLoc = destLocList[i]
+			validDestLoc = true
+			checkFormValid()			
+		  }
+	  }
+    }
 })

src/img/licence.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="350.69684mm"
+   height="81.957626mm"
+   viewBox="0 0 350.69684 81.957626"
+   version="1.1"
+   id="svg841"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="licence.svg">
+  <defs
+     id="defs835" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="662.59146"
+     inkscape:cy="222.28966"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata838">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(196.8553,-125.68985)">
+    <path
+       style="fill:#000000;stroke-width:0.26458332"
+       d=""
+       id="path1397"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.85096157;stroke-width:0.26458332"
+       d="m -163.81489,207.46334 c -0.29104,-0.12831 -0.96862,-0.24166 -1.50573,-0.25188 -0.53712,-0.0102 -1.05016,-0.13766 -1.1401,-0.28318 -0.0899,-0.14553 -0.50007,-0.26459 -0.91141,-0.26459 -0.41134,0 -1.08892,-0.17786 -1.50574,-0.39524 -0.41682,-0.21739 -0.96621,-0.39598 -1.22087,-0.39688 -0.25466,-8.9e-4 -0.46302,-0.12069 -0.46302,-0.26621 0,-0.14552 -0.22848,-0.26458 -0.50773,-0.26458 -0.57484,0 -1.55541,-0.45874 -4.91623,-2.29996 -0.87312,-0.47834 -1.79586,-0.94432 -2.05052,-1.03552 -0.25466,-0.0912 -0.46302,-0.271 -0.46302,-0.39955 0,-0.12855 -0.17859,-0.23372 -0.39688,-0.23372 -0.21828,0 -0.39687,-0.0999 -0.39687,-0.22212 0,-0.12216 -0.26789,-0.34447 -0.59531,-0.49402 -0.89219,-0.4075 -2.12054,-1.49132 -5.34743,-4.71821 -3.22689,-3.22688 -4.3107,-4.45524 -4.71821,-5.34742 -0.14955,-0.32743 -0.37186,-0.59532 -0.49402,-0.59532 -0.12216,0 -0.22211,-0.17859 -0.22211,-0.39687 0,-0.21828 -0.10518,-0.39688 -0.23373,-0.39688 -0.12855,0 -0.30526,-0.20836 -0.3927,-0.46302 -0.0874,-0.25466 -0.4597,-0.93927 -0.82723,-1.52135 -0.61955,-0.98121 -1.13558,-2.02101 -2.16656,-4.36563 -0.22396,-0.50932 -0.49792,-1.10854 -0.60881,-1.3316 -0.11088,-0.22306 -0.28544,-0.78724 -0.38789,-1.25374 -0.10247,-0.46649 -0.2962,-0.91609 -0.43052,-0.99911 -0.13433,-0.083 -0.24423,-0.55361 -0.24423,-1.04576 0,-0.49214 -0.10327,-0.95863 -0.22949,-1.03664 -0.49444,-0.30558 -0.66405,-2.98043 -0.66405,-10.47273 0,-7.4923 0.16961,-10.16715 0.66405,-10.47273 0.12622,-0.078 0.22949,-0.53695 0.22949,-1.01986 0,-0.48292 0.17859,-1.02625 0.39687,-1.20741 0.21829,-0.18116 0.39688,-0.61407 0.39688,-0.96203 0,-0.34796 0.10586,-0.83939 0.23525,-1.09208 0.12939,-0.25269 0.41394,-0.87615 0.63234,-1.38547 1.49389,-3.48387 4.15562,-8.04357 5.32856,-9.12813 0.15738,-0.14552 0.64202,-0.74083 1.07698,-1.32291 1.02016,-1.36524 4.7231,-5.06817 6.08833,-6.08833 0.58208,-0.43496 1.35477,-1.05873 1.71709,-1.38615 0.36231,-0.32742 0.8088,-0.59532 0.99218,-0.59532 0.18339,0 0.33344,-0.092 0.33344,-0.20441 0,-0.11243 0.44648,-0.43871 0.99218,-0.72507 0.54571,-0.28636 1.05172,-0.5903 1.12448,-0.67541 0.60038,-0.70231 7.73199,-3.68677 8.80983,-3.68677 0.25178,0 0.66451,-0.10919 0.9172,-0.24265 1.25373,-0.66215 4.40528,-0.85658 11.83651,-0.73025 7.55993,0.12853 9.92188,0.29714 9.92188,0.70831 0,0.11496 0.44648,0.26498 0.99219,0.3334 0.5457,0.0684 1.4089,0.27732 1.91822,0.46423 0.50933,0.18691 1.16417,0.4257 1.45521,0.53063 0.60123,0.21677 3.27562,1.42923 4.56407,2.06916 0.47294,0.2349 0.85989,0.51907 0.85989,0.6315 0,0.11243 0.20958,0.20442 0.46573,0.20442 0.25614,0 0.78673,0.29765 1.17907,0.66146 0.39235,0.3638 0.78442,0.66145 0.87128,0.66145 0.44762,0 4.26055,3.1154 6.3571,5.19415 2.39246,2.37214 6.47265,7.68818 6.47265,8.43316 0,0.21759 0.1168,0.39561 0.25955,0.39561 0.14274,0 0.33424,0.29766 0.42556,0.66146 0.0913,0.3638 0.27216,0.66146 0.40191,0.66146 0.12974,0 0.2359,0.2311 0.2359,0.51355 0,0.28245 0.11906,0.58714 0.26458,0.67707 0.14552,0.0899 0.26459,0.38004 0.26459,0.64468 0,0.26463 0.17859,0.62937 0.39687,0.81053 0.21828,0.18116 0.39688,0.60543 0.39688,0.94282 0,0.3374 0.11906,0.68704 0.26458,0.77697 0.14552,0.0899 0.26837,0.42439 0.273,0.74322 0.005,0.31884 0.18322,0.81082 0.39687,1.09329 0.21366,0.28247 0.38846,0.90052 0.38846,1.37345 0,0.47292 0.10327,0.92368 0.22949,1.00168 0.49759,0.30753 0.66431,3.00226 0.66431,10.73732 0,7.73506 -0.16672,10.42979 -0.66431,10.73732 -0.12622,0.078 -0.22949,0.52876 -0.22949,1.00168 0,0.47293 -0.1748,1.09098 -0.38846,1.37345 -0.21365,0.28248 -0.39224,0.7831 -0.39687,1.11249 -0.005,0.3294 -0.11688,0.80565 -0.24945,1.05834 -0.13257,0.25269 -0.56327,1.1738 -0.95711,2.04693 -0.67818,1.50348 -1.18185,2.52218 -1.82508,3.69132 -0.50696,0.92146 -3.63334,5.23204 -4.4837,6.18202 -1.49669,1.67204 -3.18586,3.25576 -4.66391,4.37276 -0.80036,0.60485 -1.57427,1.22559 -1.71979,1.37941 -0.5102,0.53931 -2.21647,1.7047 -2.49589,1.7047 -0.15523,0 -0.28224,0.0986 -0.28224,0.21911 0,0.29287 -6.89495,3.74964 -7.47913,3.74964 -0.2521,0 -0.45837,0.11906 -0.45837,0.26458 0,0.14552 -0.32742,0.26837 -0.7276,0.273 -0.40018,0.005 -0.95872,0.18322 -1.24119,0.39687 -0.28248,0.21365 -0.90053,0.38846 -1.37345,0.38846 -0.47292,0 -0.92567,0.10649 -1.00611,0.23664 -0.0804,0.13015 -0.65301,0.32142 -1.27238,0.42505 -1.70759,0.2857 -16.13173,0.4046 -16.73656,0.13796 z m 12.96459,-8.20798 c 0.0899,-0.14552 0.66251,-0.2688 1.27238,-0.27396 0.60988,-0.005 1.40652,-0.17953 1.77032,-0.3875 0.36381,-0.20797 0.93097,-0.38234 1.26037,-0.3875 0.59962,-0.009 0.7572,-0.0679 2.3991,-0.89065 0.48473,-0.2429 1.10981,-0.44164 1.38906,-0.44164 0.27925,0 0.50772,-0.11906 0.50772,-0.26458 0,-0.14552 0.22355,-0.26459 0.49678,-0.26459 0.27322,0 0.64498,-0.17859 0.82614,-0.39687 0.18116,-0.21828 0.55292,-0.39688 0.82615,-0.39688 0.27322,0 0.49677,-0.092 0.49677,-0.20441 0,-0.11243 0.44648,-0.43957 0.99219,-0.72697 0.5457,-0.2874 1.13688,-0.6419 1.31373,-0.78777 0.17685,-0.14587 0.49925,-0.41405 0.71644,-0.59595 0.21719,-0.1819 0.50905,-0.33073 0.64859,-0.33073 0.13953,0 0.29Line truncated
+       id="path1412"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

src/map.js

@@ -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';
+        }
+    });
+})()

src/newPlane.js

@@ -1,111 +1,207 @@
-// init text editor in modal
-var quill = new Quill('#messageTextArea', {
-  modules: {
-    toolbar: [
-      [{ 'size': ['small', false, 'large'] }],
-	  [{ 'font': [] }],
-      ['bold', 'italic', 'underline','strike'],
-      [{ 'color': [] }],
-    ]
-  },
-  placeholder: '',
-  theme: 'snow'  // or 'bubble',
-});
-
-$("#sendNewPlane").on('click',function(){
-    
-	//hiding navbar
-	$('.navbar-collapse').collapse('hide');
-	//hiding modal
-	$("#newPlaneModal").modal('hide')
-
-	var line = turf.lineString([expeLoc.center,destLoc.center]) //create line between start and end
-	var length = turf.length(line) //get length in Km
-	var speed = 30 //speed in km/h
-	var time = length/speed //time to delivery in hours
-	
-	
-	//get the local time with TZ for starting point
-	$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+expeLoc.center[0]+','+expeLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(startTime){
-		var expeTimezone = startTime.features[0].properties.TZID;
-		var sentDate = moment.tz(new Date(), expeTimezone);
-		sentDate = [sentDate.format(),expeTimezone]
-		
-		//get the local time with TZ for end point
-		$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+destLoc.center[0]+','+destLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(endTime){
-			var destTimezone = endTime.features[0].properties.TZID;
-			var endDate = moment.tz(new Date(), destTimezone);
-			var deliveryDate = endDate.add(time, 'hours') // adding hours 
-			deliveryDate = [endDate.format(),destTimezone]
-			
-			//storing the endDate in GMT+0 in seconds for the query
-			var deliverySecondsServer = moment.tz(new Date(), "Europe/London").add(time, 'hours').unix()
-			
-			var publicMessage = $("#publicMessage").prop("checked")
-			var message = $("#messageTextArea").val()
-			
-			var data = {
-				'message':message,
-				'public':publicMessage,
-				'expeMail':$("#expeMail").val(),
-				'destMail':$("#destMail").val(),
-				'expeName':expeLoc.name,
-				'destName':destLoc.name,
-				'expeCoordo':expeLoc.center,
-				'destCoordo':destLoc.center,
-				'sentDate': sentDate,
-				'deliveryDate':deliveryDate,
-				'deliverySecondsServer':deliverySecondsServer,
-			}
-			//sending confirm mail
-			
-			//sending notif mail
-			
-			//scheduling mail
-			
-			//adding the plane
-			var planes = db.collection('planes')
-			if (!publicMessage){ //removing message from DB if not public
-				data.message = ''
-			}
-			planes.add({
-				public: data.public,
-				message:data.message,
-				destName: data.destName,
-				destCoordo: data.destCoordo,
-				startName: data.expeName,
-				startCoordo: data.expeCoordo,
-				sentDate: data.sentDate,
-				deliveryDate: data.deliveryDate,
-				deliverySecondsServer: data.deliverySecondsServer
-			});
-			
-		// creating image for plane, need to link it to the inputs tog et entered values.
-		var canvas = document.getElementById("blankCanvas");
-		var ctx = canvas.getContext("2d");
-		ctx.fillStyle = "rgb(255,255,255)";
-		ctx.fillRect(0,0,400,400);
-		ctx.fillStyle = "rgb(0,0,0)";
-		ctx.font = "9px Courier";
-		ctx.fillText("Message: .- / -- --- -. / ... . -. ... --..-- /",10,60);
-		ctx.fillText("Expediteur: leo.martine@yahoo.fr - Annemasse",10,300);
-		ctx.fillText("Destinataire: leo.martine@yahoo.fr - Lyon",10,320);
-		$("#front").attr('src',document.getElementById("blankCanvas").toDataURL())
-	
-			
-		//display and animate plane
-		$("#canvas3d").css('display','block')
-		animePlane()
-		//moving plane at the end
-		setInterval(function(){
-			$("#canvas3d").css('transition','transform 2500ms ease-in-out')
-			$("#canvas3d").css('transform','translate(50vw, -150vh)')
-		},4400);
-		//reloading page (to change)
-		setInterval(function(){
-			window.location.href = "http://127.0.0.1:8887/?plane=1FTMbm9V9eindbwoJ9uW";
-		},5500);
-
-		})
-	});
+// init text editor in modal
+var quill = new Quill('#messageTextArea', {
+  modules: {
+    toolbar: [
+      [{ 'size': ['small', false, 'large'] }],
+	  [{ 'font': [] }],
+      ['bold', 'italic', 'underline','strike'],
+      [{ 'color': [] }],
+    ]
+  },
+  placeholder: '',
+  theme: 'snow'  // or 'bubble',
+});
+
+// get random number between interval
+function randomIntFromInterval(min, max) { // min and max included 
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+// get random color
+function getRandomColor() { 
+	var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','FF6600','ECECEC']
+	var color = colors[Math.floor(Math.random() * colors.length)];
+	return color
+}
+
+//init tooltips in form
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+
+//closing navbar antholoy about on open
+$('#newPlaneModal').on('shown.bs.modal', function (e) {
+    $('.navbar-collapse').collapse('hide');
+    $('#anthology').css('opacity','0')
+	$('#anthology').css('visibility','hidden')
+	$('#backToMap').css('opacity','0')
+	$('#backToMap').css('visibility','hidden')
+	$('#about').css('visibility','hidden');
+	$('#about').css('opacity','0')
+	anthologyOpen = 0
+	aboutOpen = 0
+})
+
+$("#sendNewPlane").on('click',function(){
+ 
+	
+	//hiding modal
+	$("#newPlaneModal").modal('hide')
+
+	var deliveryMethod = $("#selectTime").val()
+	
+	var time; //time to delivery in hours
+	
+	
+	if(deliveryMethod == '3days'){
+		time = 24*3.14  
+	}
+	else if(deliveryMethod == '7days'){
+		time = 24*7
+	}
+	else if(deliveryMethod == '30days'){
+		time = 24*30
+	}
+	else if(deliveryMethod == '365days'){
+		time = 24*365
+	}
+	else if(deliveryMethod == 'random'){
+		var speed = randomIntFromInterval(5.05, 25.82)
+		
+		var line = turf.lineString([expeLoc.center,destLoc.center]) //create line between start and end
+	    var length = turf.length(line) //get length in Km
+		var additionalTime = length/speed;
+		time = 37.68 + additionalTime  //minimum 37.68 hours + additional time based on random speed
+		
+	}
+	
+	
+	//get the local time with TZ for starting point   
+	$.getJSON('https://secure.geonames.org/timezoneJSON?lat='+expeLoc.center[1]+'&lng='+expeLoc.center[0]+'&username=avionpoeme',function(startTime){
+		var expeTimezone = startTime.timezoneId;
+		
+		var sentDate = moment.tz(new Date(), expeTimezone).unix();
+		
+		
+		
+		//get the local time with TZ for end point
+		$.getJSON('https://secure.geonames.org/timezoneJSON?lat='+destLoc.center[1]+'&lng='+destLoc.center[0]+'&username=avionpoeme',function(endTime){
+			var destTimezone = endTime.timezoneId;
+			
+			var endDate = moment.tz(new Date(), destTimezone)
+			var deliveryDate = endDate.add(time, 'hours').unix(); // adding hours 
+			
+			
+			//storing the endDate in GMT+0 in seconds for the query
+			var deliverySecondsServer = moment.tz(new Date(), "Europe/Berlin").add(time, 'hours').unix()
+			
+			var publicMessage = $("#public").prop("checked")
+			
+			var expeKnown = $("#expeKnown").prop("checked")
+			if(expeKnown == true){
+				expeKnown = false
+			}
+			else{
+				expeKnown = true
+			}
+			
+			var message = quill.root.innerHTML
+			
+			var randomColor = getRandomColor()
+			
+			console.log(message)
+			
+			var data = {
+				'message':encodeURIComponent(message),
+				'expeMail':$("#expeMail").val(),
+				'expeKnown':expeKnown,
+				'expeLang':lang,
+				'destLang':$("#selectDestLang").val(),
+				'startLat':expeLoc.center[1],
+				'startLon':expeLoc.center[0],
+				'startName':expeLoc.name,
+				'startTime':sentDate,
+				'startTZ':expeTimezone,
+				'destMail':$("#destMail").val(),
+				'destLat':destLoc.center[1],
+				'destLon':destLoc.center[0],
+				'destName':destLoc.name,
+				'public':publicMessage,  
+				'color':randomColor,
+				'deliveryTime':deliveryDate,
+				'deliveryTZ':destTimezone,
+				'deliveryTimeServer':deliverySecondsServer,
+				'deliveryMethod':$("#selectTime").val()
+			}
+			
+			
+			var query = 'avionpoeme.php?'+
+						'message='+data.message+'&'+
+						'expeMail='+data.expeMail+'&'+
+						'expeKnown='+data.expeKnown+'&'+
+						'expeLang='+data.expeLang+'&'+
+						'destLang='+data.destLang+'&'+
+						'startLat='+data.startLat+'&'+
+						'startLon='+data.startLon+'&'+
+						'startName='+data.startName+'&'+
+						'startTime='+data.startTime+'&'+
+						'startTZ='+data.startTZ+'&'+
+						'destMail='+data.destMail+'&'+
+						'destLat='+data.destLat+'&'+
+						'destLon='+data.destLon+'&'+
+						'destName='+data.destName+'&'+
+						'public='+data.public+'&'+
+						'color='+data.color+'&'+
+						'deliveryTime='+data.deliveryTime+'&'+
+						'deliveryTZ='+data.deliveryTZ+'&'+
+						'deliveryTimeServer='+data.deliveryTimeServer+'&'+
+						'deliveryMethod='+data.deliveryMethod+'';
+
+			$.post(query, function(result) {
+				result = result.replace(/'/g, '"');
+				console.log(result)
+				result = $.parseJSON(result)
+				var planeId = Number(result.uid);
+				//selecting proper color for back
+				$("#back").attr("src","src/img/back-"+data.color+".jpg");
+				
+				// creating image for plane, need to link it to the inputs tog et entered values.
+				var message = quill.root.innerHTML
+				
+				var canvas1 = document.getElementById("blankCanvas1"),
+				html = quill.root.innerHTML;
+				
+				rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
+					
+					var canvas2 = document.getElementById("blankCanvas2");
+					var ctx = canvas2.getContext("2d");
+					ctx.fillStyle = "#"+data.color;
+					ctx.fillRect(0,0,400,400);
+					ctx.drawImage(canvas1, 0, 0,400,400)
+					ctx.fillStyle = "rgb(0,0,0)";
+					ctx.font = "9px Courier";
+					$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
+					//display and animate plane
+					$("#canvas3d").css('display','block')
+					animePlane()
+					
+					
+					//moving plane at the end
+					setInterval(function(){
+						$("#canvas3d").css('transition','transform 2500ms ease-in-out')
+						$("#canvas3d").css('transform','translate(50vw, -150vh)')
+					},4400);
+					//reloading page (to change)
+					setInterval(function(){
+						window.location.href ='https://avion-poe.me?avion='+planeId+'';
+					},5500);
+				})
+			})
+			
+			
+		
+		
+
+		})
+	});
 })

src/translation.js

@@ -0,0 +1,164 @@
+var lang = 'en'
+var userLang = navigator.userLanguage || navigator.language;
+if (userLang){
+	lang = userLang.substring(0,2)
+}
+
+//loading the lang.json file
+$(document).ready(function(){
+	    translateUI(lang)
+	 	$.getJSON("lang/lang.json", function(data){
+		//creating dropdown list of languages in navbar
+		for (var key in data){
+			$("#langChoices").append( '<a class="dropdown-item langSelect" value="'+key+'" href="#">'+data[key]+'</a>' )
+			$("#selectDestLang").append( '<option value="'+key+'" href="#">'+data[key]+'</option>' )
+		}
+		//setting the user lang
+		if(data[lang]){
+			//$("#navbarDropdownLang").html(data[lang])
+			translateUI(lang)
+		}
+		//or english if not in list
+		else{
+			//$("#navbarDropdownLang").html("English")
+			translateUI('en')
+		}
+        $(".langSelect").on('click',function(e){
+			lang = e.currentTarget.attributes[1].value
+			translateUI(lang)
+			//$("#navbarDropdownLang").html($(this).html())
+		})
+	}).fail(function(error){
+		console.log(error);
+	});
+});
+
+var dictionnary = []
+
+function translateUI(l){
+	$.getJSON("lang/"+l+"", function(s){
+		//console.log(s)
+		dictionnary = s
+		//if arabic : display left to right (ltr) + troubleshooting a lot of individual elements
+		if (lang == "ar"){
+			//navbar
+			$("nav").css('direction','rtl')
+			$(".nav-menus").removeClass('mr-auto')
+			$(".nav-button").addClass('mr-auto')
+			//form
+			// $(".ql-container").css('direction','rtl')
+			// $(".ql-container").css('float','right')
+			// $(".ql-editor").css('float','right')
+			// $(".ql-editor p").css('float','right')
+			$(".modal-content").css('direction','rtl')
+			$(".bold").css('float','right')
+			$("#public").css('margin-left','5px')
+			$("#prive").css('margin-left','5px')
+			$("#newPlaneModalAnonyme").css('margin-right','25px')
+			$("#newPlaneModalCancel").css('margin-left','8px')	
+			$("#closeModal").css('margin-left','0px')	
+			$("#closeModal").css('padding-left','0px')	
+			//anthology
+			$("#anthology").css('direction','rtl')
+			$("#anthologyDisclaimer").css('float','right')
+			
+		}  
+		else{
+			//navbar
+			$("nav").css('direction','ltr')
+			$(".nav-menus").addClass('mr-auto')
+			$(".nav-button").removeClass('mr-auto')
+			//form
+			// $(".ql-container").css('direction','ltr')
+			// $(".ql-container").css('float','left')
+			// $(".ql-editor").css('float','left')
+			// $(".ql-editor p").css('float','none')
+			$(".modal-content").css('direction','ltr')
+			$(".bold").css('float','left')
+			$("#public").css('margin-left','0px')
+			$("#prive").css('margin-left','0px')
+			$("#newPlaneModalAnonyme").css('margin-right','0px')
+			$("#newPlaneModalCancel").css('margin-left','0px')
+			//anthology
+			$("#anthology").css('direction','ltr')
+			$("#anthologyDisclaimer").css('float','left')
+		}
+		
+	//changing all strings
+		//main page
+			$('head title', window.parent.document).text(s.avionpoeme);
+			$("#navTitle").html(s.avionpoeme)
+			$("#buttonAnthology").html(s.anthologie)
+			$("#buttonAbout").html(s.apropos)
+			$("#buttonNewPlane").val(s.lancer_avion+" "+nbPlane+"/100")
+		//new plane form
+			$("#newPlaneModalTitle").html(s.lancer_avion)
+			$("#newPlaneModalMessage").html(s.message)
+			$("#newPlaneModalPrive").html(s.prive)
+			$("#newPlaneModalPublic").html(s.public)
+			$("#flightTime").html(s.temps_de_vol)
+			$("#newPlaneModalRandom").html(s.aléatoire)
+			$("#newPlaneModal3j").html(s.trois_jours)
+			$("#newPlaneModal7j").html(s.sept_jours)
+			$("#newPlaneModal30j").html(s.trente_jours)
+			$("#newPlaneModal365j").html(s.unan_jours)
+			$("#newPlaneModalExpediteur").html(s.expediteur)
+			$("#newPlaneModalDestinataire").html(s.destinataire)
+			$("#newPlaneModalAnonyme").html(s.anonyme)
+			$("#newPlaneModalCancel").html(s.annuler)
+			$("#sendNewPlane").html(s.lancer)
+			$("#destLang").html(s.langue_destinataire)
+			$("#expeMail").attr("placeholder", s.expeMail_placeholder)
+			$("#expeGeocoderPhoton").attr("placeholder", s.expeLoc_placeholder)
+			$("#destMail").attr("placeholder", s.destMail_placeholder)
+			$("#destGeocoderPhoton").attr("placeholder", s.destLoc_placeholder)
+			$('#anonymeTooltip').attr("title", s.anonyme_tooltip).tooltip("_fixTitle");
+			$('#publicTooltip').attr("title", s.public_tooltip).tooltip("_fixTitle");
+			
+			$('#selectDestLang option[value="'+lang+'"]').prop('selected', true); //selecting by default recipient language same as interface
+		//Anthology
+			displayAnthology()
+			$("#anthologyTitle").html(s.anthologie)
+			$("#anthologyDisclaimer").html(s.suppr_message_public)
+			$("#closeAnthologyAbout").html(s.retour_carte)
+			
+		//About
+		    $("#aboutTitle").html(s.apropos)
+			$("#librairies").html(s.librairies)
+			$("#mapSources").html(s.source_carte)
+			$("#mapBackground").html(s.map_background)
+			$("#clouds").html(s.clouds)
+			$.getJSON("lang/about.json", function(e){
+				if(lang !== 'en' && lang !== 'fr' && lang !== 'de'){
+					$("#aboutText").html(e[0].en)
+				}
+				else{
+					$("#aboutText").html(e[0][lang])
+				}
+			})
+			
+		//plane limit tooltip
+		if (nbPlane > 99){
+			$("#planeLimitTooltip").attr("title", s.AvionPoeme_epuise).tooltip("_fixTitle");
+		}
+		else{
+			var remainingPlanes = 100 - nbPlane;
+			s.NB_AvionPoeme_restant = s.NB_AvionPoeme_restant.replace('$NB_avion_poeme',remainingPlanes)
+			$("#planeLimitTooltip").attr("title", s.NB_AvionPoeme_restant).tooltip("_fixTitle");
+		}		
+		
+	})
+	 .always(function(callback) {
+		//console.log( callback );
+	 });
+}
+
+//hovering lang icon
+$( "#navbarDropdownLang" ).mouseenter(function() {
+  $("#langIcon").attr("src","src/img/lang-hover.png");
+});
+$( "#navbarDropdownLang" ).mouseleave(function() {
+  $("#langIcon").attr("src","src/img/lang.png");
+});
+
+