Juin
19

Carte interactive en JQuery

Maphilight : Carte interactive

Voici un plugin JQuery plutôt sympa que j’ai utiliser récemment pour faire une carte interactive.

Ce plugin s’appelle Maphilight et permet de rentre une carte interactive, j’entends par là par exemple, une carte géographique (par exemple la France avec ses départements) ou les départements se mettent en évidence lors du survol ou du clic.

Pour faire fonctionner votre carte, vous aurez besoin de 3 choses :

  • Une image de ce que vous souhaitez rendre interactif (par exemple, la carte de France).
  • Une map area de la découpe de votre carte par département (il existe plein de logiciel pour en faciliter la création, par exemple Dreamweaver). Cette partie est la plus longue à mettre en place, car la découpe de l’image en area est proportionnel à la complexité de la carte que vous souhaitez animer. Dans notre exemple, chaque balise area représentera un département.
  • Enfin, le plugin javascript

Votre code HTML ressemblera à ça :

<img class="map" usemap="#carte" src="carteFrance.png" alt="" width="960" height="593" />
<map name="carte">
<area id="14" title="Calvados" shape="poly" coords="59,571, 55,573, 57,571, 50,570, 53,571" href="#" />
<area id="50" title="Manche" shape="poly" coords="53,571, 54,573, 56,571, 55,570, 53,571" href="#" />
<area id="61" title="Orne" shape="poly" coords="56,574, 57,571, 59,572, 58,574, 56,574" href="#" />
</map>

Ensuite, pour une utilisation de base, vous avez juste à faire un appel à la fonction suivante

        $(function() {
		$('.map').maphilight();
	})

Il est aussi possible de mettre en surbrillance une zone en particulier (pour cela il faut utiliser le plugin metadata)

        $(function() {
                //Met TOUJOURS en surbrillance le département Calvados, pour cela on modifie une propriété grace à la fonction data et le plugin metadata
		var data = {};
                data.alwaysOn = true;
                $('#14').data('maphilight', data).trigger('alwaysOn.maphilight');
 
                //Met temporairement le département de la Manche en surbrillance, lors du survol de la carte la surbrillance disparaitra
               $('#50').mouseover();
	})

On peut donc mettre en surbrillance via des événements, comme un clique sur un lien par exemple. Voici quelques exemples présent sur le site du plugin



2 Comments to “Carte interactive en JQuery”

  • Grégoire Lemaire 22 juin 2011 à 9 h 46 min

    Sympa ! je cherchais justement une alternative à shape hover de mootools en jquery 😉 seulement comment faire pour activer un custom info bulles sur les onMouseOver ?

  • Appo 22 juin 2011 à 10 h 14 min

    Je pense que tu peux essayer de partir de l’exemple qu’il donne sur son site et faire un truc du genre.

    $('.departement').mouseover(function(e) {
    $(this).mouseover();
    //APPEL DE TA FONCTION INFOBULLE

    }).mouseout(function(e) {
    $(this).mouseout();
    })

Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes