Il était une fois Bing Map, construisons notre carte avec l’API. Une bonne alternative à Google Map.

Pour implanter une carte sur nos sites web, on connait tous Google Map. Malgré la qualité des cartes de Bing, ces dernières restent peu utilisées. Elles sont pourtant légères et très rapide. Nous allons donc voir comment utiliser l’API (v7) pour construire notre carte et y ajouter un peu de dynamisme.

Pourquoi Bing Map ? Car j’ai eu besoin de travailler à travers du HTTPS, avec Gmap il faut passer par la caisse (et ce n’est vraiment pas donné). Bing permet l’édition à travers HTTPS gratuitement. 

Obtenir une clé d’API Bing (c’est gratuit hein)

On ne part pas faire une ballade en vélo sans gonfler ses pneu, donc il nous faut une clé d’API pour se lancer (ou alors il faut être fan des gros messages Microsoft qui te disent tu n’as pas de clé d’API). Il vous faut un compte Hotmail (enfin live quoi), ensuite rendez-vous à cette adresse : Bing Maps Account.

*

Une fois connecté, voilà la page qui s’affiche avec tous les détails. Pour créer sa clé il suffit d’aller dans le menu (regardez la flèche) Create or view keys. Vous allez ensuite obtenir rapidement une clé d’API du genre :

(Cette clé a été conçu pour la démonstration. ;) Créez la vôtre si vous utilisez Bing, c’est simple à faire et gratuit.)

Créons notre première carte

Une première map Simple

Pour pouvoir utiliser la map nous allons devoir la charger depuis les serveurs de Microsoft :

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

/*
		Clé API : AtZVaPeWtqEJ7xglZZZ6WZJkMihxHRlweOWszXf0Oh7kf7SEQz1qT-jCDlGw9UAW
		AppName : BingoMap
	*/
	// Point d'origine pour la carte, on centre dessus
	var origin = new Microsoft.Maps.Location(45.7990216960769, 1.8579740063175754);
	var originDecal = new Microsoft.Maps.Location(45.818166953460896, 1.8923062817082004);
	
	//Clé d'API
	var credentials = 'AtZVaPeWtqEJ7xglZZZ6WZJkMihxHRlweOWszXf0Oh7kf7SEQz1qT-jCDlGw9UAW';

	//Map 1
	map = new Microsoft.Maps.Map(document.getElementById('map'), {
			credentials: credentials,
			mapTypeId : Microsoft.Maps.MapTypeId.road,
			center: origin,
			zoom : 12,
			width : 300,
			height : 300,
			showScalebar : false,
			showDashboard : false,
			showLogo : true,
			showCopyright : false,
			enableSearchLogo : false
			});

Vient ensuite le JS.

 Dans ce JavaScript nous pouvons voir quelques éléments:

1. creditentials : Notre clé d'API Bing
2. mapTypeId: Le type de carte (satelite &co ici, routière)
3. center : Centre de la carte (ici Vassivière dans le limousin)
4. zoom: Le zoom de la carte (+ grand = zoom fort)
5. width: La taille de la carte en largeur
6. height: La hauteur de la map
7. shwoScalebar : Afficher ou non l'échelle
8. showLogo : Afficher le logo de Bing
9. showCopyrigt : Comme son nom l'indinque
10. enableSeachLogo: Au survol du logo ça affiche un champ de recherche bing

            Une Map un peu plus avancée avec un marqueur

//Map 2
	map2 = new Microsoft.Maps.Map(document.getElementById('map2'), {
			credentials: credentials,
			mapTypeId : Microsoft.Maps.MapTypeId.road,
			center: origin,
			zoom : 12,
			width : 300,
			height : 300,
			showScalebar : false,
			showDashboard : false,
			showLogo : true,
			showCopyright : false,
			enableSearchLogo : false
			});
	
    
    // On initialize notre marqueur        
    var pin = new Microsoft.Maps.Pushpin(origin); 
    // On l'accroche à notre carte
    map2.entities.push(pin);

 Ici comme expliqué en commentaire,  on va afficher un marqueur sur la carte à un point précis qui par un curieux hasard est aussi le centre de la carte. Incroyable non ;) ?

Démo exemple 2

            Une Map avec un évènement drag et icone

//Map 3
    map3 = new Microsoft.Maps.Map(document.getElementById('map3'), {
			credentials: credentials,
			mapTypeId : Microsoft.Maps.MapTypeId.road,
			center: origin,
			zoom : 12,
			width : 300,
			height : 300,
			showScalebar : false,
			showDashboard : false,
			showLogo : true,
			showCopyright : false,
			enableSearchLogo : false
			});
	
	// On ajoute des options, image taille décalage et drag
    var pin3 = new Microsoft.Maps.Pushpin(
			origin,
			{
				icon:"pins.png",
				height:50,
				width:50,
				anchor:new Microsoft.Maps.Point(0,50),
				draggable: true
			}); 
	
	map3.entities.push(pin3);

 Pour cet exemple comme décrit, j'affiche la carte ainsi quune icone. Je donne une taille à l'icone, la place bien et la rend draggable.

Seul soucis au zoom l'icone se balade... Elle ne reste pas fixe. Je n'ai pas creusé le problème mais, il semblerait que l'erreur soit de type normale. C'est à dire un produit issu de chez Microsoft (trollons nous dans les bois, pendant que le loup n'y est pas).

Démo Exemple 3

            Une Map avec evenement drag et action

	//Map 4
	map4 = new Microsoft.Maps.Map(document.getElementById('map4'), {
			credentials: credentials,
			mapTypeId : Microsoft.Maps.MapTypeId.road,
			center: origin,
			zoom : 12,
			width : 300,
			height : 300,
			showScalebar : false,
			showDashboard : false,
			showLogo : true,
			showCopyright : false,
			enableSearchLogo : false
			});

	// Retrieve the location of the map center 
    var center = map4.getCenter();
            
    // Add a pin to the center of the map
    var pin4 = new Microsoft.Maps.Pushpin(
			center,
			{
				draggable: true
			}); 
	
	map4.entities.push(pin4);
	
	//Evenement au drag
    Microsoft.Maps.Events.addHandler(pin4, 'dragend', displayEventInfo);
	function displayEventInfo(e) {
		alert("Nous sommes au point de latutude : " +e.entity._location.latitude+ "et de longitude : "+e.entity._location.longitude);
        console.log(e.entity._location.latitude);
		console.log(e.entity._location.longitude);
    }

Ici nous affichons la même carte, mais cette fois nous écoutons ce qui se passe au niveau du marqueur pin4, nous utilions une fonction de l'API qui nous permet de l'écouter sur un évenement, ici dragend c'est à dire: Une fois que l'on déplace (drag), c'est le moment ou l'action se termine. Ensuite on a une fonction qui récupère l'objet avec toutes ses caractéristiques. Ici je renvois la position.

Démo exemple 4

            Une Map avec infobox

//Map 5
	map5 = new Microsoft.Maps.Map(document.getElementById('map5'), {
			credentials: credentials,
			mapTypeId : Microsoft.Maps.MapTypeId.road,
			center: originDecal,
			zoom : 12,
			width : 500,
			height : 300,
			showScalebar : false,
			showDashboard : false,
			showLogo : true,
			showCopyright : false,
			enableSearchLogo : false
			});

            
   // Le marqeur
    var pin5 = new Microsoft.Maps.Pushpin(origin); 
	// Une bulle d'info
	var infobox = new Microsoft.Maps.Infobox(origin, {title: 'Ou est charlie ?', visible:false, offset:new Microsoft.Maps.Point(0,35)});
	// On affiche ou cache au survol la popin
    Microsoft.Maps.Events.addHandler(pin5, 'mouseover', showInfobox);
    Microsoft.Maps.Events.addHandler(pin5, 'mouseout', hideInfobox);

    function showInfobox(){infobox.setOptions({visible:true});}
    function hideInfobox() {infobox.setOptions({visible:false});}

    // On ajoute le marqueur et la bulle
    map5.entities.push(pin5);
    map5.entities.push(infobox);
	
	// On personnalise le contenu de l'infobox
	infobox.setHtmlContent('Hop hop hop');

 Dans cet exemple on ajoute un marqueur et on lui colle dessus (en fait on localise l'infobulle au même coordonnées), une infobulle. On écoute 2 évènements ensuite, le survol de la souris. Quand elle entre et sort du marqueur. Quand elle entre on déclanche showInfobox qui va afficher l'infobox (caché par défault), et hideInfobox qui cache quand la souris quitte le pushpin.

On aurait aussi pu écouter le click, sur notre marqueur pin5.

Démo de l'exemple

      Ce que l'on doit retenir:

1. Initialiser la carte: new Microsoft.Maps.Map 
2. Déclarer un marqueur new Microsoft.Maps.Pushpin
3. Attacher un élément à une map map5.entities.push(pin5); (map5 est ici la map et pin5 l'élement à ajouter).
4. Ajouter une infoBox new Microsoft.Maps.Infobox
5. Ecouter un évenement sur un élément Microsoft.Maps.Events.addHandler

C’est bien beau, mais que faire avec ?

Bah comme ce que vous faites avec Google Map. Après on peut réfléchir à des usages bien plus poussé. C’est ce que je fais au travail, par exemple je récupère via l’API de Bing les coordonnées de mon adresse avant l’appel de ma map, ensuite j’initialise la map. Le tout éditable&co. On peut aussi customiser la map à sa façon, comme par exemple mettre des boutons de Zoom.

Pour le moment je reste assez vague, mais c’est voulu. Le but de ce tutoriel est de découvrir la map et de savoir s’en servir avec les event. Avec ces quelques exemples on peut faire beaucoup de choses.

Je pousserais plus loin le bouchon dans un prochain tutoriel, sur le plugin jQuery que j’ai mis au point pour Bing Map. Il exploite l’API et je vous montrerai comment jouer avec.

Le lien de la documentation de l'API (en anglais)