Aujourd’hui, très relayé à travers les sites internet, je suis tombé sur cet article qui permet d’exploiter des possibilités de rotation mélant jQuery et CSS3 afin de retourne les cartes affichées de Google Maps.

Bing Maps for Enterprise API - sample rotate map with jQuery

Ici cet article est simple, il a pour but de présenter la même méthode pour faire tourner une carte utilisant le contrôle AJAX de Bing Maps for Enterprise tout en présentant les nouvelles plateformes d’hébergement et de distribution de contenu de Microsoft déjà abordés dans un billet précédent.

 

Mise en pratique

Pour faire simple, la technique utilisée exploite directement les propriétés disponibles en CSS3 afin d’appliquer une rotation sur l’élement HTML correspondant au Map Control.

Utilisation des scripts :

Pour réaliser cet exemple, je récupère les exemples de code exposé dans l’article eux même provenant de cet excellent billet.

Ces derniers sont disponibles à travers ces liens :

Aussi, pour référencer la librairie JavaScript jQuery dans ma page, ainsi que le script du contrôle AJAX de Bing Maps, j’utilise le réseau de distribution de contenu mis en place par Microsoft autrement appelé le CDN : Content Delivery Network et l’ECN (Edge Caching Network) déjà présentés en fin d’un de mes anciens billet.

Ces deux scripts peuvent être référencés via ces adresses :

Plus d’informations sur les librairies JavaScript référençables et disponibles sur le CDN à travers le blog de Scott Gutthrie.

Définition du code de chargement de la carte :

Nous ajoutons ensuite du code JavaScript afin de gérer l’initialisation du MapControl :

var map;

function loadMap() {
    // Instanciate the control
    map = new VEMap('map');

    // Load the map
    map.LoadMap(new VELatLong(50.637547, 3.064642), 4, VEMapStyle.BirdseyeHybrid);

    // Attach events
    map.AttachEvent('onkeydown', keyDownOnMap);
}

Le chargement initialise la carte en style de vue oblique avec labels, plus d’informations sur les paramètres de chargement du mode de carte à travers cette page.

Association et gestion des événements de clavier :

On remarque l’utilisation de la méthode AttachEvent() de la classe VEMap au sein de la précédente méthode. On utilise cette méthode pour associer à un événement, une méthode de notre choix, keyDownOnMap() dans notre cas.

function keyDownOnMap(e) {
    // Override default key events with 'return true';
    if (e.keyCode == 76)        //L
    {
        rotateElements('+=5deg');
        return true;
    }
    else if (e.keyCode == 75)   //K
    {
        rotateElements('-=5deg');
        return true;
    }
}

Il est possible de changer de style de vue en appuyant sur les touches A, H, R, B… correspondant aux styles de vue habituels de Bing Maps.

Exécution et résultat :

A travers cette page, vous pouvez exploiter une page d’exemple de mise en oeuvre ou la rotation s’applique avec K et L, vous pouvez accèder librement au code source :

Rotation jQuery and CSS3 Bing Maps Control in bird eye view with labels  

Quelques points de détails

Cette démo fonctionne peu importe le contenu HTML, c’est la raison pour laquelle j’ai choisi de montrer qu’il ne s’agissait pas uniquement de l’utilisation pour l’API Google Maps, même s’il est vrai qu’associé à l’utilisation du mode Streetview, cela donne un résultat convaincant, très proche du comportement de la minimap du mode Streetside de Bing Maps.

On observe par contre quelques désagrément lié au navigateur, pour ma part lorsque je souhaite déplacer la carte à l’aide de la souris, j’observe un comportement qui ne tient pas compte de la rotation.

Il est à noter également que cette rotation n’est appliquable que sur certains navigateur supportant CSS3 et les propriétés utilisées ici : Firefox, Safari et Chrome doivent être compatibles (ici je test avec Firefox).

 

Améliorations

Dans le même esprit, j’ai voulu voir s’il était possible de créer un contrôle de rotation permettant de situer le Nord.

En utilisant cette petite image :

Rotation Indicator North - Bing Maps for Enterprise API

Je créé une simple DIV à laquelle j’appliquerai la même modification dans ma méthode rotateElements() :

function rotateElements(value) {
    $('#map').animate({ rotate: value }, 0);
    $('#rotateIndicator').animate({ rotate: value }, 0);
}

Et en exécution, voici le résultat accessible depuis ce lien, toujours avec les touches K et L :

Rotation jQuery and CSS3 Bing Maps Control in bird eye view with labels updated with canvas  

Conclusions

Dans le cadre de cette démonstration, l’intérêt d’une telle possibilité est tout de même discutable. En effet, dans le mode Streetview pour Google Maps ou Streetside pour Bing Maps, il est vrai qu’on y trouve un intérêt.

Par contre, il faudrait alors que les informations de labels soient extraites des tuiles qui composent la vue de façon à ce que ces mêmes labels soient toujours affichés afin de permettre la lecture. C’est une chose impossible pour le moment.

Cet article permet également d’introduire très brièvement jQuery et CSS3 pour exploiter le contrôle JavaScript de l’API Bing Maps, je reviendrai avec d’autres exemples à venir. A noter également que cette transformation est inclus de base dans le Bing Maps Silverlight Control directement accessible sur le portail Bing Maps en nouvelle version.