Je vous avais parlé précédemment ( cf article petite sélection de plugin jquery) d’un plugin jquery permettant de proposer un système de carte interactif, ce qui me pousse à vous le présenter un peu plus aujourd’hui.
jQuery Plugin for Zoomable Interactive Maps.
Le principe est simple : Vous avez un fond de carte de départ.
- Chaque fond de carte possède son fichier « joint », dans lequel vous pouvez y intégrer vos données via php (et donc connecté à MySQL ou XML) ou au format HTML en respectant un certain format.
- Chaque fond de carte a également la possibilité de « zoomer » vers un autre fond de carte, qui possède lui aussi son propre fichier joint.
Le mieux est pour vous de tester directement via ce lien de carte interactive (sur 2 niveaux, Europe et France). J’aurais pu créer 3 niveaux (ou 50 si j’en ai envie) (pour la région parisienne), mais c’est justement le point fort de jquery interactive maps !!
Il y a trois fichiers à éditer principalement :
- zoommap.css : la feuille de style qui va nous permettre de personnaliser le tout
- et les fichiers html dans le dossier popups, chaque fichier correspondant à un fond de carte, et qui permet de positionner des points sur la carte. C’est ici qu’on peut placer des fichiers php à la place des fichiers HTML, pour pour gérer sa carte de manière dynamique.
- setup.js : C’est ici qu’on entre les données des fonds de carte : on y indique pour chaque fond : le chemin de l’image du fond de carte, le fichier html correspondant à ce fond de carte, et les zones cliquables permettant d’accéder à des sous zone (passer de Europe à France par exemple)
Vous trouverez toutes les sources nécessaire sur cette page . Personnellement, je m’appuie beaucoup sur les exemples proposés en ligne, en m’appuyant sur le code source notamment.
Une alternative idéale à Google Maps
Il y a selon moi plusieurs avantages à utiliser ce système plutôt que Google Maps.
- Le premier est de ne pas utiliser l’API de Google, qui selon moi est une usine à gaz, et puis malgré tout l’amour que je porte à Google, je n’ai guère envie d’utiliser leur service pour proposer une carte intéractive. Car comme tout service gratuit, le jour où Google décide de changer les règles, les utilisateurs n’auront pas leur mot à dire. Alors certes il y a peu de chances qu’un tel soucis arrive, mais moins on utilise de service extérieur, et plus on est libre.
- Le second est d’avoir la possibilité d’utiliser ses propres fonds de carte. Ce qui permet, via un petit coup de Gimp, d’avoir sur le même écran la carte de la France (pour une recherche par département par exemple) avec à coté un zoom de la région parisienne. Cela ne paraît pas comme ça, mais cela peut éviter un clic aux visiteurs, et comme chacun le sait, le visiteur est feignant. Moins il clique, mieux il se porte ! C’est un point assez important, on retrouve parfois un sentiment de gène ou de confusion en zoomant sur Google Maps pour chercher un point précis. Avec ce module Jquery, on fixe les règles.
- Le troisième un peu accessoire dirons certains, c’est de pouvoir personnaliser ses propres fonds, chose qui n’est pas possible sur Google Maps (personnalisable uniquement au niveau des icônes). Ca permet d’ajouter une petite touche personnelle.
Alors bien entendu, il y a des défauts, mais selon moi ils sont moins importants. Au final, on a un système de carte interactive complètement personnalisable, moins contraignant que Google Maps si on se donne les moyens de fouiller un peu.
