dieudo.fr

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

Atlas 380/iPad/notreavion.net (voir la source)

Version du 29 mars 2015 à 16:17

14 759 octets ajoutés ,  29 mars 2015 à 16:17
→‎form.html : page d'initialisation
 
(80 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 ===
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.
Donne accès aux résultats de la transformation avec deux options.
Donne accès à la carte interactive sans affichage de route ainsi qu'à l'aide


[[:File:form.jpg]]
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>
Donne accès aux résultats de la conversion avec deux options.<br>
Donne accès à la carte interactive sans affichage de route ainsi qu'à l'aide.
 
[[Fichier:form.jpg|border]]


<syntaxhighlight lang="html4strict">
<syntaxhighlight lang="html4strict">
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>
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éé.
 
[[Fichier:output.jpg|border]]


<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
Ligne 291 : Ligne 303 :
<IconStyle>
<IconStyle>
<Icon>
<Icon>
<href>http://maps.me/placemarks/placemark-purple.png</href>
<href>http://www.notreavion.net/convert/images/icone_route.png</href>
</Icon>
</Icon>
<hotSpot x='0.5' y='0.0' xunits='fraction' yunits='fraction' />
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
</IconStyle>
</IconStyle>
</Style>
</Style>
Ligne 300 : Ligne 312 :
<IconStyle>
<IconStyle>
<Icon>
<Icon>
<href>http://maps.me/placemarks/placemark-pink.png</href >
<href>http://www.notreavion.net/convert/images/icone_deg.png</href >
</Icon>
</Icon>
<hotSpot x='0.5' y='0.0' xunits='fraction' yunits='fraction' />
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
</IconStyle>
</IconStyle>
</Style>
</Style>
Ligne 540 : Ligne 552 :
</html>  
</html>  


</syntaxhighlight>


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


Page qui s'affiche lorsque l'envoi par mail du fichier KML a été demandé.<br>
Contient la routine PHP de création et d'envoi du mail.
[[Fichier:envoi_mail.jpg|border]]


</syntaxhighlight>


=== Envoi du fichier par mail ===
<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
<!DOCTYPE HTML>
<!DOCTYPE HTML>
Ligne 693 : Ligne 709 :
</syntaxhighlight>
</syntaxhighlight>


=== Affichage de la carte animée===
=== carteanim.html : affichage de la carte animée===
<syntaxhighlight lang="html4strict">
Affiche une carte animée avec la route créée.<br>
Les trois listes déroulantes permettent de sélectionner les informations à afficher.
 
[[File:interactive.jpg|border]]
 
<syntaxhighlight lang="html5">
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<!--Page d'affichage de la carte animée avec les icones des terrains-->
<!--Page d'affichage de la carte animée avec les icones des terrains-->
Ligne 749 : Ligne 770 :


<!--Création de la carte>--->
<!--Création de la carte--->
<script type="text/javascript">
<script type="text/javascript">
Ligne 755 : Ligne 776 :
var myfile="/convert/"+ getURLParameter('file');
var myfile="/convert/"+ getURLParameter('file');


function getURLParameter(name) {                         //Le nom du fichier est dans l'URL d'appel, fonction de recherche de ce nom de fichier
function getURLParameter(name) {                         <!--Le nom du fichier est dans l'URL d'appel, fonction de recherche de ce nom de fichier-->
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
}
Ligne 763 : Ligne 784 :
MQA.EventUtil.observe(window, 'load', function() {
MQA.EventUtil.observe(window, 'load', function() {


//Taille de la carte en fonction de la taille d'affichage du navigateur
<!--Taille de la carte en fonction de la taille d'affichage du navigateur-->
var intFrameWidth = window.innerWidth;
var intFrameWidth = window.innerWidth;
var newwidth = Math.max(window.innerWidth - 280,700);
var newwidth = Math.max(window.innerWidth - 280,700);
var newheight= Math.max(window.innerHeight - 80,440) ;
var newheight= Math.max(window.innerHeight - 80,440) ;
document.getElementById('map').setAttribute("style","float:left;width:"+newwidth+"px"+";height :"+newheight+"px;");
document.getElementById('map').setAttribute("style","float:left;width:"+newwidth+"px"+";height :"+newheight+"px;");
//Affiche le sablier
<!--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>";
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 = {
var options = {
elt: document.getElementById('map'),      // ID of map element on page
elt: document.getElementById('map'),      <!--ID of map element on page-->
zoom: 2,                                  // initial zoom level of the map
zoom: 2,                                  <!-- initial zoom level of the map-->
latLng: { lat: 49, lng: 2.5 }       // center of map in latitude/longitude
latLng: { lat: 49, lng: 2.5 }     <!--center of map in latitude/longitude-->
};
};


// construct an instance of MQA.TileMap with the options object
<!--construct an instance of MQA.TileMap with the options object-->
window.map = new MQA.TileMap(options);
window.map = new MQA.TileMap(options);


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


map.addControl( //Ajout Zoom, choix du type de carte, navigation
map.addControl( <!--Ajout Zoom, choix du type de carte, navigation-->
new MQA.LargeZoom(),
new MQA.LargeZoom(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
Ligne 793 : Ligne 814 :
map.enableMouseWheelZoom();
map.enableMouseWheelZoom();


// create a remote collection
<!-- create a remote collection-->
route = new MQA.RemoteCollection(myfile, new MQA.KMLDeserializer());
route = new MQA.RemoteCollection(myfile, new MQA.KMLDeserializer());
Ligne 812 : Ligne 833 :
// automatically zoom and center the map using the bestFit method after the collection has loaded
<!-- automatically zoom and center the map using the bestFit method after the collection has loaded-->
MQA.EventManager.addListener(route, 'loaded', function() {
MQA.EventManager.addListener(route, 'loaded', function() {
  map.bestFit();
  map.bestFit();
  for (i=2;i<route.getSize();i++) {  // Boucle les points pour ne jamais afficher l'info uniquement le titre (nom du point).
  <!--Boucle les points pour ne jamais afficher info uniquement le titre càd nom du point-->
  for (i=2;i<route.getSize();i++) {   


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


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


MQA.EventManager.addListener(poi, 'click', function(){                  //Affiche l'info au clic
MQA.EventManager.addListener(poi, 'click', function(){                  <!--Affiche info au clic-->
this.toggleInfoWindowRollover();
this.toggleInfoWindowRollover();
});
});
}
}
nomEpingle=null;                  //Reset des variables d'affichage, en cas de rafraichissement de la page.
nomEpingle=null;                  <!--Reset des variables affichage, en cas de rafraichissement de la page.-->
nomEtiquette=null;
nomEtiquette=null;
nomInfo=null;
nomInfo=null;
document.getElementById('info').innerHTML= "";    //Efface le "sablier"
document.getElementById('info').innerHTML= "";    <!--Efface le "sablier"-->
 
 
  });
  });
// add the shape collection to the map
<!-- add the shape collection to the map-->
map.addShapeCollection(route);
map.addShapeCollection(route);
Ligne 847 : Ligne 869 :




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


//Les valeurs des trois listes déroulantes
<!--Les valeurs des trois listes déroulantes-->
nomEpingle = document.getElementById('Epingle').options[document.getElementById('Epingle').selectedIndex].value;
nomEpingle = document.getElementById('Epingle').options[document.getElementById('Epingle').selectedIndex].value;
nomEtiquette = document.getElementById('Etiquette').options[document.getElementById('Etiquette').selectedIndex].value;
nomEtiquette = document.getElementById('Etiquette').options[document.getElementById('Etiquette').selectedIndex].value;
Ligne 859 : Ligne 881 :


MQA.EventManager.addListener(myCollec, 'loaded', function(){
MQA.EventManager.addListener(myCollec, 'loaded', function(){
for (i=1;i<myCollec.getSize();i++) {  // Boucle les points pour créer les infos supplémentaires pour les étiquettes et les infos.
<!--Boucle les points pour créer les infos supplémentaires pour les étiquettes et les infos.-->
for (i=1;i<myCollec.getSize();i++) { 
var poi = myCollec.getAt(i);  
var poi = myCollec.getAt(i);  
var str = "<b><u>" + poi.infoTitleHTML.substring(5)+ "</u></b><br><br>" + poi.infoContentHTML;
var str = "<b><u>" + poi.infoTitleHTML.substring(5)+ "</u></b><br><br>" + poi.infoContentHTML;
Ligne 873 : Ligne 896 :




//Traitement de l'affichage des épingles
<!--Traitement de l'affichage des épingles-->
function AffichEping (nomcollec,etiqonmap,infoonmap,collec){
function AffichEping (nomcollec,etiqonmap,infoonmap,collec){


switch(nomcollec) {
switch(nomcollec) {


case ("") :        //Pas de choix
case ("") :        <!--Pas de choix-->
break;
break;


case ("PPV") :      //Les affichages  
case ("PPV") :      <!--Les affichages -->
case ("A320"):
case ("A320"):
case ("A330"):
case ("A330"):
Ligne 890 : Ligne 913 :




if (typeof collec !== "undefined") {  //Des épingles sont bien affichées, on les efface
if (typeof collec !== "undefined") {  <!--Des épingles sont bien affichées, on les efface-->
   collec.setVisible(false);
   collec.setVisible(false);
}
}


if (collec.loaded){                      //Les épingles ont déjà été traitées, on ne refait que l'affichage
if (collec.loaded){                      <!--Les épingles ont déjà été traitées, on ne refait que l'affichage-->
collec.setVisible(true);
collec.setVisible(true);
AffichEtiq (collec,nomEtiquette);  
AffichEtiq (collec,nomEtiquette);  
Ligne 901 : Ligne 924 :
}
}
else {
else {
map.addShapeCollection(collec);    //Affiche les épingles demandées
map.addShapeCollection(collec);    <!--Affiche les épingles demandées-->
collec.setVisible(true);
collec.setVisible(true);


Ligne 907 : Ligne 930 :
break;
break;


case "NOICON" :            //Effacer les épingles
case "NOICON" :            <!--Effacer les épingles-->
if (typeof collec == "undefined") {  //Pas d'épingles affichées, donc rien à effacer
if (typeof collec == "undefined") {  <!--Pas d'épingles affichées, donc rien à effacer-->
   break;
   break;
}
}
Ligne 918 : Ligne 941 :




//-------------------------------------------------------------------
<!----------------------------------------------------------------------->
//Routine d'affichage des étiquettes
<!--Routine d'affichage des étiquettes-->


function AffichEtiq (iconsaff,etiqtype){
function AffichEtiq (iconsaff,etiqtype){
Ligne 931 : Ligne 954 :
case ("BOTH") :
case ("BOTH") :


if (typeof EtiqCollec !== "undefined") { //Des étiquettes sont bien affichées, on les efface
if (typeof EtiqCollec !== "undefined") { <!--Des étiquettes sont bien affichées, on les efface-->
   EtiqCollec.setVisible(false);
   EtiqCollec.setVisible(false);
   map.removeShapeCollection(EtiqCollec);   
   map.removeShapeCollection(EtiqCollec);   
}
}


EtiqCollec=new MQA.ShapeCollection(); // Création des étiquettes
EtiqCollec=new MQA.ShapeCollection(); <!-- Création des étiquettes-->
for (i=1;i<iconsaff.getSize();i++) {
for (i=1;i<iconsaff.getSize();i++) {
if (etiqtype=="OACI"){title=iconsaff.getAt(i).getExtraField('code');}
if (etiqtype=="OACI"){title=iconsaff.getAt(i).getExtraField('code');}
Ligne 951 : Ligne 974 :
    
    
case "NONAME" :
case "NONAME" :
if (typeof EtiqCollec == "undefined") { //Il n'y a pas d'étiquettes affichées, sort
if (typeof EtiqCollec == "undefined") { <!--Aucune étiquette affichée, sort-->
break;
break;
}
}
EtiqCollec.setVisible(false);
EtiqCollec.setVisible(false);
map.removeShapeCollection(EtiqCollec); //Efface les étiquettes
map.removeShapeCollection(EtiqCollec); <!--Efface les étiquettes-->
  break;
  break;
}
}
Ligne 961 : Ligne 984 :




//-------------------------------------------------------------------
<!----------------------------------------------------------------------->
//Routine d'affichage des infos terrain  (INMAP à l'ouverture)
<!--Routine d'affichage des infos terrain  (INMAP à l'ouverture)-->


function AffichInfo(icons, infotype){   
function AffichInfo(icons, infotype){   


<!-- Boucle les points pour créer les évènements clic et survol-->
if (infotype=="INMAP"){               
if (infotype=="INMAP"){               
for (i=1;i<icons.getSize();i++) {  // Boucle les points pour créer les évènements clic et survol
for (i=1;i<icons.getSize();i++) { 
var poi = icons.getAt(i);
var poi = icons.getAt(i);
MQA.EventManager.removeListener(poi, 'mouseover', affichout);
MQA.EventManager.removeListener(poi, 'mouseover', affichout);
Ligne 977 : Ligne 1 002 :


else if(infotype=="OUTMAP") {
else if(infotype=="OUTMAP") {
for (i=1;i<icons.getSize();i++) {  // Boucle les points pour créer les évènements clic et survol
for (i=1;i<icons.getSize();i++) { 
var poi = icons.getAt(i);
var poi = icons.getAt(i);
MQA.EventManager.removeListener(poi, 'mouseover', affichin);
MQA.EventManager.removeListener(poi, 'mouseover', affichin);
Ligne 988 : Ligne 1 013 :




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


this.setInfoTitleHTML(this.getExtraField('texte'));
this.setInfoTitleHTML(this.getExtraField('texte'));
Ligne 1 003 : Ligne 1 028 :
else{
else{
document.getElementById('info').innerHTML= "";
document.getElementById('info').innerHTML= "";
this.setInfoTitleHTML(""); //S'affiche au clic
this.setInfoTitleHTML(""); <!--S'affiche au clic-->
this.setInfoContentHTML(this.getExtraField('texte'));   //S'affiche rollover
this.setInfoContentHTML(this.getExtraField('texte'));   <!--S'affiche rollover-->
}
}
}
}
Ligne 1 074 : Ligne 1 099 :


<script>
<script>
// Goes to fullscreen !!!!
<!-- Goes to fullscreen !!!!-->


var elem = document.getElementById('map');
var elem = document.getElementById('map');
Ligne 1 109 : Ligne 1 134 :
</script>
</script>
             
             
<script>
<script>
 


</script>
</script>


   </body>
   </body>
Ligne 1 124 : Ligne 1 144 :
</syntaxhighlight>
</syntaxhighlight>


=== Feuille de style générale ===
=== help.html : 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">
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Aide FAR-KML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
 
<h4>Aide</h4>
<hr>
<div style="width :720px;">
L'interface de ce site permet de traiter le bloc WPT COORDINATES de la préparation de vol FAR OPTIMA pour en faire un fichier .KML qui peut être lu par un logiciel d'affichage de carte <a href="https://www.google.com/earth/">Google Earth</a> ou <a href="http://maps.me/en/home">Maps.me</a> par exemple (ce n'est pas possible dans Lido).
<br>La capture du bloc WPT de l'OPF principal se fait à partir du fichier PDF du dossier de vol.
<br>Ce fichier peut être lu directement depuis la page web FAR ou à partir du fichier joint à un mail.
<br>La capture n'a pas besoin d'être précise (c'est d'ailleurs très délicat sur Ipad), il est évidemment préférable d'inclure le départ et au minimum un point de la route.
<br><br>
<img src="../convert/images/capture.jpg"></img><br><br>
 
La sélection est ensuite collée dans le cadre, un clic sur "En route!!", permet de lancer la préparation du fichier .KML.
Le choix "Route seule" permet un affichage moins encombré sur les petits écrans; le nom du waypoint reste accessible par clic sur l'icône.
Un clic sur "Carte interactive sans route", permet l'affichage de la carte interactive sans insérer de route et ainsi de visualiser les bases de données des terrains.
<br><br>
<img src="../convert/images/form.jpg"></img><br><br>
 
Une fois le fichier traité, celui-ci est disponible de plusieurs manières.
<br><br>
<img src="../convert/images/output.jpg"></img><br><br>
 
En affichage sur une carte statique, sans autre information.
<br><br>
<img src="../convert/images/statique.jpg"></img><br><br>
 
En affichage dynamique.
Il est possible de rajouter des informations supplémentaires : bases des données de terrains et les informations associées, nom des terrains.
Les informations peuvent être affichées sur la carte ou à coté.
A noter que le bouton "Carte plein écran" ne fonctionne pas dans tous les navigateurs.
<br><br>
<img src="../convert/images/interactive.jpg"></img><br><br>
 
Il est possible de télécharger le fichier.
<br>Le téléchargement se passe de façon classique sur ordinateur de bureau, sur Ipad un nouvel onglet s'ouvre et le fichier est affiché sous forme d'icone. Un clic long sur l'icône du fichier permet de choisir l'application de lecture.
<br>Et enfin la réceptions par mail est prévu, il suffit de renseigner le champ ad-hoc et de demander l'envoi. Le fichier est joint au mail envoyé.
<br><br>
 
 
<img src="../convert/images/envoi_mail.jpg"></img> <br><br>
Voici le résultat de l'importation d'une route SHANGAI-PARIS dégagement ORLY.
<br>La route principale est en rouge, la route vers le dégagement est en magenta.
<br>Les waypoints ne sont pas affichés dans cette vue.
<br><br>
<img src="../convert/images/route.jpg"></img> <br><br>
Et un zoom sur l'arrivée avec l'affichage des noms des waypoints.
<br><br>
<img src="../convert/images/zoom.jpg"></img> <br><br>
 
</div>
<hr>
<br><br><button type ="button" class="btn" onclick="window.history.back();">Retour</button>&nbsp;&nbsp;&nbsp;
 
 
</body>
</html>
 
</syntaxhighlight>
 
=== style.css : feuille de style générale ===
 
Gère la mise en forme des boutons et des cases d'option
 
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
body {
body {
Ligne 1 144 : Ligne 1 240 :
   
   


  .error{
  .error{
  color :red;
  color :red;
Ligne 1 264 : 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'


== Ressources ==
],
Ces fichiers sont nécessaires pour certaines fonctionnalités d'affichage.
[
'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; }
}
 
.cs-skin-underline > span {
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>
Pascal G
110

modifications

Récupérée de « https://dieudo.fr/wiki/Spécial:MobileDiff/1690...1778 »