Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET

Présentation au sujet: "Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET"— Transcription de la présentation:

1 Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET

2 Le projet SwitcHome Site Internet gratuit d’échange de maisons
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion Site Internet gratuit d’échange de maisons Cherche à améliorer le site et à attirer de nouveaux internautes

3 Maquette Ajout d’un système de GeoTagging 2 axes de travail:
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion Ajout d’un système de GeoTagging 2 axes de travail: Ajout d’une annonce de maison à échanger Recherche de maisons

4 Page pour ajouter une annonce
Ajout d’un bouton de géolocalisation: Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

5 Page de Géolocalisation
2 types de géolocalisation possibles: par géocodage et par GPS Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

6 Localisation avec l’adresse
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

7 Localisation avec l’adresse
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

8 Localisation avec des coordonnées GPS
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

9 Récupération des coordonnées
Champs latitude et longitude dans le formulaire d’inscription de l’annonce Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

10 Page pour rechercher des maisons
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

11 Association d’une info bulle à un tag
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

12 La géolocalisation Intégration des fonctionnalités de géolocalisation de Google Map: Respect de la structure du site: un fichier javascript : geolocalisation.js un fichier javascript pour l’aide (génération d’une popup) : popup.js un fichier HTML : appel aux fonctions javascript et programmation des boutons Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

13 Les fonctions Google Map
Les fonctions Google Map utilisées : Dans la fonction load() chargement de la carte initiale Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion map.addControl(new GLargeMapControl()); // cette fonction permet d’ajouter les fonctions de zoom et de déplacement de Google Map map.addControl( new GMapTypeControl()); // cette fonction permet d’ajouter les différentes vues plan, mixte, aérien

14 Les fonctions Google Map
map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde geocoder = new GClientGeocoder(); // autorise une nouvelle géolocalisation Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion Dans la page html la fonction load() est appelée 3 fois : -au chargement de la page -lors d’une géolocalisation par l’adresse -lors d’une localisation par GPS

15 La géolocalisation: ShowAddress()
ShowAddress(address) : pour le geocodage function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " veuillez rentrer une adresse valide :"+" "+"rue,ville,pays" ); } else { Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion ADDRESS lat lon

16 La géolocalisation: ShowAddress()
// création du marqueur repositionnable associé var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); // association de la bulle info au marqueur marker.openInfoWindowHtml(address+"<br />"+" lat="+point.y+" lon="+point.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position"); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

17 La géolocalisation: ShowAddress()
// gestion de l'événement " marqueur déplacé" GEvent.addListener(marker, "dragend", function() { // récupération du point associé au marqueur var pointnew=marker.getPoint(); // association de l'info-bulle correspondante marker.openInfoWindowHtml(address+"<br />"+" lat="+pointnew.y+" lon="+pointnew.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position") ; Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

18 La géolocalisation : GPS( lat, lon)
// création d'un point associé aux coordonnées GPS var pointb = new GLatLng(latb,lonb); // on centre la carte sur ce point map.setCenter(pointb, 13); // création du marqueur associé var markerb = new GMarker(pointb,{draggable: true}); // on ajoute le marqueur à la carte map.addOverlay(markerb); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion latb lonb

19 Validation de la position
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion JavaScript: document.forms["validation"].elements["lat"].value=latitude; document.forms["validation"].elements["lon"].value=longitude; HTML: <form name="validation" action=" latitude: <input type="text" name="lat" value=""> longitude: <input type="text" name="lon" value=""> <input type="submit" value="valider ma position" /> </form>

20 Page ajouter une annonce
Récupération de la latitude et de la longitude: <input type="text" name="latitude" value="<?php echo $_GET['lat'];?>" style="width:100px;" /> <input type="text" name="longitude" value="<?php echo $_GET['lon'];?>" style="width:100px;" /> Bouton “géolocaliser sa maison”: <input type="button" onclick="location.href=' value="Géolocaliser sa maison" /> Lien vers une FAQ: <a href="javascript:popup('FAQgeolocaliser.html','Aide','resizable=yes,location=no, width=600, height=300, menubar=no, status=no, scrollbars=yes, menubar=no')">A quoi ca sert? </a> Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

21 Recherche Introduction I. Maquette II. Inscription III. Recherche
IV.Difficultés rencontrées Conclusion

22 Difficultés rencontrées
Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

23 Conclusion Introduction I. Maquette II. Inscription III. Recherche
IV.Difficultés rencontrées Conclusion