Créer des cartes responsive avec Mapael.js

Comment créer des cartes avec mapael.js

Mapael est l’une des nombreuses librairies js pour réaliser des cartes. La librairie fonctionne avec des cartes svg et repose elle même sur Raphael.js et jquery. Cette bibliothèque permet de créer des cartes cliquables assez rapidement, en étant en plus compatible avec la plupart des navigateurs.

Télécharger une carte svg

Mapael dispose de sa propre liste de carte prêtes à l’emploi. Si vous ne trouvez pas votre bonheur sur le site officiel, vous pouvez en fait télécharger n’importe quelle carte au format svg.

Convertir sa carte SVG au format mapael

Sur cette page, l’auteur donne les pistes pour créer et convertir sa propre carte svg. Autrement, le site dispose d’un outil en ligne bien pratique qui convertira votre carte pour mapael.

Une fois converti, téléchargez le fichier de votre carte, renommez le comme vous voulez et insérer le dans votre projet, en pensant bien à relier les élements entre eux.

Installer Mapel dans son projet

Entre les balises head, voici un exemple d’appel de scripts. Dans mon projet, j’appelle entre autre, le fichier france_map.js, téléchargé depuis l’outil de conversion en ligne. Vous pouvez ensuite télécharger jquery, raphael et mapael directement dans votre projet

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
    <script src="js/raphael.min.js" charset="utf-8"></script>
    <script src="js/jquery.mapael.js" charset="utf-8"></script>
	 <script src="js/europe.js" charset="utf-8"></script>
    <script src="js/france_departements.js" charset="utf-8"></script>
	<script src="js/france_map.js" charset="utf-8"></script>
    <script src="js/jquery.connections.js"></script>

Vous pouvez aussi charger mapael, raphael et jquery depuis les CDN, comme par exemple:

< script  src = " //cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.2.0/js/jquery.mapael.min.js " > </ script >
< script  src = " //cdn.jsdelivr.net/npm/jquery-mapael@2.2.0/js/jquery.mapael.min.js " > </ script >

Ici, je charge également jquery.connection.js qui va me servir à créer des lignes de liaison entre les éléments de ma carte.

Un exemple d’intégration

Pour ma carte, je vais afficher ma première carte de France. Dans ce qui pourrait être une sidebar, j’insères deux cercles pour simuler un zoom sur les régions Île-de-France et Rhône-Alpes. En fait ici je fait appel à une deuxième carte svg, france_departement, qui va me permettre d’afficher ces deux régions avec un zoom sur les départements ciblés. Au niveau de la base de la carte, je vais créer des filtres personnalisés pour qu’au clic, les marqueurs correspondant à chaque catégorie soient mis en avant. On bypass donc ici le comportement par défaut du plugin, dans lequel on doit normalement jouer sur l’attribut « value » des filtres pour faire correspondre les couleurs des filtres à ceux des marqueurs. Un exemple plus parlant se trouve ici.

Dans mon exemple je vais utiliser jquery pour simuler ce comportement en ciblant les classes qui ont telle ou telle couleur.

Pour la partie html donc, c’est assez simple. Je crée un conteneur avec à gauche ma carte de France avec la classe map_cc-france, et à droite mes deux cercles avec les classes region_cc_idf et region_cc_ra  . 

<div class="map_cc-container">
  <div class="map_cc-row">
    <div class="map_cc-france"  id="div1">
      <div class="map">
        <span>Alternative content for the map</span>
      </div>
    </div>


    <div class="map_cc-sidemap">
      <div class="region_cc_idf" id="idf">
        <div class="map">
          <span>Alternative content for the map</span>
        </div>
      </div>  
      <div class="region_cc_ra" id="ra">
        <div class="map">
          <span>Alternative content for the map</span>
        </div>
      </div>
    </div>
  </div>

  <div class="map_cc-row features">

    <div class="feature_cc-production">
      <h3><span class="cc_big">18</span> <span class="cc_title">Sites <br/>de production</span></h3>
    </div>
    <div class="feature_cc-rd">
      <h3><span class="cc_big">6</span> <span class="cc_title">sites <br/>de R&D</span></h3>
    </div>
    <div class="feature_cc-distribution">
      <h3><span class="cc_big">5</span> <span class="cc_title">plateformes <br/>de distribution</span></h3>
    </div>
    <div class="feature_cc-tertiaire">
      <h3><span class="cc_big">6</span> <span class="cc_title">sites <br/>tertiaires</span></h3>
    </div>
    <div class="feature_cc-domtom">
      <h3><span class="cc_big">4</span> <span class="cc_title">bureaux <br/>outre-mer</span></h3>
    </div>
  </div>

</div>

A l’intérieur de chaque conteneur, comme indiqué dans la doc officielle, il est recommandé de prévoir une alternative si jamais la carte ne se charge pas. C’est la mention « Alternative content for the map » dans le code.

Ecrire la fonction js

Ensuite, pour que notre carte fonctionne il faut dans un fichier js à part écrire toute notre fonction js mapael.

Pour commencer, à l’intérieur d’une fonction on instancie la carte

 $(function () {
            $(".map_cc-france").mapael({

Ensuite ,  à l’intérieur de la fonction map, on va définir les paramètres par défaut de la carte : le nom de notre carte, le niveau de zoom, les paramètres des marqueurs, appelés ici Plots, et enfin les paramètres par défaut de la zone globale de la carte.

   map: {
                    name: "france_map"
                      // Enable zoom on the map
                    , zoom: {
                        enabled: true,
                        maxLevel: 10
                    }
                    // Set default plots and areas style
                    , defaultPlot: {
                        attrs: {
                            fill: "#004a9b",
                            opacity: 0.3
                        },
                        attrsHover: {
                            opacity: 1
                        },
                        text: {
                            attrs: {
                                fill: "#505444"
                            },
                             attrsHover: {
                                fill: "#000"
                            }
                        }
                    },
                    defaultArea: {
                        attrs: {
                            fill: "#f4f4e8"
                            , stroke: "#ced8d0"
                        },
                        attrsHover: {
                            fill: "#f4f4e8"
                        },
                        text: {
                            attrs: {
                                fill: "#505444"
                            }
                            , attrsHover: {
                                fill: "#000"
                            }
                        }
                    }
                    
                },

Vous pouvez retrouver toutes les options sur la doc officielle. Chaque élément possède ses attributs et ses attributs au survol : attrs:  et attrsHover:

Définissez ensuite tous les paramètres particulier pour chaque marqueur :

 plots: {
                 
                    // Circle plot
                    'Amily': {
                        type: "circle",
                        size: 15,
                        latitude: 47.9778853,
                        longitude: 2.7673117,
                        value: "3",
                        tooltip: {content: "<span style=\"font-weight:bold;\">Amily (45)</span>"},
                        text: {content: "Amily (45)"},
                            attrs: {
                            fill: "#f47521",
                            stroke: "#f47521"
                        },
                        attrsHover: {
                            fill: "#f47521",
                             stroke: "#f47521"
                        }
                    },
......
}

On peut définir ici une taille, la couleur, la longitude et lattitude, les effets au survol. On peut rajouter du texte (text) qui sera affiché sur la carte ou seulement au survol (tooltip) sur le marqueur.

Dans mon exemple, j’enchaîne avec ma deuxième carte mapael « france_departement« , pour mes deux cercles censés simuler un zoom.

  var $map_cc_france2 = $(".region_cc_idf");
            $map_cc_france2.mapael({
                map: {
                    name: "france_departements",

....etc

Pour l’île de France, je ne vais pas recharger toute la carte de france et ses départements, mais seulement ceux qui m’intéressent.

 areas: {
                    "department-75": {
                         text: {content: "75", attrs: {"font-size": 3}},
                    },
                     "department-77": {
                         text: {content: "77", attrs: {"font-size": 3}},
                    },
                    "department-78": {
                         text: {content: "78", attrs: {"font-size": 3}},
                    },
                    "department-93": {
                         text: {content: "93", attrs: {"font-size": 3}},
                    },
                     "department-92": {
                         text: {content: "92", attrs: {"font-size": 3}},
                    },
                      "department-91": {
                         text: {content: "91", attrs: {"font-size": 3}},
                    },
                      "department-94": {
                         text: {content: "94", attrs: {"font-size": 3}},
                    },
                      "department-95": {
                         text: {content: "95", attrs: {"font-size": 3}},
                    }
                },

Pareil pour mon cercle des départements de la région Rhône Alpes.

 var $map_cc_france3 = $(".region_cc_ra");
            $map_cc_france3.mapael({
                map: {
                    name: "france_departements",

J’utilise donc ici la même carte des département, mais je cible ici le département 69.

       areas: {
                    "department-69": {
                         text: {content: "69", attrs: {"font-size": 3}},
                    },
                },

Mon jquery est ensuite assez basique,je cible les éléments en fonction de leur couleur.

        $(".feature_cc-tertiaire").click(function() {
            $(this).toggleClass('active');
            $(this).siblings().removeClass('active');
            $('svg circle').not($('svg circle[fill="#f47521"]')).removeClass('active-circle');
            $('svg circle[fill="#f47521"]').toggleClass("active-circle");
        });

        $(".feature_cc-rd").click(function() {
            $(this).toggleClass('active');
            $(this).siblings().removeClass('active');
            $('svg circle').not($('svg circle[fill="#e30d76"]')).removeClass('active-circle');
            $('svg circle[fill="#e30d76"]').toggleClass("active-circle"); 
        });

        $(".feature_cc-distribution").click(function() {      
            $(this).toggleClass('active');
            $(this).siblings().removeClass('active');
            $('svg circle').not($('svg circle[fill="#02b196"]')).removeClass('active-circle');
            $('svg circle[fill="#02b196"]').toggleClass("active-circle");   
        });

        $(".feature_cc-production").click(function() {    
            $(this).toggleClass('active');
            $(this).siblings().removeClass('active');
            $('svg circle').not($('svg circle[fill="#4a63ae"]')).removeClass('active-circle');
            $('svg circle[fill="#4a63ae"]').toggleClass("active-circle");     
        });
    
            $('circle[data-id="paris"]').connections({ to: '#idf', css: { border: '2px dotted #4a63ae',opacity: 0.5}});
            $('circle[data-id="lyon"]').connections({ to: '#ra', css: { border: '2px dotted #4a63ae',opacity: 0.5}});
            var c = $('connection');
            setInterval(function() {
            c.connections('update');
            });
 });

 

Voici le codepen final pour mieux visualiser la carte. Cliquez sur le bouton 0.5X pour voir la version desktop directement dans la fenêtre.

See the Pen
Mapael Customized Responsive France map by yuyazz (@yuyazz)
on CodePen.

Une carte de l’Europe

Et voici en bonus, la même, mais avec la carte de l’Europe en arrière plan. Ici les marqueurs sont mis en évidence au survol sur les filtres et non plus au clic. Le principe sinon ici est le même, j’utilise une carte d’Europe et une autre des départements français. Cliquez sur le bouton 0.5X pour voir la version desktop directement dans la fenêtre.

See the Pen
Mapael Responsive Europe customized Map by yuyazz (@yuyazz)
on CodePen.

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

Mis à jour le Par Copier coller | Dans jQuery