Discussion :

[artenis]

Bonjour,
malgré la grande documentation de Raphael sur Mapael, je n'arrive pas à paramétrer le code pour fixer (empêcher la fenêtre de bouger au mouvement de la souris sur un département) la fenêtre d'information "tooltip" afin que les liens insérer à l'intérieur soit cliquable .

Merci à celui qui pourra m'indiquer la fonction à utiliser pour rendre cela possible.

[NoSmoking]

Bonjour,
inspire toi de cet exemple : Use the 'eventHandlers' option to display information about plotted cities in a div on mouseover.

[artenis]

Merci beaucoup, NoSmoking, je vais tester cette façon de faire, toutefois je cherchais quelques chose de plus simple pour l'utilisateur .
Stopper l'animation de déplacement horizontal et vertical du Tooltip au survol de la souris et que ce tooltip s'affiche au bas du département quel que soit la position de la souris sur le département.
Il faudrait également supprimer l'offset je crois .
Evidemment, La doc indique qu'on peut tout faire avec jquery, mais 1) je suis pas un pro et 2) j'aurai espéré que des fonctions déjà existantes permettait cela puisqu'on peut mettre des liens dans les tooltip.
J'ai pas réussi à contacter son développeur.

[artenis]

Voici mon test qui ne marche pas et où je ne trouve pas l'erreur.
la seule différence est que j'affiche la carte grâce à un shortcode en php dans functions.php pour Wordpress :
Le texte de "myText" que j'ai repris de la demo (censé afficher un texte par défaut et changer lorsque la souris est placé sur un département ne change pas lorsque la souris est placé sur un "tooltip".
N'ayant toujours pas pu expérimenter ceci, je voudrais m'assurer que les liens "a href" peuvent bien être insérés dans cette div.
merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
            charset="utf-8"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/neveldo/jQuery-Mapael/1.1.0/js/jquery.mapael.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/neveldo/jQuery-Mapael/1.1.0/js/maps/france_departments.js"></script>
 <script src="../../js/maps/world_countries.js" charset="utf-8"></script>
 <script src="../../js/maps/usa_states.js" charset="utf-8"></script>
  <script>
    var itmap = jQuery.noConflict();
    itmap(function() {
  itmap(".mapcontainer").mapael({
    map: {
      name: "france_departments",
      defaultArea: {
        attrs: {
          stroke: "#fff",
          "stroke-width": 1,
          fill:"#0d6bdc"
        },
        defaultPlot: {
                        size: 30,
                        eventHandlers: {
                            mouseover: function (e, id, mapElem, textElem, elemOptions) {
                                if (typeof elemOptions.myText != 'undefined') {
                                    itmap('.myText span').html(elemOptions.myText).css({display: 'none'}).fadeIn('slow');
                                }
                            }
                        }
                    },
        attrsHover: {
          fill: "#cccccc"
        }
      }
    },
 
    areas: {
      "department-31":{
    attrs : {fill : "#488402"},
    href: "http://www.cnecj.org/cnejc",
    tooltip: {content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Toulouse (31)</span><br /> Michel DELMAS <br/> Louis LOZAR "
        },
    myText:"Nouveau test"
      },
     "department-33":{
    attrs : {fill : "#488402"},
    href: "http://www.cnecj.org/cnejc",
    tooltip: {content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Bordeaux (33)</span><br /> Philippe DUTEIL "
        },
    myText:"Nouveau test"
      },
    "department-34":{
    attrs : {fill : "#488402"},
    href: "http://www.cnecj.org/cnejc",
    tooltip: {content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Montpellier (34)</span><br /> Philippe DEWEVRE"
        },
    myText:"Nouveau test"
      },
 
      "department-44":{
    attrs : {fill : "#488402"},
    href: "http://www.cnecj.org/cnejc",
    tooltip: {content: "Cours d'appel :<br /><span style=\"font-weight:bold;\">Nantes (44)</span><br /> Jean-Louis DUSSAUX"
        },
    myText:"Nouveau test"
      },
 
      "department-75": {
    		attrs : {
					fill : "#488402"
				},
        href: "http://www.cnecj.org/cnejc",
        tooltip: {
          content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Paris (75)</span><br />Lionel BRUNET <br /> Paolo BRUNO  <br /> Jean-Luc CECILE <br /> Simon CHOUMER <br /> Michel CHRISTEN <br /> Valérie CORIZZI <br /> Sylvain-Romain COTTE <br /> Pascal DOPPELT <br /> Alexandre FLEURENTIN <br /> Jacques FRAISSARD <br /> Claude GENTY <br /> Sarah GIAMI <br /> Didier GRASS <br /> Claude LION <br /> Anne MERCKLING <br /> Lucien MOUILLET <br /> Jean-Louis MULTON <br /> Jean PEDELABORDE <br /> Stéphane PIRNAY <br /> Benoît PIRO <br /> Patrice SAINTHERANT <br />Mongy SAKLY <br /> Jean VAREILLE <br /> Violaine de VILLEMEREUIL"
        },
    myText:"Nouveau test"
      },
      "department-76": {
    		attrs : {fill : "#488402"},
        href: "http://www.cnecj.org/cnejc",
        tooltip: {content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Rouen (76)</span><br /> Richard FLAUGNATTI <br /> Yvon GERVAISE <br /> Jean PARREIN"},
    		myText:"Nouveau test"
    		},
 
      "department-78": {
    		attrs : {
					fill : "#488402"
				},
        href: "http://www.cnecj.org/cnejc",
        tooltip: {
          content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Versailles (78)</span><br /> Mireille DEFRANCESCHI <br /> Christiane MAJCHERCZYK TOUZAIN "
 
        },
    myText:"Nouveau test"
      },
    	"department-80": {
    		attrs : {
					fill : "#488402"
				},
        href: "http://www.cnecj.org/cnejc",
        tooltip: {
          content: "Cours d'appel : <br /><span style=\"font-weight:bold;\">Amiens (78)</span><br /> Patrice Sainthérant "
        },
    myText:"Nouveau test"
      },
 
		}
  });
});
    </script>

[NoSmoking]

La vision que j'en ai est de purement et simplement passer outre les « tooltip » du plugin.

Dans l'exemple que j'ai cité plus haut il modifie le contenu de la <div class="myText"> au survol et c'est ce à quoi je pensais, il faudra bien sûr modifier la position fonction de l'élément survolé.

Pour mouvoir cette <div> il faut que celle ci soit en position:absolute et par le fait le conteneur, <div class="mapcontainer">, en position:relative pour pouvoir servir de référent.

Pour le positionnement de la <div id="bulle">, ajoutée par le script, c'est un peu plus « sioux » mais pas insurmontable, il faut tenir compte de plusieurs facteurs que je ne décris pas là mais que j'ai commenté dans l'exemple. Le positionnement sera fait par rapport au centre de l'élément survolé.

Les données utilisées pourraient ressembler, selon ton code, à cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
'department-31': {
  attrs: {
    fill: "#488402"
  },
  infoBulle: {
    'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Toulouse (31)</span><br /> Michel DELMAS <br/> Louis LOZAR'
  }
},

dans 'content' tu peux mettre du code HTML donc des liens.

L'exemple à tester pour voir ce que cela donne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>infoBulle avec Raphael Map</title>
<meta name="Author" content="NoSmoking">
<meta name="description" content="Affichage de ses propres « infoBulles » en utilisant le plugin jQuery Mapael">
<style type="text/css">
body {
  font: 1em/1.25 Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
h1 {
  color: #069;
}
.main {
  max-width: 60em;
  margin: auto;
}
.section {
  margin: 0 2em 1em;
}
.mapcontainer {
  padding: 0;
  max-width: 40em;
  border: 10px solid #FFF;
  box-shadow: 0 0 2px #ABC;
}
.mapael .map {
   position: relative;
}
#bulle {
  position: absolute;
  left: -999em;
  padding: .5em;
  min-width: 10em;
  font: .8em/1.25em Verdana,Arial;
  background: rgba( 255,255,255,.95);
  text-align: center;
  cursor: pointer;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #888;
}
#bulle h1 {
  margin: -.2em;
  padding: .25em;
  font-size: 1.25em;
  color: #FFF;
  background: #069;
  background-image: -moz-linear-gradient(top, #287bbc 0%,#23639a 100%);  
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/neveldo/jQuery-Mapael/2.1.0/js/jquery.mapael.js" charset="utf-8"></script>
<script src="https://rawgit.com/neveldo/jQuery-Mapael/2.1.0/js/maps/france_departments.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
  // init du conteneur
  var oConteneur = $('.mapcontainer').css({'position' : 'relative'}); // pour servir de référent
  // ajout d'une infoBulle au conteneur
  $('<div id="bulle"></div>')
    .appendTo(oConteneur)
    .on('mouseleave', function() {
      $(this).css({
        left: "-999em"
      });
    });
  // création de la map
  oConteneur.mapael({
    map: {
      name: 'france_departments',
      zoom: {
        //enabled: true
      },
      defaultArea: {
        attrs: {
          'fill': '#0d6bdc',
          'stroke': '#99c7ff',
          'stroke-width': 0.1,
          'cursor': 'pointer'
        },
        attrsHover: {
          'fill': '#CDE'
        },
        eventHandlers: {
          mouseover: function(e, id, mapElem, textElem, elemOptions) {
            // efface l'infoBulle
            $('#bulle')
              .hide()
              .empty()
              .css({
                left: '-999em'
              });
 
            // affichage si présente
            if (elemOptions.infoBulle && elemOptions.infoBulle.content) {
              // calcul rapport pour position affichage
              var oSVG = mapElem.node.viewportElement;
              var coeffX = oSVG.width.animVal.value / oSVG.viewBox.animVal.width;
              var coeffY = oSVG.height.animVal.value / oSVG.viewBox.animVal.height;
              var offsetX = oSVG.viewBox.animVal.x;
              var offsetY = oSVG.viewBox.animVal.y;
 
              // dimension élément
              var dim = mapElem.getBBox();
 
              // calcul position de l'infoBulle
              var pos = {
                x: (dim.cx - offsetX) * coeffX,
                y: (dim.cy - +offsetY) * coeffY
              };
              // init de l'infoBulle
              $('#bulle')
                .html(elemOptions.infoBulle.content)
                .css({
                  left: pos.x,
                  top: pos.y
                })
                .fadeIn();
            }
          }
        }
      }
    },
    areas: {
      'department-38': {
        attrs: {
          fill: "#48FF02"
        },
        infoBulle: {
          'content': '<h1>Rien à voir !</h1><p>C\'est juste pour montrer que l\'on peut intégrer du code <b>HTML</b></p><img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt="une image"><br><a href="https://www.developpez.net/forums/u405341/nosmoking/" target="_blank">NoSmoking</a>'
        }
      },
      'department-31': {
        attrs: {
          fill: "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Toulouse (31)</span><br /> Michel DELMAS <br/> Louis LOZAR'
        }
      },
      'department-33': {
        attrs: {
          fill: "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Bordeaux (33)</span><br /> Philippe DUTEIL'
        }
      },
      'department-34': {
        attrs: {
          fill: "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Montpellier (34)</span><br /> Philippe DEWEVRE'
        }
      },
      'department-75': {
        attrs: {
          fill: "#48FF02"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Paris (75)</span><br />Lionel BRUNET <br /> Paolo BRUNO  <br /> Jean-Luc CECILE <br /> Simon CHOUMER <br /> Michel CHRISTEN <br /> Valérie CORIZZI <br /> Sylvain-Romain COTTE <br /> Pascal DOPPELT <br /> Alexandre FLEURENTIN <br /> Jacques FRAISSARD <br /> Claude GENTY <br /> Sarah GIAMI <br /> Didier GRASS <br /> Claude LION <br /> Anne MERCKLING <br /> Lucien MOUILLET <br /> Jean-Louis MULTON <br /> Jean PEDELABORDE <br /> Stéphane PIRNAY <br /> Benoît PIRO <br /> Patrice SAINTHERANT <br />Mongy SAKLY <br /> Jean VAREILLE <br /> Violaine de VILLEMEREUIL'
        }
      },
      'department-76': {
        attrs: {
          fill: "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Rouen (76)</span><br /> Richard FLAUGNATTI <br /> Yvon GERVAISE <br /> Jean PARREIN'
        }
      },
      'department-78': {
        attrs: {
          fill: "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Versailles (78)</span><br /> Mireille DEFRANCESCHI <br /> Christiane MAJCHERCZYK TOUZAIN'
        }
      },
      'department-80': {
        attrs : {
          fill : "#488402"
        },
        infoBulle: {
          'content': 'Cours d\'appel : <br /><span style="font-weight:bold;">Amiens (80)</span><br /> Patrice Sainthérant'
        }
      }
    }
  });
});
</script>
</head>
<body>
<div class="main">
  <div class="header">
    <h1>infoBulle avec Raphael Map</h1>
  </div>
  <div class="section">
    <p>Affichage de ses propres « infoBulles » en utilisant le plugin <a href="https://www.vincentbroute.fr/mapael/">jQuery Mapael</a></p>
    <div class="mapcontainer">
      <div class="map"></div>
    </div>
  </div>
</div>
</body>
</html>

Voilà à toi de jouer

[artenis]

NOSmoking je te remercie beaucoup d'avoir trouver cette solution.
Cele marche parfaitement après adaptation.