CraftMap - Convertir des images en cartes interactives avec jQuery

CraftMap est un plugin jQuery permettant de créer des cartes interactives à partir d'une simple image.

Il peut être utile de présenter sous forme de carte interactive avec des marqueurs une simple image: Une image de centre commercial par exemple, ou encore une image de station de ski...

Grâce à ce plugin jQuery, vous aurez la possibilité de rendre votre image interactive, et les utilisateurs pourront la parcourir et obtenir des informations sur les différents points marqués sur cette dernière.

Le plugin est relativement léger, 6kb, et dispose d'un bon nombre d'options pour vous permettre de créer la carte qui vous convient:

• Map en fullscreen ou non
• Se rappeler de la position du visiteur avec un cookie
• Positionnement de la carte
• Menu de navigation à travers les marqueurs
• Définition des marqueurs à positionner et leur contenu
• Etc

Différents callback sont disponibles pour vous permettre une optimisation du chargement des images etc.

Voici un exemple parlant de code pour utiliser le plugin:

            <div class="demo1">
                <img src="world_map.jpg" class="imgMap" />
                <div class="marker" id="france" data-coords="960, 390">
                    <h3>France</h3>
                    <p>France, officially the French Republic. It is the largest west-European country and possesses second-largest Exclusive Economic Zone in the world.</p>
                    <a href="http://en.wikipedia.org/wiki/France">http://en.wikipedia.org/wiki/France</a>
                </div>

                <div class="marker" id="russia" data-coords="1240, 260"> <!-- 1240, 260 -->
                    <h3>Russia</h3>
                    <p>Russia,  officially known as both Russia and the Russian Federation is a country in northern Eurasia. It is a federal semi-presidential republic, comprising 83 federal subjects.</p>
                    <a href="http://en.wikipedia.org/wiki/Russia">http://en.wikipedia.org/wiki/Russia</a>
                </div> 
                <div class="marker" id="poland" data-coords="1045, 345">
                    <h3>Poland</h3>

                    <p>Poland, officially the Republic of Poland. The total area of Poland is 312,679 square kilometres (120,726 sq mi),[2] making it the 69th largest country in the world and the 9th largest in Europe.</p>
                    <a href="http://en.wikipedia.org/wiki/Poland">http://en.wikipedia.org/wiki/Poland</a>
                </div>  

            </div>
            <div class="controls">
                <a href="#" rel="france">France</a>
                <a href="#" rel="russia">Russia</a>
                <a href="#" rel="poland">Poland</a>
            </div>

On défini en HTML les différents marqueurs à placer sur l'image que l'on va transformer en carte, identifiée par la classe imgMap.

Puis, nous initialisons basiquement le plugin jQuery ainsi:

    $('.demo1').craftmap({
        image: {
            width: 1994,
            height: 1303
        }
    });

Toutes les options et callbacks sont présentés sur la page de la ressource.

Le plugin est gratuit pour une utilisation personnelle.

Site officiel