Créer une carte peut s'avérer utile pour certains sites. La qualité des carte étant de rigueur, le publique veut des images satellites et/ou aériennes.
Ce poste va donc être consacré à expliquer comment y arriver.
Le nécessaire pour y parvenir est :
- "map API" qui permettra d'insérer une carte dans le site internet,
- source de données (data source),
- comment passer à travers les restrictions de domaine ?
Il y a une multitude de choix de carte à intégrer. La plus connue est Google Maps, mais il y a aussi Virtual Earth ou encore le Yahoo! Maps.
Ce dernier est vraiment au point, il offre différentes possibilités pour toutes les utilisations que l'on peut faire d'une carte.
Yahoo! Maps permet différente manière d'intégrer sa mappemonde et d'interagir avec :
- une simple API prenant un fichier XML formaté geoRSS
- le JavaScript, permettant de créer facilement des applications optimisées.
- L'API AJAX.
Voici un exemple en ligne >ici< où vous pourrez voir le code javaScript (en regardant la page source).
L'API AJAX est utilisée et permet ainsi :
- de Geocoder une adresse et l'afficher dans la carte
- d'afficher toutes les informations concernant le trafic comme les accidents, les zones en construction, etc.
- d'informer sur les zones de recherche
Les data sources utilisées sont trois web servicies mis à disposition récemment par Yahoo!. Ils sont facile à programmer (c'est juste une URL avec des paramètres qui renvois du XML).
Le problème est que les browsers tels que Firefox et IE imposent des restrictions de domaine et refusent des appels HTTP depuis un autre domaine.
Alors pour palier à ce problème, il y a différents moyens :
- Software proxy
- Apache mod_rewrite
- Chargement dynamique des fichiers .js via des scripts tags à la place de code JavaScript.
La façon la plus simple est d'écrire un proxy qui se situera sur le même serveur que l'application et qui ne fera que passer les Requêtes et les Réponses depuis et vers le serveur web.
Après la théorie, laissons place à la pratique ! Voici un peu de code :
Comment ajouter des contrôles/réglages pour la map :
Tous ces réglages et bien d'autres encore peuvent être trouvés dans le Getting Started Guide for AJAX.
Maintenant, pour l'exemple on va s'intéresser à comment passer outre la restriction des domaines... Un fichier PHP en guise de proxy fera l'affaire :
Maintenant que le proxy est en place, on va pouvoir faire l'appel à la data source api.local.yahoo.com.
Voici comment faire pour que lorsqu'on clic sur le bouton ‘AddLocation’ une boite de dialogue s'ouvre et permettra d'entrer une adresse.
Quand le bouton est cliqué, la fonction addGeocode() est appelée. Elle permet de préparer la requête et d'appelé le proxy.
La fonction callWS() fait une requête XmlHttpRequest au proxy et affiche au besoin ‘Loading...’ si ça prend du temps.
La méthode parseResult() permet l'exécution si l'appel à la data source a réussie.
Dès lors, tout ce qui reste à faire est de parser le XML et de rajouter les marqueurs.
Dans cet exemple le parseur xmlw3cdom.js (de SourceForge) est utilisé. Il est très complet (trop pour l'exemple) mais il est d'une simplicité extrême.
Ce parseur DOM nécessite le parseur SAX suivant : xmlsax.js pour pouvoir travailler avec les objets XML.
La manière de parser un fichier XML est très simple, alors nous allons nous intéresser plutôt à la suite (Pour les plus curieux, il suffit de regarder le code source).
Les résultats sont utilisés pour créer un point et une chaîne de caractère pour la Smartwindow, qui sont passé à la méthode createYMarker().
Crée les marqueurs sur la map.
Tout ceci reste un exemple assez basique, mais il peut devenir une base pour un mashup plus complexe. Dès que cette partie est faite, ça ne peut qu'aller en s'améliorant =)
Voici d'autres exemples (mais pas Yahoo! cette fois) :
http://research.microsoft.com/mapcruncher/Gallery/Universities/
http://research.microsoft.com/mapcruncher/Gallery/NationalParks/
Et bon courage à toutes celles et ceux qui veulent se lancer dans ce périple !
Ce poste va donc être consacré à expliquer comment y arriver.
Le nécessaire pour y parvenir est :
- "map API" qui permettra d'insérer une carte dans le site internet,
- source de données (data source),
- comment passer à travers les restrictions de domaine ?
Il y a une multitude de choix de carte à intégrer. La plus connue est Google Maps, mais il y a aussi Virtual Earth ou encore le Yahoo! Maps.
Ce dernier est vraiment au point, il offre différentes possibilités pour toutes les utilisations que l'on peut faire d'une carte.
Yahoo! Maps permet différente manière d'intégrer sa mappemonde et d'interagir avec :
- une simple API prenant un fichier XML formaté geoRSS
- le JavaScript, permettant de créer facilement des applications optimisées.
- L'API AJAX.
Voici un exemple en ligne >ici< où vous pourrez voir le code javaScript (en regardant la page source).
L'API AJAX est utilisée et permet ainsi :
- de Geocoder une adresse et l'afficher dans la carte
- d'afficher toutes les informations concernant le trafic comme les accidents, les zones en construction, etc.
- d'informer sur les zones de recherche
Les data sources utilisées sont trois web servicies mis à disposition récemment par Yahoo!. Ils sont facile à programmer (c'est juste une URL avec des paramètres qui renvois du XML).
Le problème est que les browsers tels que Firefox et IE imposent des restrictions de domaine et refusent des appels HTTP depuis un autre domaine.
Alors pour palier à ce problème, il y a différents moyens :
- Software proxy
- Apache mod_rewrite
- Chargement dynamique des fichiers .js via des scripts tags à la place de code JavaScript.
La façon la plus simple est d'écrire un proxy qui se situera sur le même serveur que l'application et qui ne fera que passer les Requêtes et les Réponses depuis et vers le serveur web.
Après la théorie, laissons place à la pratique ! Voici un peu de code :
<html>
<head>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=2.0
&appid= dantheurer"></script>
<style type="text/css">
#mapbox {
height: 600px;
width: 600px;
} </style>
</head>
<body>
<div id="mapbox"></div>
<script type="text/javascript">
//init map
var ymap =
new YMap(document.getElementById('mapbox'));
//define a point to start at
var startPoint = new YGeoPoint(37.34,-122.02);
//center and draw map at given point
ymap.drawZoomAndCenter(startPoint, 7);
</script>
</body>
</html>
<head>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=2.0
&appid= dantheurer"></script>
<style type="text/css">
#mapbox {
height: 600px;
width: 600px;
} </style>
</head>
<body>
<div id="mapbox"></div>
<script type="text/javascript">
//init map
var ymap =
new YMap(document.getElementById('mapbox'));
//define a point to start at
var startPoint = new YGeoPoint(37.34,-122.02);
//center and draw map at given point
ymap.drawZoomAndCenter(startPoint, 7);
</script>
</body>
</html>
Comment ajouter des contrôles/réglages pour la map :
//init map
var ymap = new YMap(document.getElementById('mapbox'));
//add controls
ymap.addPanControl();
ymap.addZoomLong();
…
var ymap = new YMap(document.getElementById('mapbox'));
//add controls
ymap.addPanControl();
ymap.addZoomLong();
…
Tous ces réglages et bien d'autres encore peuvent être trouvés dans le Getting Started Guide for AJAX.
Maintenant, pour l'exemple on va s'intéresser à comment passer outre la restriction des domaines... Un fichier PHP en guise de proxy fera l'affaire :
yproxy.php
<?php
header("Content-type: text/xml\n\n");
$url = $_SERVER['QUERY_STRING'];
//strpos allows only calls to specified endpoint
if ( strpos($url,"http://api.local.yahoo.com/") === 0)
{
$ch = curl_init($url);
curl_exec($ch);
}
?>
<?php
header("Content-type: text/xml\n\n");
$url = $_SERVER['QUERY_STRING'];
//strpos allows only calls to specified endpoint
if ( strpos($url,"http://api.local.yahoo.com/") === 0)
{
$ch = curl_init($url);
curl_exec($ch);
}
?>
Maintenant que le proxy est en place, on va pouvoir faire l'appel à la data source api.local.yahoo.com.
Voici comment faire pour que lorsqu'on clic sur le bouton ‘AddLocation’ une boite de dialogue s'ouvre et permettra d'entrer une adresse.
<div class="inputelement">
<button onClick="addGeocode()">
Add location</button> <input id="geoquery"
value="5th Avenue,New York" size="50">
</input> - enter an address</div>
<button onClick="addGeocode()">
Add location</button> <input id="geoquery"
value="5th Avenue,New York" size="50">
</input> - enter an address</div>
Quand le bouton est cliqué, la fonction addGeocode() est appelée. Elle permet de préparer la requête et d'appelé le proxy.
var query = document.getElementById("geoquery").value;
var uri =
"http://api.local.yahoo.com/MapsService/V1/geocode?
appid=dantheurer&location=" + query;
callWS(uri, "geocode");
var uri =
"http://api.local.yahoo.com/MapsService/V1/geocode?
appid=dantheurer&location=" + query;
callWS(uri, "geocode");
La fonction callWS() fait une requête XmlHttpRequest au proxy et affiche au besoin ‘Loading...’ si ça prend du temps.
La méthode parseResult() permet l'exécution si l'appel à la data source a réussie.
var url = 'yproxy.php?' + encodeURI(target);
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('result').innerHTML = '';
parseResult(xmlhttp.responseText, service);
} else {
document.getElementById('result').innerHTML =
"Loading...";
}
};
xmlhttp.send(null);
}
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('result').innerHTML = '';
parseResult(xmlhttp.responseText, service);
} else {
document.getElementById('result').innerHTML =
"Loading...";
}
};
xmlhttp.send(null);
}
Dès lors, tout ce qui reste à faire est de parser le XML et de rajouter les marqueurs.
Dans cet exemple le parseur xmlw3cdom.js (de SourceForge) est utilisé. Il est très complet (trop pour l'exemple) mais il est d'une simplicité extrême.
Ce parseur DOM nécessite le parseur SAX suivant : xmlsax.js pour pouvoir travailler avec les objets XML.
La manière de parser un fichier XML est très simple, alors nous allons nous intéresser plutôt à la suite (Pour les plus curieux, il suffit de regarder le code source).
Les résultats sont utilisés pour créer un point et une chaîne de caractère pour la Smartwindow, qui sont passé à la méthode createYMarker().
var point =
new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "Long: " + lon + "
” + “Lat: ” + lat;
var myMarker = createYMarker(point, i, smart);
new YGeoPoint(parseFloat(lat),parseFloat(lon));
var smart = "Long: " + lon + "
” + “Lat: ” + lat;
var myMarker = createYMarker(point, i, smart);
Crée les marqueurs sur la map.
var marker = new YMarker(point,'id'+number);
marker.addLabel(number);
YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(msg) });
return marker;
marker.addLabel(number);
YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(msg) });
return marker;
Tout ceci reste un exemple assez basique, mais il peut devenir une base pour un mashup plus complexe. Dès que cette partie est faite, ça ne peut qu'aller en s'améliorant =)
Voici d'autres exemples (mais pas Yahoo! cette fois) :
http://research.microsoft.com/mapcruncher/Gallery/Universities/
http://research.microsoft.com/mapcruncher/Gallery/NationalParks/
Et bon courage à toutes celles et ceux qui veulent se lancer dans ce périple !
par Flo.
publié dans :
20notessurmashup
