Javascript asynchrone et cartographie

Objectifs

Nous voulons pouvoir afficher la localisation d'une image sur une carte, puis ajouter sur la carte les images Flickr qui sont géolocalisées sur cette région. La vidéo suivante montre la réalisation à obtenir.

Recherche d'images géolocalisées

Pour commencer, il faut demander à Flickr de renvoyer uniquement des images dont la géolocalisation est connue.

Pour cela, modifier la requête pour la recherche d'images Flickr (le début de la 1^ère partie) en y ajoutant le paramètre has_geo=1 comme indiqué sur la documentation de recherche d'images.

Lorsque vous faites la requête pour avoir les détails d'une image (la 2^ème requête flickr.photos.getInfo donc, pas celle de recherche), la réponse JSON doit alors contenir une propriété location qui contient les détails géographiques de l'image :

Leaflet

Pour la carte géographique, nous allons utiliser Leaflet, une bibliothèque Javascript open-source pour gérer l'affichage des cartes et les interactions avec la carte. Leaflet permet l'utilisation de fonds de cartes de diverses sources, mais est souvent utilisé avec Open Street Map, base de connaissances géographiques libre de droits et gérée par la communauté.

Liens utiles pour la suite du TP

• Quick start
• Documentation

Initialisation de la carte

Ajouter dans le code HTML une division d'identifiant carte après le <main> et lui mettre le style ci-dessous. Cette division servira à afficher la carte.

#carte {
    height: 500px;
    margin: 20px;
    padding: 10px;
    border: 1px solid grey;
}

Déclarer une variable globale map initialisée à null. Puis initialiser la carte dans la fonction init. Puisqu'aucune localisation n'est à afficher pour l'instant, initialiser la carte sur la position (0, 0) et au niveau de zoom 2, comme ci-dessous.

Mise à jour de la carte

Modifier la fonction afficheDetails pour que, lorsque les détails d'une image s'affichent, la carte se centre sur la géolocalisation de cette image et zoome sur ce point (utiliser un niveau de zoom de 10).

Afin de garder une trace des marqueurs utilisés (on aura besoin de les enlever par la suite, créer une variable globale allMarkers initialisée à une liste vide

Placer un marqueur sur la géolocalisation de l'image et y associer un popup qui est automatiquement ouvert. La popup contiendra l'image en 75x75, le titre et la description de l'image, et un lien vers la page de cette image sur le site Flickr.

Enfin, ajouter le marqueur créé à la liste allMarkers.

On doit donc arriver à cette étape :

Affichages des images proches

Ajouter, dans la afficheDetails, le code pour lancer une nouvelle requête XHR au service web de Flickr qui va demander la liste des images géolocalisées sur la zone de la carte affichée. On limitera le nombre de réponses à 20.

Indications pour construire la requête :

• le méthode getBounds de la carte permet d'obtenir les corrdonnées des coins opposés de la carte
• Penser à mettre le paramètre has_geo=1 pour l'interrogation de Flickr
• Consulter la page de documentation de la méthode de recherche de Flickr pour voir comment utiliser les paramètres bbox et extras dans la requête à utiliser.
• Le paramètre extras permettra d'obtenir les données de géolocalisation et la description chaque image dans la liste des résultats et ainsi évitera de faire d'autres requêtes XHR.

Pour chaque résultat, ajouter un marqueur sur la carte avec une popup (non affichée par défaut). Penser à ajouter chqaue marqueur créé à la liste allMarkers. Penser enfin utiliser cette liste (et la réinitialiser à vide) dans la fonction afficheDetails afin d'enlever tous les marqueurs présents sur la carte avant d'afficher localisation d'une nouvelle image.

On arrive donc à la version finale :