1. #1
    Membre du Club
    Profil pro
    Inscrit en
    février 2011
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2011
    Messages : 229
    Points : 51
    Points
    51

    Par défaut Personnaliser la carte MAPAEL

    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 699
    Points : 24 980
    Points
    24 980

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    février 2011
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2011
    Messages : 229
    Points : 51
    Points
    51

    Par défaut

    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.

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    février 2011
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2011
    Messages : 229
    Points : 51
    Points
    51

    Par défaut

    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>
    Images attachées Images attachées  

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 699
    Points : 24 980
    Points
    24 980

    Par défaut

    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

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    février 2011
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2011
    Messages : 229
    Points : 51
    Points
    51

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Intégrer et personnaliser une carte type Google Maps
    Par vertebre dans le forum Android
    Réponses: 7
    Dernier message: 23/01/2015, 15h59
  2. Créer carte personnalisée
    Par stefcio dans le forum JavaScript
    Réponses: 14
    Dernier message: 11/04/2013, 21h39
  3. Personnaliser une carte google maps
    Par akara dans le forum Services
    Réponses: 0
    Dernier message: 06/03/2009, 14h01
  4. Réponses: 6
    Dernier message: 09/04/2007, 16h52
  5. Accès au port 700h pour une carte d'interface
    Par haypo dans le forum Matériel
    Réponses: 3
    Dernier message: 07/11/2002, 11h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo