Archives de la catégorie : Tutoriel

Tutorial API Microsoft Virtual Earth (1ère partie)

4 nov 2006  2 commentaires

Après avoir fait un premier tutorial sur l’API Google Maps, je souhaite vous présenter un tutorial sur l’API javascript de Microsoft : Virtual Earth.

En effet cette API a une approche un peu plus simple que Google Maps (à mon avis). Elle offre plus de fonctionnalités que ses concurrentes Google ou Yahoo (Itinéraire, recherche Live Local). Par contre il y a largement moins de site qui utilise cette API. Sur ProgrammableWeb, on remarque que seulement 51 mashups sont référencés contre 620 pour Google Maps. Mais j’y reviendrais dans un autre post…

Pour découvrir toutes les fonctionnalités disponibles de Microsoft Virtual Earth : The Virtual Earth Interactive SDK

Prérequis

Aucun n’enregistrement n’est demandé pour l’utilisation de l’API. Aucune référence au “domaine” de l’utilisateur ne doit être fourni.

Ceci facilite grandement le développement.

Il vous suffit juste d’insérer la balise suivante dans le <HEAD> de toutes les pages qui inséreront les cartes MS Virtual Earth.

<script xsrc="http://dev.virtualearth.net/mapcontrol/v3/MapControl.js" mce_src="http://dev.virtualearth.net/mapcontrol/v3/MapControl.js" >
</script>

Afficher une carte grâce à l’API Microsoft Virtual Earth

D’abord il faut insérer dans votre page un <DIV> où sera inséré la carte Virtual Earth. Attribuer à ce <DIV> une taille et un id.

Par exemple :

<div id="carte" style="position:relative;width: 400px; height: 400px"></div>

Tour comme Google Maps, pour afficher une carte il est nécessaire d’instancier (de créer) un objet “carte” grâce à la class VEMap().

En argument, vous devez passer l’id du div (container) où vous souhaitez insérer la carte :

var map = new VEMap("carte");

Ensuite, il faut indiquer à l’objet carte de “charger la carte” grâce à la méthode LoadMap(), en indiquant en paramètre où elle doit se centrer. En argument vous devez indiquer les coordonnées géographiques (latitude x et longitude y ) à travers l’objet VELatLong() et en option le niveau d’échelle et le type de carte.

Ce qui donne :

map.LoadMap(new VELatLong(48.860925, 2.336172), //Centre de lacarte
12, //Niveau Zoom
VEMapStyle.Road //Style de la carte
);

Et voilà, vous avez tout ce qu’il vous faut pour afficher une carte. En résumé, voici le script complet :

<html>
<head>

<title>Tutorial Renalid : Virtual Earth</title>
<script xsrc="http://dev.virtualearth.net/mapcontrol/v3/MapControl.js" mce_src="http://dev.virtualearth.net/mapcontrol/v3/MapControl.js" >
</script>
<script>
function LoadCarte(){                               var map = new VEMap("carte");
map.LoadMap(new VELatLong(48.860925, 2.336172), 12, VEMapStyle.Road);
}           </script>

</head>
<body onload="LoadCarte()">
<div id="carte" style="position:relative;width: 400px; height: 400px"></div>
</body>
</html>

NB : Il est toujours préférable pour toutes ces API d’instancier l’objet carte une fois la page chargée (appeler la fonction grâce à la méthode onload du body).

Voici la première partie, d’autres suivront pour expliquer les intéractions possibles avec la carte. N’hésitez pas à laisser des commentaires! :-)

PS : Pour en savoir plus sur Virtual Earth, je vous conseille l’interview par JM Billaut de Arnaud Gstach travaillant pour Microsoft Europe sur justement Virtual Earth.

Tutorial API Google Maps (1ère partie)

18 oct 2006  5 commentaires

L’API Google Maps a révolutionné le Web (du moins en partie). Cette application cartographique en javascript totalement gratuite a permis aux développeurs de créer les “mashups”, des applications hybrides qui combinent plusieurs sources d’informations.

Si vous êtes tenté par le développement d’une application utilisant de la cartographie, voici un tutorial présentant les grandes lignes de l’API Google Maps.

Tout d’abord je ne saurais vous conseiller d’acheter “Beginning Google Maps Applications” (en anglais).

Ce tutorial se fera en plusieurs parties que je posterais au fur et à mesure. De plus je pense que je ferais d’autres tutorials pour les autres API car elles ont chacune leurs avantages et inconvénients.

Prérequis

Pour utiliser l’API Google Maps (ou tout autre API cartographique) vous devez avoir des connaissances en language Javascript et éventuellement développement orienté objet.

L’API Javascript Google Maps est (pour faire simple) un script Javascript qui est appelé grâce à la balise <script>.

L’appel au code javascript doit être fait avec un paramètre “key”.

Cette clé vous est fournie par Google et dépend du nom de domaine où sera appelée l’API Google Maps.

Par exemple pour le nom de domaine renalid.com, la clé est :

ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A

Pour obtenir cette clé, accéder à cette page (un compte Google est aussi requis). Lisez les différentes remarques quant à l’utilisation de l’API, valider les notices légales et entrer le nom de domaine depuis lequel l’API sera appelée (cela peut bien sûr être localhost ou 127.0.0.1).

Attention si la clé n’est pas bonne vous ne pourrez pas utiliser l’API.

Un fois votre clé obtenue, Google vous fournit un exemple d’intégration de l’appel à l’API Google Maps.
La balise suivante doit se trouver dans le <HEAD> de toutes les pages qui inséreront les cartes Google Maps.

Par exemple :

<script xsrc="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A" mce_src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A"
type="text/javascript"></script>

Afficher une carte grâce à l’API Google Maps

D’abord il faut insérer dans votre page un <DIV> où sera inséré la carte Google Maps. Attribuer à ce <DIV> une taille et un id.

Par exemple :

<div id="map" style="width: 400px; height: 400px"></div>

Pour afficher une carte il est nécessaire d’instancier (de créer) un objet “carte” grâce à la class Gmap2().

En argument, vous devez passer le div (container) où vous souhaitez insérer la carte :

var map = new GMap2(document.getElementById("map"));

Ensuite, il faut indiquer à l’objet carte où elle doit se centrer en utilisant la méthode setCenter(). En argument vous devez indiquer les coordonnées géographiques (latitude x et longitude y ) à travers l’objet GLatLng() ainsi que le niveau d’échelle ainsi si besoin le type de carte.

map.setCenter(new GLatLng(48.881986, 2.420829), 10);

Et voilà, vous avez tout ce qu’il vous faut pour afficher une carte. En résumé, voici le script complet :

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script xsrc="http://maps.google.com/maps?file=api&v=2&key=abcdefg" mce_src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">

function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.881986, 2.420829), 13);
}

</script>
</head>
<body onload="load()">
<div id="map" style="width: 400px; height: 400px"></div>

</body>
</html>

Dans cet exemple, la création de la carte se fera lors du chargement complet de la page à travers la fonction load() pour éviter des problèmes de chargement.

Voici la première partie, d’autres vont suivre pour expliquer les intéractions possibles avec la carte. N’hésitez pas à laisser des commentaires! :-)