110
modifications
(35 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
Ci-dessous le code source | 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== | ||
Voici les fichiers situées à la racine du site. | |||
=== form.html : page d'initialisation === | === form.html : page d'initialisation === | ||
Ligne 85 : | Ligne 92 : | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
<!DOCTYPE HTML> | <!DOCTYPE HTML> | ||
<!-- | <html lang="fr"> | ||
<!--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> | <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> | |||
<body> | |||
<?php | |||
< | |||
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> '; | |||
echo '<button type ="button" class="btn" style= "padding: 10px 15px 10px 15px;" onclick="location.href=\'help.html\'">?</button>'; | |||
exit; | |||
} | |||
$mytype=$_POST['typeroute']; | |||
$route; | |||
$fc="(\b[N|S].{6}[W|E].{7}\b)"; //format des coordonnées mot entier uniquement | |||
$rempl = "latitudlongitud"; | |||
$routebis=preg_replace($fc,$rempl,$route); //remplace les coordonnées par texte pour analyse et recherche | |||
$posdeb=strpos($routebis,$rempl); //position premières coordonnées | |||
if (stripos($_SERVER['HTTP_USER_AGENT'],"iPad")){ // si appel depuis IPAD, il faut enlever un caractère supplémentaire????? | |||
$offset =6; | |||
} | |||
else { | |||
$offset=5; | |||
} | |||
$route=substr($route,$posdeb-$offset); | |||
$posfin=strripos($routebis,$rempl); | |||
//position des dernières coordonnées | |||
$route=substr($route,0,$posfin+15-$posdeb+$offset); //suppression de ce qui est derrière les dernières coordonnées | |||
if (strstr($route,"-")) | |||
{ | |||
$rdeg= stristr($route,"---"); // crée le dégagement s'il existe | |||
$rdeg=preg_replace("[-]","",$rdeg); | |||
$pos=stripos($route,"-"); | |||
$rmain=substr($route,0,$pos); | |||
} | |||
else | |||
{ | |||
$rdeg=""; // pas de dégagement | |||
$rmain=$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> '; | |||
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")); | |||
$rmain= CreateArrayRoute ($rmain); | |||
$rdeg= CreateArrayRoute ($rdeg); | |||
// Création du nom du fichier | |||
$dep=$rmain[0]['waypoint']; //Point de départ | |||
$arr=end($rmain)['waypoint']; //Point d'arrivée | |||
$deg=end($rdeg)['waypoint']; //Point de dégagement | |||
$timestp = date("dMY_His"); | |||
if ($deg){ | |||
$mykml = $dep."-".$arr."_(".$deg.")_".$timestp.".kml"; //Nom du fichier KML | |||
} | |||
else { | |||
$mykml = $dep."-".$arr."_".$timestp.".kml"; | |||
} | } | ||
$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); | |||
$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 | |||
$mainstring= CreateString($rmain); //Création string route principale et dégagement | |||
$degstring= CreateString($rdeg); | |||
$upperleftlat=max(array_column($rmain,'latitude')); //point gauche et point droit de la carte statique | |||
$upperleftlong=min(array_column($rmain,'longitude')); | |||
$upperleft=$upperleftlat.",".$upperleftlong; | |||
$lowerrightlat= min(array_column($rmain,'latitude')); | |||
$lowerrightlong=max(array_column($rmain,'longitude')); | |||
$lowerright=$lowerrightlat.",".$lowerrightlong; | |||
//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.""; | |||
// Création de l'image MapQuest en plein écran | |||
$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; | |||
echo '<button type ="button" class="btn" onclick="window.open(\''.$mapurl.'\')"> Carte statique </button>'; | |||
echo "<br>"; | |||
echo "<br>"; | |||
echo '<button type ="button" class="btn" onclick="window.open(\''.$filename.'\')">Carte interactive</button>'; | |||
echo "<br>"; | |||
echo "<br>"; | |||
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> '; | |||
echo '<button type ="button" class="btn" style= "padding: 10px 15px 10px 15px;" align="right" onclick="location.href=\'help.html\'">?</button>'; | |||
echo "<br>"; | |||
//========= Les fonctions utilisées ========= | |||
//Fonction de test, pour voir si un élément d'un tableau est vide | |||
function testvide($var) | |||
{ | |||
strlen($var)==0; | |||
return($var); | |||
} | |||
//Fonction de création du fichier .KML | |||
function generatekml($inputm,$inputd,$filename,$type){ | |||
// $inputm est la route principale, $inputd est la route dégagement,$type est le type de route | |||
$output="<?xml version='1.0' encoding='UTF-8'?> | |||
<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'> | |||
<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> | |||
<Style id='placemark-purple'> | |||
<IconStyle> | |||
<Icon> | |||
<href>http://www.notreavion.net/convert/images/icone_route.png</href> | |||
</Icon> | |||
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' /> | |||
</IconStyle> | |||
</Style> | |||
<Style id='placemark-pink'> | |||
<IconStyle> | |||
<Icon> | |||
<href>http://www.notreavion.net/convert/images/icone_deg.png</href > | |||
</Icon> | |||
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' /> | |||
</IconStyle> | |||
</Style> | |||
<Style id='rmain'> | |||
<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.=" | |||
< | <Placemark>"; | ||
$output.="<name>$name</name>"; | |||
$output.=" | |||
<styleUrl>#placemark-purple</styleUrl> | |||
"; | |||
$output.="<description>$name</description> | |||
<Point> | |||
<coordinates>$coordinates</coordinates> | |||
</Point> | |||
</Placemark> | |||
"; | |||
} | } | ||
foreach($inputd as $point){ | |||
$name=$point['waypoint']; | |||
$coordinates=$point['coordinates']; | |||
$output.="<Placemark>"; | |||
$output.="<name>$name</name>"; | |||
$output.=" | |||
<styleUrl>#placemark-pink</styleUrl> | |||
"; | |||
$output.="<description>$name</description> | |||
<Point> | |||
<coordinates>$coordinates</coordinates> | |||
</Point> | |||
</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); | |||
/* | |||
//Création du fichier kmz - non utilisé | |||
$mykmz = substr($filename,0,strlen($filename)-3)."kmz"; | |||
$zip = new ZipArchive(); | |||
if ($zip->open($mykmz, ZIPARCHIVE::CREATE)!==TRUE) { | |||
exit("cannot open <$file>\n"); | |||
} | |||
$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){ | |||
$arrlength=count($route); | |||
$newroute=array(); //Nouveau tableau à deux colonnes Nom et Coordonnées | |||
for($x=0;$x<$arrlength;$x++) | |||
{ | |||
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 | |||
function ConvertDMSToDD($input) { | |||
$hemi = substr($input,0,1); | |||
if (strlen($input)==7) | |||
{ | |||
$deg = intval(substr($input,1,2)); | |||
$min = intval(substr($input,3,2)); | |||
$decim =intval(substr($input,6,1)); | |||
} | |||
else | else | ||
{ | { | ||
$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){ | |||
$arrlength=count($route); | |||
$linestring=""; | |||
for($x=0;$x<$arrlength;$x++) | |||
{ | |||
$linestring.=$route[$x]['latitude'].",".$route[$x]['longitude'].","; | |||
} | |||
return $linestring; | |||
} | |||
//========= Fin des fonctions utilisées ========= | |||
?> | |||
</body> | |||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Ligne 1 104 : | Ligne 1 144 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | === help.html : l'aide=== | ||
Cette page fournit une aide sur l'utilisation du site.<br> | Cette page fournit une aide sur l'utilisation du site.<br> | ||
Ligne 1 177 : | Ligne 1 217 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | === 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 318 : | Ligne 1 358 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | === screenfull.js : script pour passage plein écran === | ||
Il s'agit d'un script public pour permettre l'affichage en plein écran en cliquant sur un bouton.<br> | 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. | 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> | Il y a trois sous-dossiers pour stocker les ressources et les résultats.<br> | ||
/images : toutes les images utilisées<br> | /images : toutes les images utilisées<br> | ||
/fichiers_airports : les fichiers KML permettant l'affichage des aéroports sur la carte interactive<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> | /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, | /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> | |||
=== | === /KML_outputs === | ||
Dossier destiné à recueillir les fichiers .KML générés lors l'utilisation du site.<br> | |||
Il faut le purger de temps en temps.<br> | |||
Si l'utilisation devenait intensive, il serait sans doute utile de créer une routine d'effacement périodique.<br> |
modifications