dieudo.fr

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

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

Version du 28 mars 2015 à 12:42

203 octets ajoutés ,  28 mars 2015 à 12:42
→‎Affichage de la carte animée
Ligne 765 : Ligne 765 :


<!--Création de la carte>--->
<!--Création de la carte--->
<script type="text/javascript">
<script type="text/javascript">
Ligne 771 : Ligne 771 :
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 779 : Ligne 779 :
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 809 : Ligne 809 :
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 828 : Ligne 828 :
// 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).
  for (i=2;i<route.getSize();i++) {  <!--Boucle les points pour ne jamais afficher l'info uniquement le titre (nom du point).-->


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 l'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 l'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 d'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 863 : Ligne 863 :




//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 875 : Ligne 875 :


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.
for (i=1;i<myCollec.getSize();i++) {  <!--Boucle les points pour créer les infos supplémentaires pour les étiquettes et les infos.-->
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 889 : Ligne 889 :




//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 906 : Ligne 906 :




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 917 : Ligne 917 :
}
}
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 923 : Ligne 923 :
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 934 : Ligne 934 :




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


function AffichEtiq (iconsaff,etiqtype){
function AffichEtiq (iconsaff,etiqtype){
Ligne 947 : Ligne 947 :
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 967 : Ligne 967 :
    
    
case "NONAME" :
case "NONAME" :
if (typeof EtiqCollec == "undefined") { //Il n'y a pas d'étiquettes affichées, sort
if (typeof EtiqCollec == "undefined") { <!--Il n'y a pas d'étiquettes affichées, sort-->
break;
break;
}
}
EtiqCollec.setVisible(false);
EtiqCollec.setVisible(false);
map.removeShapeCollection(EtiqCollec); //Efface les étiquettes
map.removeShapeCollection(EtiqCollec); <!--Efface les étiquettes-->
  break;
  break;
}
}
Ligne 977 : Ligne 977 :




//-------------------------------------------------------------------
<!----------------------------------------------------------------------->
//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){   


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++) {  <!-- Boucle les points pour créer les évènements clic et survol-->
var poi = icons.getAt(i);
var poi = icons.getAt(i);
MQA.EventManager.removeListener(poi, 'mouseover', affichout);
MQA.EventManager.removeListener(poi, 'mouseover', affichout);
Ligne 993 : Ligne 993 :


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++) {  <!-- Boucle les points pour créer les évènements clic et survol-->
var poi = icons.getAt(i);
var poi = icons.getAt(i);
MQA.EventManager.removeListener(poi, 'mouseover', affichin);
MQA.EventManager.removeListener(poi, 'mouseover', affichin);
Ligne 1 004 : Ligne 1 004 :




affichout = function(){                  //Affiche l'info au clic hors carte
affichout = function(){                  <!--Affiche l'info au clic hors carte-->
this.setInfoContentHTML("");
this.setInfoContentHTML("");
document.getElementById('info').innerHTML= this.getExtraField('texte');
document.getElementById('info').innerHTML= this.getExtraField('texte');
Ligne 1 011 : Ligne 1 011 :
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 l'info au clic sur la carte-->


this.setInfoTitleHTML(this.getExtraField('texte'));
this.setInfoTitleHTML(this.getExtraField('texte'));
Ligne 1 019 : Ligne 1 019 :
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 090 : Ligne 1 090 :


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


var elem = document.getElementById('map');
var elem = document.getElementById('map');
Pascal G
110

modifications

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