Différences entre les versions de « Atlas 380/iPad/notreavion.net »

9 087 octets ajoutés ,  29 mars 2015 à 16:17
 
(43 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
Ci-dessous le code source à venir de l'appli décrite au § [[Atlas 380/iPad #notreavion.net]] :
Ci-dessous le code source l'appli décrite au § [[Atlas 380/iPad #notreavion.net]] :


Il tient en quelques pages html, php et css.
Il tient en quelques pages html, php et css.
La partie cartographie utilise l'API Open Source de [http://developer.mapquest.com MapQuest].
Pour utiliser cette API il faudra obtenir une clé associée au site utilisateur.






==Structure racine==
==Structure racine==
=== Page d'initialisation ===
 
Voici les fichiers situées à la racine du site.
 
=== form.html : page d'initialisation ===
 
C'est la page d'entrée du site, elle affiche une case de texte pour coller le bloc de coordonnées de l'OFP.<br>
C'est la page d'entrée du site, elle affiche une case de texte pour coller le bloc de coordonnées de l'OFP.<br>
Donne accès aux résultats de la conversion avec deux options.<br>
Donne accès aux résultats de la conversion avec deux options.<br>
Ligne 76 : Ligne 84 :
</syntaxhighlight>
</syntaxhighlight>


=== Option de récupérations KML ===
=== output.php : options de récupérations KML ===
Cette page s'affiche après le lancement de la conversion.<br>
Cette page s'affiche après le lancement de la conversion.<br>
La route est affichée sur une carte, les boutons donnent accès aux différentes options de récupérations du fichier KML créé.
La route est affichée sur une carte, les boutons donnent accès aux différentes options de récupérations du fichier KML créé.
Ligne 84 : Ligne 92 :
<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<!--Page d'affichage de la carte animée avec les icones des terrains-->
<html lang="fr">
<html>
 
<!--Feuille de calcul du fichier KML et d'affichage des options d'envoi-->
 
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Carte interactive</title>
<title>Résultat FAR-KML</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="style.css">
       
</head>


        <!--Appel de l'API MapQuest - Le paramètre key est propriétaire du site-->
<body>
<script src="http://open.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=Fmjtd%7Cluurnu0125%2Cbs%3Do5-9w8lgw"></script>
<!--Routine d'affichage Plein Ecran : facultatif-->
<script src="http://www.notreavion.net/convert/screenfull.js"></script>
<!--Appel API Google pour les polices de caratères des listes déroulantes-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<!--Feuilles de style des listes déroulantes-->
<link rel="stylesheet" type="text/css" href="SelectInspiration/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="SelectInspiration/css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="SelectInspiration/css/cs-skin-underline.css" />
<!--définition des styles des informations Pop-up des épinglettes-->
<style type="text/css">
            .mqabasicwnd-corner div, .mqabasicwnd-close, .mqabasicwnd-close:hover, .mqabasicwnd-pointer-bottom, .mqabasicwnd-pointer-top, .mqabasicwnd-pointer-left, .mqabasicwnd-pointer-middleLeft, .mqabasicwnd-pointer-middleRight, .mqabasicwnd-pointer-topLeft, .mqabasicwnd-pointer-topRight, .mqabasicwnd-pointer-bottomLeft, .mqabasicwnd-pointer-bottomRight, .mqabasicwnd-btop div, .mqabasicwnd-bbottom div, .mqabasicwnd-bleft div, .mqabasicwnd-bright div {
                background-image: url('http://www.notreavion.net/convert/images/myinfow.png') !important;
            }
     
.mqabasicwnd {
font-size : 10px !important;
                width: 200px !important;
}


            .mqabasicwnd-close {
                top: 0px !important;
                right: -18px !important;
                width: 18px !important;
                height: 20px !important;
            }
          .mqa_htmlpoi {
font-size :8px;
        </style>


<?php
<!--Création de la carte--->
 
<script type="text/javascript">


var myfile="/convert/"+ getURLParameter('file');
 
if (!$route= $_POST["name"]) // récupère la route
{ // la route est vide!!!
//Message si route vide
echo "<p class='error'>ERREUR : Vous n'avez rien collé !!!!!!!</p>";
echo "<hr>";
echo '<br><br><button type ="button" class="btn" onclick="window.history.back();">Retour</button>&nbsp;&nbsp;&nbsp;';
echo '<button type ="button" class="btn" style= "padding: 10px 15px 10px 15px;" onclick="location.href=\'help.html\'">?</button>';
exit;
}


function getURLParameter(name) {                        <!--Le nom du fichier est dans l'URL demandeuse, fonction de recherche de ce nom de fichier
$mytype=$_POST['typeroute'];
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}


$route;


$fc="(\b[N|S].{6}[W|E].{7}\b)"; //format des coordonnées mot entier uniquement
MQA.EventUtil.observe(window, 'load', function() {
$rempl = "latitudlongitud";
$routebis=preg_replace($fc,$rempl,$route); //remplace les coordonnées par texte pour analyse et recherche


<!--Taille de la carte en fonction de la taille d'affichage du navigateur-->
$posdeb=strpos($routebis,$rempl);     //position premières coordonnées
var intFrameWidth = window.innerWidth;
var newwidth = Math.max(window.innerWidth - 280,700);
var newheight= Math.max(window.innerHeight - 80,440) ;
document.getElementById('map').setAttribute("style","float:left;width:"+newwidth+"px"+";height :"+newheight+"px;");
<!--Affiche le sablier
document.getElementById('info').innerHTML= "<h4><br><br>Un peu de patience<br><br><br>&nbsp;&nbsp;&nbsp;<img src='../convert/images/ajax-loader.gif'></h4>";




var options = {
elt: document.getElementById('map'),      <!--ID of map element on page-->
zoom: 2,                                  <!-- initial zoom level of the map-->
latLng: { lat: 49, lng: 2.5 }    <!--center of map in latitude/longitude-->
};


<!--construct an instance of MQA.TileMap with the options object-->
if (stripos($_SERVER['HTTP_USER_AGENT'],"iPad")){    // si appel depuis IPAD, il faut enlever un caractère supplémentaire?????
window.map = new MQA.TileMap(options);
$offset =6;
}
else {
$offset=5;
}


<!--Download the modules.-->
<!--The MQA.KMLDeserializer can also create InfoWindows if the data is supplied.-->
MQA.withModule('dotcomwindowmanager', 'remotecollection', 'kmldeserializer','mousewheel','largezoom','viewoptions','htmlpoi', function() {


$route=substr($route,$posdeb-$offset);
map.addControl( <!--Ajout Zoom, choix du type de carte, navigation-->
new MQA.LargeZoom(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
);
map.addControl(new MQA.ViewOptions());
map.enableMouseWheelZoom();


<!-- create a remote collection-->
route = new MQA.RemoteCollection(myfile, new MQA.KMLDeserializer());
$posfin=strripos($routebis,$rempl);
//position des dernières coordonnées
PPV = new MQA.RemoteCollection('http://localhost/convert/fichiers_airports/PPV.kml', new MQA.KMLDeserializer());
$route=substr($route,0,$posfin+15-$posdeb+$offset); //suppression de ce qui est derrière les dernières coordonnées
A318 = new MQA.RemoteCollection('/convert/fichiers_airports/A318.kml', new MQA.KMLDeserializer());
A319 = new MQA.RemoteCollection('/convert/fichiers_airports/A319.kml', new MQA.KMLDeserializer());
A320 = new MQA.RemoteCollection('/convert/fichiers_airports/A320.kml', new MQA.KMLDeserializer());
A321 = new MQA.RemoteCollection('/convert/fichiers_airports/A321.kml', new MQA.KMLDeserializer());
A330 = new MQA.RemoteCollection('/convert/fichiers_airports/A330.kml', new MQA.KMLDeserializer());
A340 = new MQA.RemoteCollection('/convert/fichiers_airports/A340.kml', new MQA.KMLDeserializer());
A380 = new MQA.RemoteCollection('/convert/fichiers_airports/A380.kml', new MQA.KMLDeserializer());
B744 = new MQA.RemoteCollection('/convert/fichiers_airports/B744.kml', new MQA.KMLDeserializer());
B74F = new MQA.RemoteCollection('/convert/fichiers_airports/B74F.kml', new MQA.KMLDeserializer());
B772 = new MQA.RemoteCollection('/convert/fichiers_airports/B772.kml', new MQA.KMLDeserializer());
B773 = new MQA.RemoteCollection('/convert/fichiers_airports/B773.kml', new MQA.KMLDeserializer());
B77F = new MQA.RemoteCollection('/convert/fichiers_airports/B77F.kml', new MQA.KMLDeserializer());
<!-- automatically zoom and center the map using the bestFit method after the collection has loaded-->
MQA.EventManager.addListener(route, 'loaded', function() {
  map.bestFit();
  for (i=2;i<route.getSize();i++) {  <!--Boucle les points pour ne jamais afficher info uniquement le titre (nom du point).-->


var poi = route.getAt(i);
var str = "<b>" + poi.infoTitleHTML + "</b>";
poi.addExtraField('texte',str);
poi.setInfoTitleHTML("");                <!--Vide le contenu des infos des points-->
poi.setInfoContentHTML(str);


MQA.EventManager.addListener(poi, 'mouseover', function(){              <!--Affiche info au survol du point-->
this.toggleInfoWindowRollover();
});


MQA.EventManager.addListener(poi, 'click', function(){                  <!--Affiche info au clic-->
if (strstr($route,"-"))
this.toggleInfoWindowRollover();
{
});
$rdeg= stristr($route,"---");       // crée le dégagement s'il existe
}
$rdeg=preg_replace("[-]","",$rdeg);
nomEpingle=null;                  <!--Reset des variables d'affichage, en cas de rafraichissement de la page.-->
$pos=stripos($route,"-"); 
nomEtiquette=null;
$rmain=substr($route,0,$pos);  
nomInfo=null;
}
document.getElementById('info').innerHTML= "";    <!--Efface le "sablier"-->
else
{
  });
$rdeg=""; // pas de dégagement
<!-- add the shape collection to the map-->
$rmain=$route;
map.addShapeCollection(route);
}
});
});
$rmain= filter_var($rmain, FILTER_SANITIZE_ENCODED);
$rmain=preg_replace("[%(20|0A|0D)]"," ",$rmain);
$rmain=explode(" ",$rmain); //met tous les éléments dans un tableau
$rmain= array_values(array_filter($rmain,"testvide"));  //supprime les élements vides et reindexe le tableau
 
 
if (count($rmain)<4)
{
        //Message si route trop courte, pas assez de points
echo "<p class='error'>ERREUR : Il faut au moins deux point pour définir une route<br>Vérifiez votre insertion ! ! ! ! !</p>";
echo "<hr>";
echo '<br><br><button type ="button" class="btn" onclick="window.history.back();">Retour</button>&nbsp;&nbsp;&nbsp;';
echo '<button type ="button" class="btn" style= "padding: 10px 15px 10px 15px;" onclick="location.href=\'help.html\'">?</button>';
exit;
}




$rdeg= filter_var($rdeg, FILTER_SANITIZE_ENCODED);
$rdeg=preg_replace("[%(20|0A|0D)]"," ",$rdeg);
$rdeg=explode(" ",$rdeg);
$rdeg= array_values(array_filter($rdeg,"testvide"));


<!--Fonction de chargement de carte des icônes-->
function AddEvent(val) { 


<!--Les valeurs des trois listes déroulantes-->
$rmain= CreateArrayRoute ($rmain);
nomEpingle = document.getElementById('Epingle').options[document.getElementById('Epingle').selectedIndex].value;
$rdeg= CreateArrayRoute ($rdeg);
nomEtiquette = document.getElementById('Etiquette').options[document.getElementById('Etiquette').selectedIndex].value;
nomInfo = document.getElementById('InMap').options[document.getElementById('InMap').selectedIndex].value;


myCollec=eval(nomEpingle);
// Création du nom du fichier
AffichEping(nomEpingle,nomEtiquette,nomInfo,myCollec);


MQA.EventManager.addListener(myCollec, 'loaded', function(){
$dep=$rmain[0]['waypoint'];            //Point de départ
for (i=1;i<myCollec.getSize();i++) {  <!--Boucle les points pour créer les infos supplémentaires pour les étiquettes et les infos.-->
$arr=end($rmain)['waypoint']; //Point d'arrivée
var poi = myCollec.getAt(i);  
$deg=end($rdeg)['waypoint']; //Point de dégagement
var str = "<b><u>" + poi.infoTitleHTML.substring(5)+ "</u></b><br><br>" + poi.infoContentHTML;
$timestp = date("dMY_His");
poi.addExtraField('texte',str);
if ($deg){
poi.addExtraField('code',poi.infoTitleHTML.substring(0,4));
$mykml = $dep."-".$arr."_(".$deg.")_".$timestp.".kml"; //Nom du fichier KML
poi.addExtraField('nom',poi.infoTitleHTML.substring(5));
}
poi.setInfoTitleHTML("");
else {
}
$mykml = $dep."-".$arr."_".$timestp.".kml";
AffichEtiq (myCollec,nomEtiquette);
AffichInfo(myCollec, nomInfo);
});
}
}
$mykml = trim($mykml); //Suppression des caractères bizarres


generatekml ($rmain,$rdeg,$mykml,$mytype);        //Création du point KML
// Création de l'image
$rmain=InvertLat ($rmain);
$rdeg=InvertLat ($rdeg);


<!--Traitement de l'affichage des épingles-->
function AffichEping (nomcollec,etiqonmap,infoonmap,collec){
$deppoint=$rmain[0]['latitude'].",".$rmain[0]['longitude'];            //Point de départ
$arrmain=end($rmain)['latitude'].",".end($rmain)['longitude'];          //Arrivée
$arrdeg=end($rdeg)['latitude'].",".end($rdeg)['longitude']; //Dégagement


switch(nomcollec) {
$mainstring= CreateString($rmain); //Création string route principale et dégagement
$degstring= CreateString($rdeg);


case ("") :        <!--Pas de choix-->
$upperleftlat=max(array_column($rmain,'latitude'));                //point gauche et point droit de la carte statique
break;
$upperleftlong=min(array_column($rmain,'longitude'));
$upperleft=$upperleftlat.",".$upperleftlong;
$lowerrightlat= min(array_column($rmain,'latitude'));
$lowerrightlong=max(array_column($rmain,'longitude'));
$lowerright=$lowerrightlat.",".$lowerrightlong;


case ("PPV") :      <!--Les affichages -->
case ("A320"):
case ("A330"):
case ("A380"):
case ("B747"):
case ("B772"):
case ("B773"):


//Map MapQuest
//A noter que le paramètre key est propriétaire du site et doit être demandé à MapQuest pour utilisation sur un autre site
// Création de l'image MapQuest
$mapurl= "http://open.mapquestapi.com/staticmap/v4/getmap?key=Fmjtd%7Cluurnu0125%2Cbs%3Do5-9w8lgw&size=1000,1000&margin=10&imagetype=png&pois=red_1,".$deppoint."|purple_1,".$arrdeg."|red_1,".$arrmain."&polyline=color:0xFF0000|width:3|".$mainstring."&polyline=color:0xCCCC00|width:3|".$degstring."";


if (typeof collec !== "undefined") {  <!--Des épingles sont bien affichées, on les efface-->
// Création de l'image MapQuest en plein écran
  collec.setVisible(false);
$imgurl="http://open.mapquestapi.com/staticmap/v4/getmap?key=Fmjtd%7Cluurnu0125%2Cbs%3Do5-9w8lgw&size=300,200&margin=15&scalebar=false&imagetype=png&pois=red_1,".$deppoint."|purple_1,".$arrdeg."|red_1,".$arrmain."&polyline=color:0xFF0000|width:2|".$mainstring."&polyline=color:0xCCCC00|width:2|".$degstring."";
}
//Affichage du résultat
echo  "<p>Votre fichier ".$mykml." est disponible</p>";
echo "<a href=$mapurl target='_blank'><img src='$imgurl'></a>";
echo "<hr>";
 
echo "<br>";
$filename="carteanim.html?file=../convert/KML_outputs/".$mykml;


if (collec.loaded){                      <!--Les épingles ont déjà été traitées, on ne refait que l'affichage-->
echo '<button type ="button" class="btn"  onclick="window.open(\''.$mapurl.'\')"> &nbsp;Carte&nbsp;  statique&nbsp; </button>';
collec.setVisible(true);
echo "<br>";
AffichEtiq (collec,nomEtiquette);  
echo "<br>";
AffichInfo(collec, nomInfo);


}
  echo '<button type ="button" class="btn"  onclick="window.open(\''.$filename.'\')">Carte interactive</button>';
else {
echo "<br>";
map.addShapeCollection(collec);   <!--Affiche les épingles demandées-->
echo "<br>";
collec.setVisible(true);
echo  '<button type ="button" class="btn" onclick="location.href=\'../convert/KML_outputs/'.$mykml.'\'">Téléchargement</button>';  //Faire test avec fichiers dans dossier.
echo "<br>";
echo "<br>";
echo "<form action='envoi_mail.php' method='post'>
<input type='text' name ='email' placeholder='Votre adresse mail' class= 'style_input'>
<br> <br><input type ='submit' value='Envoyer  le  mail'>
<input type='hidden' name='fichier'  value='../convert/KML_outputs/".$mykml."'> </form>";
echo '<br><br><button type ="button" class="btn" onclick="window.history.back();">Retour</button>&nbsp;&nbsp;&nbsp;';
echo '<button type ="button" class="btn" style= "padding: 10px 15px 10px 15px;" align="right" onclick="location.href=\'help.html\'">?</button>';


}
echo "<br>";
break;


case "NOICON" :            <!--Effacer les épingles-->
if (typeof collec == "undefined") {  <!--Pas d'épingles affichées, donc rien à effacer-->
  break;
}
collec.setVisible(false);
document.getElementById('info').innerHTML= "";
break;
}
}


//========= Les fonctions utilisées =========


<!----------------------------------------------------------------------->
<!--Routine d'affichage des étiquettes-->
//Fonction de test, pour voir si un élément d'un tableau est vide
function testvide($var)
{
strlen($var)==0;
return($var);
}


function AffichEtiq (iconsaff,etiqtype){


switch(etiqtype){
case ("") :
//Fonction de création du fichier .KML
break;
function generatekml($inputm,$inputd,$filename,$type){      
// $inputm est la route principale, $inputd est la route dégagement,$type est le type de route


case ("OACI") :
case ("NAME") :
case ("BOTH") :


if (typeof EtiqCollec !== "undefined") {  <!--Des étiquettes sont bien affichées, on les efface-->
$output="<?xml version='1.0' encoding='UTF-8'?>
  EtiqCollec.setVisible(false);
<kml xmlns='http://www.opengis.net/kml/2.2' xmlns:gx='http://www.google.com/kml/ext/2.2' xmlns:kml='http://www.opengis.net/kml/2.2' xmlns:atom='http://www.w3.org/2005/Atom'>
  map.removeShapeCollection(EtiqCollec)
<Document>
}
<name>";
$output.=substr($filename,0,9)."</name>
<Style id='no_icone'>
<IconStyle>
<Icon>
<href>http://www.notreavion.net/convert/images/no_icon.png</href>
</Icon>
<hotSpot x='0.5' y='0.0' xunits='fraction' yunits='fraction' />
</IconStyle>
</Style>


EtiqCollec=new MQA.ShapeCollection(); <!-- Création des étiquettes-->
<Style id='placemark-purple'>
for (i=1;i<iconsaff.getSize();i++) {
if (etiqtype=="OACI"){title=iconsaff.getAt(i).getExtraField('code');}
<IconStyle>
else if (etiqtype=="NAME") {title=iconsaff.getAt(i).getExtraField('nom');}
<Icon>
else {title=iconsaff.getAt(i).getExtraField('code') + " " +iconsaff.getAt(i).getExtraField('nom');}
<href>http://www.notreavion.net/convert/images/icone_route.png</href>
latt=iconsaff.getAt(i).latLng.lat;
</Icon>
lonn=iconsaff.getAt(i).latLng.lng;
var newpoi= new MQA.HtmlPoi({lat: latt, lng: lonn});
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
newpoi.setHtml(title, -15, 10, 'mqa_htmlpoi');
</IconStyle>
EtiqCollec.add(newpoi);
</Style>
}
<Style id='placemark-pink'>
map.addShapeCollection(EtiqCollec);
<IconStyle>
break;
<Icon>
 
<href>http://www.notreavion.net/convert/images/icone_deg.png</href >
case "NONAME" :
</Icon>
if (typeof EtiqCollec == "undefined") { <!--Il n'y a pas d'étiquettes affichées, sort-->
break;
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
}
</IconStyle>
EtiqCollec.setVisible(false);
</Style>
map.removeShapeCollection(EtiqCollec); <!--Efface les étiquettes-->
<Style id='rmain'>
break;
<LineStyle>
}
<color>FFDA25A8</color>
}
<width>3</width>
</LineStyle>
<PolyStyle>
<color>FFDA25A8</color>
</PolyStyle>
</Style>
<Style id='rdeg'>
<LineStyle>
<color>FFFF00FF</color>
<width>3</width>
</LineStyle>
<PolyStyle>
<color>FFFF00FF</color>
</PolyStyle>
</Style>
<Folder>
<name>Lignes</name>
<open>1</open>
<Placemark>
<name>Rmain</name>
<styleUrl>#rmain</styleUrl>";
$output.="
<LineString>
<tessellate>1</tessellate>
<coordinates>";
foreach($inputm as $point){
$coordinates=$point['coordinates'];
$output.="$coordinates ";}
$output.="</coordinates>
</LineString>
</Placemark>";
$output.="<Placemark>
<name>Rdeg</name>
<styleUrl>#rdeg</styleUrl>";
$output.="
<LineString>
<tessellate>1</tessellate>
<coordinates>";
foreach($inputd as $point){
$coordinates=$point['coordinates'];
$output.="$coordinates ";}
$output.="</coordinates>
</LineString>
</Placemark>
</Folder><Folder>";


if($type=="routewaypoint"){
foreach($inputm as $point){
$name=$point['waypoint'];
$coordinates=$point['coordinates'];


<!----------------------------------------------------------------------->
$output.="
<!--Routine d'affichage des infos terrain  (INMAP à l'ouverture)-->
<Placemark>";


function AffichInfo(icons, infotype){   
$output.="<name>$name</name>";


if (infotype=="INMAP"){               
$output.="
for (i=1;i<icons.getSize();i++) {  <!-- Boucle les points pour créer les évènements clic et survol-->
<styleUrl>#placemark-purple</styleUrl>
var poi = icons.getAt(i);
";
MQA.EventManager.removeListener(poi, 'mouseover', affichout);
MQA.EventManager.removeListener(poi, 'click', affichout);
MQA.EventManager.addListener(poi, 'mouseover',affichin);
MQA.EventManager.addListener(poi, 'click',affichin);
}
}


else if(infotype=="OUTMAP") {
$output.="<description>$name</description>
for (i=1;i<icons.getSize();i++) {  <!-- Boucle les points pour créer les évènements clic et survol-->
<Point>     
var poi = icons.getAt(i);
<coordinates>$coordinates</coordinates>
MQA.EventManager.removeListener(poi, 'mouseover', affichin);
</Point>
MQA.EventManager.removeListener(poi, 'click', affichin);
</Placemark>
MQA.EventManager.addListener(poi, 'mouseover',affichout);
";
MQA.EventManager.addListener(poi, 'click',affichout);
}
}
}
}
foreach($inputd as $point){
$name=$point['waypoint'];
$coordinates=$point['coordinates'];
$output.="<Placemark>";


$output.="<name>$name</name>";


affichout = function(){                  <!--Affiche info au clic hors carte-->
this.setInfoContentHTML("");
document.getElementById('info').innerHTML= this.getExtraField('texte');
}
affichin =function(){
if (navigator.userAgent.match(/iPad/i)){
document.getElementById('info').innerHTML= ""; <!--Affiche info au clic sur la carte-->


this.setInfoTitleHTML(this.getExtraField('texte'));
$output.="
this.setInfoContentHTML(this.getExtraField('texte'));
<styleUrl>#placemark-pink</styleUrl>
";


}
$output.="<description>$name</description>
else{
<Point>     
document.getElementById('info').innerHTML= "";
<coordinates>$coordinates</coordinates>
this.setInfoTitleHTML(""); <!--S'affiche au clic-->
</Point>
this.setInfoContentHTML(this.getExtraField('texte'));  <!--S'affiche rollover-->
</Placemark>
";
}
}
}
}
$output.="</Folder></Document>
</kml>
";


//Ecriture du fichier KML dans le dossier KML_outputs sur le serveur
$myfile = fopen("../convert/KML_outputs/".$filename,"w") or die("Unable to open file!");
fwrite($myfile, $output);
fclose($myfile);


  </script>
/*
    </head>
  //Création du fichier kmz - non utilisé
$mykmz = substr($filename,0,strlen($filename)-3)."kmz";


    <body >
$zip = new ZipArchive();
<!--Affichage sur la page-->


<table id='table'>
if ($zip->open($mykmz, ZIPARCHIVE::CREATE)!==TRUE) {
<tr>
exit("cannot open <$file>\n");
<td><h4>Options d'affichage &nbsp;&nbsp;&nbsp;&nbsp;</h4></td>
}
<td>
$zip->addFromString("doc.kml",$output );
$zip->addEmptyDir ( "files" );
$zip->addFile ('icone_route.png','files/icone_route.png');
$zip->addFile ('icone_route.png','files/icone_deg.png');
$zip->close();
*/
//print $output;
}


//Fonction de création du tableau à deux colonnes waypoints-coordonnées décimales


function CreateArrayRoute ($route){         
<select id="Epingle"  class="cs-select cs-skin-underline" >
<option value=""  selected disabled >Epingles</option>
<option value="PPV" >MANEX C</option>
<option value="A320">A318</option>
<option value="A320">A319</option>
<option value="A320">A320</option>
<option value="A320">A321</option>
<option value="A330">A330</option>
<option value="A320">A340</option>
<option value="A380">A380</option>
<option value="B747">B744</option>
<option value="A320">B74F</option>
<option value="B772">B772</option>
<option value="B773">B773</option>
<option value="A320">B77F</option>
<option value="NOICON">Aucune</option>
</select>
</td>
<td>
<select id="Etiquette" class="cs-select cs-skin-underline" >
<option value="NONAME" selected disabled>Etiquettes</option>
<option value="OACI">Code OACI</option>
<option value="NAME">Nom</option>
<option value="BOTH">Les deux</option>
<option value="NONAME">Aucune</option>
</select>


</td>
$arrlength=count($route);
<td>
<select id="InMap" class="cs-select cs-skin-underline" >
<option value="INMAP" selected>Infos sur la carte</option>
<option value="OUTMAP">Hors de la carte</option>
</select>
</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<td>
$newroute=array(); //Nouveau tableau à deux colonnes Nom et Coordonnées
<button type ="button" class="btn" id="myfsbutton">Carte plein écran</button>
</td>
</tr>
</table>


  <div id='map'></div>
for($x=0;$x<$arrlength;$x++)
  <div id='info' style='padding-left: 10px; min-width:100px; min-height: 100px; overflow:hidden; '></div>
{
 
<br>
if (strlen($route[$x])<15)                //il s'agit d'un nom de point, on crée les deux lignes du tableau
{
$waypoint=$route[$x];
$lat = substr($route[$x+1],0,7);
$long = substr($route[$x+1],7,8);
$latitude = ConvertDMSToDD ($lat);
$longitude = ConvertDMSToDD($long);
$coordinates=$longitude.",".$latitude;
}
elseif (strlen($route[$x-1])<15)        //si le précédent est un point, on ne traite pas ces coordonées, elle correspondent au point précédent
{
continue;
}
else //il s'agit de coordonnées seules, donc on crée aussi le nom du point "LATLONG"
{
$lat = substr($route[$x],0,7);
$long = substr($route[$x],7,8);
$waypoint = substr($lat,0,3).substr($long,0,4);
$latitude = ConvertDMSToDD ($lat);
$longitude = ConvertDMSToDD($long);
$coordinates=$longitude.",".$latitude;
}
$point = array('waypoint'=>$waypoint,'coordinates'=>$coordinates); //Création de la ligne du tableau
$newroute[]=$point; // Insertion dans le tableau
}
return $newroute;
}


// Fonction de conversion des longitudes et latitudes


<script>
function ConvertDMSToDD($input) {
<!-- Goes to fullscreen !!!!-->


var elem = document.getElementById('map');
  $hemi = substr($input,0,1);
document.getElementById('myfsbutton').addEventListener('click', function () {
  if (strlen($input)==7)
    if (screenfull.enabled) {
  {
        screenfull.request(elem);
        $deg = intval(substr($input,1,2));
    }
$min = intval(substr($input,3,2));
  $decim =intval(substr($input,6,1));
  }
else  
else  
{
{
alert('Oups, votre navigateur ne permet pas le passage en plein écran');
$deg = intval(substr($input,1,3));
$min = intval(substr($input,4,2));
  $decim =intval(substr($input,7,1));
  }
    $result = $deg + $min/60 + $decim/600;
switch ($hemi)                //inversion du signe pour W et S
{
case ("W") :
$result = $result*-1;
break;
case ("S") :
$result = $result*-1;
break;
case ("N") :
break;
case ("E") :
break;
}
return ($result);
}
function InvertLat ($route){          //Inversion longitude,latitude et création tableau
$arrlength=count($route);
$newroute=array();
for($x=0;$x<$arrlength;$x++)
{
$coordx=$route [$x]['coordinates']; //Récupère les coordonnées
$longx=substr($coordx,0,stripos($coordx,",")); 
$latx=substr($coordx,stripos($coordx,",")+1);
$latx=strtr($latx,",",".");
$longx=strtr($longx,",",".");
$point = array('latitude'=>$latx,'longitude'=>$longx); //Création de la ligne du tableau
$newroute[]=$point;
}
return $newroute; // Insertion dans le tableau
}
}
});
function CreateString($route){
</script>


<!--Script d'affichage des listes déroulantes-->
$arrlength=count($route);
$linestring="";
<script src="SelectInspiration/js/classie.js"></script>
for($x=0;$x<$arrlength;$x++)
<script src="SelectInspiration/js/selectFx.js"></script>
{
$linestring.=$route[$x]['latitude'].",".$route[$x]['longitude'].",";
}
return $linestring;
}


<script>
//========= Fin des fonctions utilisées =========
(function() {
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx(el, {
                onChange: function(val) {
                  AddEvent(val);
                }
              });
} );
})();
</script>
             
             
<script>
 


</script>
?>


  </body>
</body>
</html>
</html>  
           


</syntaxhighlight>
</syntaxhighlight>


=== Envoi du fichier par mail ===
=== envoi_mail.php : envoi du fichier par mail ===


Page qui s'affiche lorsque l'envoi par mail du fichier KML a été demandé.<br>
Page qui s'affiche lorsque l'envoi par mail du fichier KML a été demandé.<br>
Ligne 668 : Ligne 709 :
</syntaxhighlight>
</syntaxhighlight>


=== Affichage de la carte animée===
=== carteanim.html : affichage de la carte animée===
Affiche une carte animée avec la route créée.<br>
Affiche une carte animée avec la route créée.<br>
Les trois listes déroulantes permettent de sélectionner les informations à afficher.
Les trois listes déroulantes permettent de sélectionner les informations à afficher.
Ligne 1 103 : Ligne 1 144 :
</syntaxhighlight>
</syntaxhighlight>


=== help.html : l'aide===


=== L'aide===
Cette page fournit une aide sur l'utilisation du site.<br>
Toutes les images sont stockées dans le sous-dossier /images.


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
Ligne 1 174 : Ligne 1 217 :
</syntaxhighlight>
</syntaxhighlight>


=== Feuille de style générale ===
=== style.css : feuille de style générale ===


Gère la mise en forme des boutons et des cases d'option
Gère la mise en forme des boutons et des cases d'option
Ligne 1 315 : Ligne 1 358 :
</syntaxhighlight>
</syntaxhighlight>


=== Script pour passage plein écran ===
=== screenfull.js : script pour passage plein écran ===
http://www.notreavion.net/convert/screenfull.js
Il s'agit d'un script public pour permettre l'affichage en plein écran en cliquant sur un bouton.<br>
Ne fonctionne pas sur toutes les machines.
 
<syntaxhighlight lang="css">
(function () {
'use strict';js
 
var isCommonjs = typeof module !== 'undefined' && module.exports;
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element;
 
var fn = (function () {
var val;
var valLength;
 
var fnMap = [
[
'requestFullscreen',
'exitFullscreen',
'fullscreenElement',
'fullscreenEnabled',
'fullscreenchange',
'fullscreenerror'
],
// new WebKit
[
'webkitRequestFullscreen',
'webkitExitFullscreen',
'webkitFullscreenElement',
'webkitFullscreenEnabled',
'webkitfullscreenchange',
'webkitfullscreenerror'
 
],
// old WebKit (Safari 5.1)
[
'webkitRequestFullScreen',
'webkitCancelFullScreen',
'webkitCurrentFullScreenElement',
'webkitCancelFullScreen',
'webkitfullscreenchange',
'webkitfullscreenerror'
 
],
[
'mozRequestFullScreen',
'mozCancelFullScreen',
'mozFullScreenElement',
'mozFullScreenEnabled',
'mozfullscreenchange',
'mozfullscreenerror'
],
[
'msRequestFullscreen',
'msExitFullscreen',
'msFullscreenElement',
'msFullscreenEnabled',
'MSFullscreenChange',
'MSFullscreenError'
]
];
 
var i = 0;
var l = fnMap.length;
var ret = {};
 
for (; i < l; i++) {
val = fnMap[i];
if (val && val[1] in document) {
for (i = 0, valLength = val.length; i < valLength; i++) {
ret[fnMap[0][i]] = val[i];
}
return ret;
}
}
 
return false;
})();
 
var screenfull = {
request: function (elem) {
var request = fn.requestFullscreen;
 
elem = elem || document.documentElement;
 
// Work around Safari 5.1 bug: reports support for
// keyboard in fullscreen even though it doesn't.
// Browser sniffing, since the alternative with
// setTimeout is even worse.
if (/5\.1[\.\d]* Safari/.test(navigator.userAgent)) {
elem[request]();
} else {
elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
}
},
exit: function () {
document[fn.exitFullscreen]();
},
toggle: function (elem) {
if (this.isFullscreen) {
this.exit();
} else {
this.request(elem);
}
},
onchange: function () {},
onerror: function () {},
raw: fn
};
 
if (!fn) {
if (isCommonjs) {
module.exports = false;
} else {
window.screenfull = false;
}
 
return;
}
 
Object.defineProperties(screenfull, {
isFullscreen: {
get: function () {
return !!document[fn.fullscreenElement];
}
},
element: {
enumerable: true,
get: function () {
return document[fn.fullscreenElement];
}
},
enabled: {
enumerable: true,
get: function () {
// Coerce to boolean in case of old WebKit
return !!document[fn.fullscreenEnabled];
}
}
});
 
document.addEventListener(fn.fullscreenchange, function (e) {
screenfull.onchange.call(screenfull, e);
});
 
document.addEventListener(fn.fullscreenerror, function (e) {
screenfull.onerror.call(screenfull, e);
});
 
if (isCommonjs) {
module.exports = screenfull;
} else {
window.screenfull = screenfull;
}
})();
</syntaxhighlight>
 
== Sous-dossiers : ressources ==
Il y a trois sous-dossiers pour stocker les ressources et les résultats.<br>
/images : toutes les images utilisées<br>
/fichiers_airports : les fichiers KML permettant l'affichage des aéroports sur la carte interactive<br>
/SelectInspiration : les fichiers nécessaires pour la personnalisation et le fonctionnement des liste déroulantes sur la carte interactive<br>
/KML_outputs : les fichiers KML générés.<br>
 
=== /images ===
Liens vers les images utilisées sur le site, il suffit de les afficher pour éventuellement les télécharger.
 
'''Images pour l'affichage'''
 
* Les boutons radio personnalisés [http://www.notreavion.net/convert/images/radio.png radio.jpg]<br>
* Les cases à cocher personnalisées [http://www.notreavion.net/convert/images/checkbox.png checkbox.png]<br>
* Personnalisation de l'info-bulle sur la carte [http://www.notreavion.net/convert/images/myinfow.png myinfow.png]<br>
* Icône des points de la route principale [http://www.notreavion.net/convert/images/icone_route.png icone_route.png]<br>
* Icône des points de la route de dégagement [http://www.notreavion.net/convert/images/icone_deg.png icone_deg.png]<br>
* Sablier d'attente de chargement de la carte [http://www.notreavion.net/convert/images/ajax-loader.gif ajax-loader.gif]<br>
'''
Images de la page d'aide'''
 
* [http://www.notreavion.net/convert/images/capture.jpg capture.jpg]<br>
* [http://www.notreavion.net/convert/images/form.jpg form.jpg]<br>
* [http://www.notreavion.net/convert/images/output.jpg output.jpg]<br>
* [http://www.notreavion.net/convert/images/envoi_mail.jpg envoi_mail.jpg]<br>
* [http://www.notreavion.net/convert/images/statique.jpg statique.jpg]<br>
* [http://www.notreavion.net/convert/images/interactive.jpg interactive.jpg]<br>
* [http://www.notreavion.net/convert/images/route.jpg route.jpg]<br>
* [http://www.notreavion.net/convert/images/zoom.jpg zoom.jpg]<br>
 
=== /fichiers_airports ===
Ces fichiers .KMZ sont disponibles sur le réseau Yammer interne Air France dans le groupe Maps.me.<br>
Pour l'utilisation sur le site il faut en extraire le fichier .KML en utilisant un outil de décompression standard.
 
=== /SelectInspiration ===
Ce dossier contient les éléments nécessaires à la personnalisation des listes déroulantes sur la page de la carte interactive.<br>
Les sources sont disponibles ici https://github.com/codrops/SelectInspiration  <br>
Et pour le téléchargement direct ici https://github.com/codrops/SelectInspiration/archive/master.zip
 
Après téléchargement ne conserver que les dossier js, fonts et css.
Dans le dossier css ne conserver que les fichiers normalize.css, cs-select.css et cs-skin-underline.css.
 
Ce dernier fichier a été modifié pour respecter l'aspect graphique de la page.
 
 
cs-skin-underline.css
 
<syntaxhighlight lang="css">
 
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
 
div.cs-skin-underline {
background: transparent;
font-size: 1em;
max-width: 220px;
min-width :200px;
}
 
@media screen and (max-width: 33em) {
div.cs-skin-underline { font-size: 1.2em; }
}


== Ressources ==
.cs-skin-underline > span {
Ces fichiers sont nécessaires pour certaines fonctionnalités d'affichage.
padding: 0.5em 3em 0.5em 0.5em;
border-bottom: 3px solid #FA7E12;
border-color: #FA7E12;
font-weight: bold;
color: blue;
}
 
.cs-skin-underline > span::after {
font-family: 'icomoon';
content: '\e003';
right: 0.25em;
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
 
.cs-skin-underline.cs-active > span::after {
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg);
transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg);
}
 
.cs-skin-underline .cs-options {
background: #bbc7c8;
opacity: 0;
-webkit-transition: opacity 0.3s 0.4s, visibility 0s 0.7s;
transition: opacity 0.3s 0.4s, visibility 0s 0.7s;
}
 
.cs-skin-underline.cs-active .cs-options {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
 
.cs-skin-underline ul span {
position: relative;
text-transform: uppercase;
font-size: 75%;
font-weight: 700;
letter-spacing: 1px;
padding: 1.2em 0.8em;
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
 
.cs-select ul span::after {
content: '';
opacity: 0;
}
 
.cs-select .cs-selected span::after {
font-family: 'icomoon';
content: '\e00d';
opacity: 1;
-webkit-transition: opacity 0.3s 0.7s;
transition: opacity 0.3s 0.7s;
}
 
.cs-skin-underline ul span::before {
content: '';
position: absolute;
bottom: 1px;
left: 0;
height: 1px;
width: 100%;
background-color: #FA7E12;
-webkit-transform: translate3d(200%,0,0);
transform: translate3d(200%,0,0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
 
.cs-skin-underline.cs-active ul span,
.cs-skin-underline.cs-active ul span::before {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
 
.cs-skin-underline li:nth-child(5) span,
.cs-skin-underline li:nth-child(5) span::before,
.cs-skin-underline.cs-active li:first-child span,
.cs-skin-underline.cs-active li:first-child span::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
 
.cs-skin-underline li:nth-child(4) span,
.cs-skin-underline li:nth-child(4) span::before,
.cs-skin-underline.cs-active li:nth-child(2) span,
.cs-skin-underline.cs-active li:nth-child(2) span::before {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
 
.cs-skin-underline li:nth-child(3) span,
.cs-skin-underline li:nth-child(3) span::before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
 
.cs-skin-underline li:nth-child(2) span,
.cs-skin-underline li:nth-child(2) span::before,
.cs-skin-underline.cs-active li:nth-child(4) span,
.cs-skin-underline.cs-active li:nth-child(4) span::before {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
 
.cs-skin-underline li:first-child span,
.cs-skin-underline li:first-child span::before,
.cs-skin-underline.cs-active li:nth-child(5) span,
.cs-skin-underline.cs-active li:nth-child(5) span::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
} /* more items require more delay declarations */
 
.cs-skin-underline .cs-options li span:hover,
.cs-skin-underline .cs-options li.cs-focus span,
.cs-skin-underline li.cs-selected span {
color: #566473;
background: transparent;
}
 
</syntaxhighlight>


A venir
=== /KML_outputs  ===


=== Fichiers Terrains ===
Dossier destiné à recueillir les fichiers .KML générés lors l'utilisation du site.<br>
=== Images ===
Il faut le purger de temps en temps.<br>
=== Java  ===
Si l'utilisation devenait intensive, il serait sans doute utile de créer une routine d'effacement périodique.<br>
110

modifications