Facbook viewat  Flickr
Accueil du site > Tutoriels > Créer une carte googlemap à partir d’un grooupe Flickr grâce au (...)

PHP / MySQL

Créer une carte googlemap à partir d’un grooupe Flickr grâce au GML

Flickr / Google map / GML

2 votes

Publié le mercredi 13 juillet 2011

Il s’agît ici de récupérer le flux GML   d’un groupe de partage de photos flickr afin de l’afficher sur une carte googlemap.

La création du groupe Flickr :

Il faut tout d’abord créer un groupe Flickr comme celui-ci sur l’année des Pyrénées : http://www.flickr.com/groups/2011-annee-des-pyrenees/pool/.

Dans le menu Administration —> Paramètres de modération :

Cocher la case "Oui les éléments doivent être géottagés" comme indiqué sous l’image ci dessous :

JPEG - 114.9 ko
Géotaggage des photos dans Flickr
Obliger les contributeurs à géotagger les photos d’un groupe flickr

Ensuite il faut récupérer l’adresse du flux GML   du groupe Flickr comme indiqué sous l’image ci-dessous :

JPEG - 96 ko
Récupérer le flux GML d’un groupe flickr
Comment récupérer le flux GML d’un groupe Flickr ?

Création du de la carte googlemap dans le header de la page :

à partir de l’adresse du fllux GML   trouvée dans l’étape précédente : http://api.flickr.com/services/feeds/geo/?g=1676077@N20&lang=fr-fr&format=rss_200

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
 var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
 var myOptions = {
   zoom: 4,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.SATELLITE
 }

 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 var georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?g=1676077@N20&lang=fr-fr&format=rss_200');
 georssLayer.setMap(map);
}
</script>

Déclarer l’initialisation de la carte dans la balise body :

<body onLoad="initialize()">

Paramétrage du calque contenant la carte googlemap :

Nous avons déclaré dans la fonction d’initialisation de googlemap le calque map_canvas comme contenant de la carte googlemap :

 <div id="map_canvas" style="width:550px; height:550px; margin-top:3px; border: #ffffff 5px solid;"></div>

Il es donc maintenant aisé de paramétrer la largeur et la hauteur souhaitée de son calque afin de l’adapter à l’interface du site. La carte googlemap se redimensionnera automatiquement à la taille du calque CSS  

Voir en ligne : Exemple de cartographie googlemap réalisée à partir d’un flux GML provenant de Flickr

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0