Discussion :

[clemissile]

Salut à tous,

Dans le cadre d'un cours, je dois créer une application qui sert à afficher des parcours de randonnée (pédestre, VTT ou à cheval) sur une carte. Nous est fourni un fichier XML, et nous devons l'utiliser pour en extraire les informations utiles à la carte. J'ai donc affiché sur cette carte des markers et infobulles. Ces dernières contiennent une rapide description et un lien "Voir les détails". Voici une capture d'écran de ce que ça donne :



La suite du projet était d'afficher un parcours détaillé à l'aide d'un bouton, comme le montre la capture d'écran ci-dessous :



Dernière partie du projet : effectuer une recherche Flickr qui donne des images dans un rayon de 10 km autour du départ de la randonnée.
Et c'est la que commence les problèmes, dans ma fonction searchFlickr(pos) l'argument pos n'a pas la même valeur avant la fonction (de type (latitude, longitude)) et lors de l'alert(pos) que j'effectue dans la fonction, l'alert m'affiche uniquement la longitude. Je ne comprends vraiment pas comment j'obtiens un tel résultat. Voici la partie de mon code qui pose problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Fonction qui récupère tout les points d'un tracé
function getCourse(name) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'gps/'+name, true);
  xhr.onload = function() {
   var doc = xhr.responseXML;
   var elements = doc.getElementsByTagName('trkpt')
   var allPos = new Array();
   for (var i = 0; i < elements.length; i++) {
    var lat = elements[i].getAttribute("lat"); // On récupère la latitude
    var lon = elements[i].getAttribute("lon"); // Et la longitude
 
    var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
 
    allPos.push(point);
   };
 
   var course = createCourse(allPos);
  }
  xhr.send(null);
}
 
// Fonction qui trace le parcours et effectue les modifications (zoom, zone de détails)
function createCourse(pos) {
  var course = new google.maps.Polyline({
    path: pos,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
 
  // On trace et on zomm sur l'élement
  course.setMap(map);
  map.setCenter(pos[0]);
  map.setZoom(12);
 
  alert(pos[0]);
 
  // Suppression du button "Afficher le parcours détaillé"
  b = document.getElementById('details').lastElementChild;
  document.getElementById('details').removeChild(b);
 
  //Ajout des boutons "Revenir à la carte complète" et "Trouver des images dans cette zone"
  document.getElementById('details').innerHTML += '<button onclick="initialize()">Revenir à la carte complète</button> <button onclick="searchFlickr('+ pos[0] +')">Trouver des images dans cette zone</button>'
}
 
// Fonction qui effectue la recherche Flickr et l'affiche
function searchFlickr(pos) {
  alert(pos);
 
  document.getElementById('details').innerHTML = '';
 
  var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=15d482f51e1b194f29bb84d130e2d4f2&lat=' + pos + '&lon=' + pos + '&radius=10&radius_units=km&per_page=5&format=rest';
 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    var doc = xhr.responseXML;
    photo = doc.getElementsByTagName('photo')
    // http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
    for (var i = 0; i < photo.length; i++) {
      p_url = "http://farm" + photo[i].getAttribute('farm') + ".static.flickr.com/" + photo[i].getAttribute('server') + "/" + photo[i].getAttribute('id') + "_" + photo[i].getAttribute('secret') + "_" + "t.jpg";
      document.getElementById('details').innerHTML += '<img style="display: inline-block; padding: 5px;" src="' + p_url + '"/>';
    };
  //Ajout du bouton "Revenir à la carte complète"
  document.getElementById('details').innerHTML += '<button style="display: block;" onclick="initialize()">Revenir à la carte complète</button>';
  }
  xhr.send(null);
 
}
 
window.onload = initialize;

Un autre problème (moins important) est que j'ai besoin de cliquer deux fois sur le bouton "Afficher le parcours détaillé" pour qu'il s'affiche.
J'espère avoir été clair, et si quelqu'un peut avoir une piste ou une solution, je suis preneur!

Cordialement,
Clemissile

[mathieu]

affichez le tableau complet juste avant "createCourse(allPos)"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
console.log(allPos);
var course = createCourse(allPos);

[NoSmoking]

Bonjour,
une chose me surprend quand même, dans ta fonction function searchFlickr(pos) {l'argument est de type new google.maps.LatLng et tu l'utilises dans ta fonction comme une simple variable mis dans l'url

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=15d482f51e1b194f29bb84d130e2d4f2&lat=' + pos + '&lon=' + pos + '&radius=10&radius_units=km&per_page=5&format=rest';

[clemissile]

@mathieu :
Lorsque je fais le console.log(allPos) ceci s'affiche :



Or, là je ne comprends étant donné que allPos est censé contenir toutes les positions des points servant à construire le parcours détaillé. Pourtant lorsque je fais alert(allPos) et non plus console.log(allPos) toutes les positions recupérées s'affichent bien :



@NoSmoking :
C'est normal, à la base j'avais remplacé les deux pos par pos[0] et pos[1] mais comme cela ne fonctionnait pas j'ai laissé avec pos un peu "par défaut", avant de les remplacer par la solution.

Cordialement,
Clemissile

[NoSmoking]

Etant en présence de fonction de callback, place plutôt ton console.log en début de fonction pour lire le paramètre passé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function searchFlickr(pos) {
  console.log(pos);

[clemissile]

Salut,

Après plusieurs essais avec la méthode décrite plus haut j'ai décidé de changer mon fusil d'épaule. J'ai donc codé deux nouvelles fonctions searchFlickr() et getFlickr(). La première qui crée l'url de la recherche Flickr, et la seconde qui effectue finalement la recherche et l'affiche. Voici le code de ces fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Fonction qui crée l'url pour la recherche Flickr
function searchFlickr() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data/randos.xml', true);
  xhr.onload = function() {
   var doc = xhr.responseXML;
   element = doc.getElementsByTagName('rando:randonnee');
   for (var i = 0; i < element.length; i++) {
     if (element[i].getAttribute('rdf:ID') == nameRando) {
      var lat = element[i].getElementsByTagName('rando:depart')[0].getElementsByTagName('gpx:trkpt')[0].getAttribute('gpx:lat');
      var lon = element[i].getElementsByTagName('rando:depart')[0].getElementsByTagName('gpx:trkpt')[0].getAttribute('gpx:lon');
     }
   };
 
   url_flickr = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=15d482f51e1b194f29bb84d130e2d4f2&lat=' + lat.toString() + '&lon=' + lon.toString() + '&radius=10&radius_units=km&per_page=5&format=rest';
 
   getFlickr();
 
  };
  xhr.send(null);
}
 
//Fonction qui affiche le resultat de la recherche Flickr
function getFlickr() {
  document.getElementById('details').innerHTML = '';
 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url_flickr, true);
  xhr.onload = function() {
    var doc = xhr.responseXML;
    photos = doc.getElementsByTagName('photo');
    // http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
    for (var i = 0; i < photos.length; i++) {
      var p_url = "http://farm" + photos[i].getAttribute('farm') + ".static.flickr.com/" + photos[i].getAttribute('server') + "/" + photos[i].getAttribute('id') + "_" + photos[i].getAttribute('secret') + "_" + "t.jpg";
      document.getElementById('details').innerHTML += '<img src="' + p_url + '"/>';
    };
  //Ajout du bouton "Revenir à la carte complète"
  document.getElementById('details').innerHTML += '<button style="display: block;" onclick="initialize()">Revenir à la carte complète</button>';
  };
  xhr.send(null);
}

Lorsque je fais un console.log(url_flickr), l'url est bon. Mais cependant aucune photo ne s'affiche dans la section HTML concernée alors que quand je remplace "lat" et "lon" dans l'url par des chiffres (par exemple 45 et 2) dans ce cas des photos s'affichent. Aucun message d'erreur dans la console.
Encore une fois, je bloque et je ne sais pas d'où peut provenir le problème.

Cordialement,
Clemissile

[NoSmoking]

Pourquoi lat.toString() ?
Regarde la console pour voir l'erreur en retour.

[clemissile]

Oups, désolé pour le toString(), je l'avais mis pour voir si le problème venait de là, et j'ai oublié de l'enlever.
Le problème est là, la console ne donne aucune erreur...

Cordialement,
Clemissile

[NoSmoking]

Je parlais de l'erreur en retour du serveur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
xhr.onload = function() {
    var doc = xhr.responseXML;
    console.log(  xhr.responseXML)

;

[clemissile]

Voilà ce que j'obtiens :



Cordialement,
Clemissile

[NoSmoking]

unavailable, clique sur l'onglet réseau et observe la réponse.

Si tu avais une page en ligne, même minime, on pourrait peut être mieux t'aider.

[lordofrings33]

Bonjour Clemissile,

Je pense pouvoir t'aider à résoudre ton problème car j'ai réalisé une application dans le même style il y a 2 ans. Peux-tu me donner ton fichier .xml ainsi que le code utilisé pour en premier temps, afficher la partie «*voir les détails*» qui récupère tes attributs et régler ton problème de boutons et dans un second temps celui de ta fonction "searchFlickr(pos)" pour y jeter un œil et t'aider au plus vite.

Cordialement,

lordofrings33