IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Manipuler une carte avec JavaScript


Sujet :

Bibliothèques & Frameworks

  1. #21
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Merci NoSmoking pour les boutons cela a marché
    il reste mon problème de dimensions .

  2. #22
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    il reste mon problème de dimensions .
    J'ai déjà répondu à cette question :
    • point #1
    Concernant les 20%, soit tu le fais directement en CSS en ayant ta carte enfant d'un élément qui lui fait les 20% de la fenêtre, soit tu le gères par javascript.
    Il me semble que cette question devrait faire l'objet d'une autre discussion celle-ci étant déjà bien dispersée.
    Pour preuve, regarde le titre et le contenu de la discussion !

  3. #23
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    bonsoir,

    je ne comprends pas ; j'ai du modifier un point important du script car la carte ne s'affiche plus
    j'avais écrit chaque destination à laquelle je voulais aller et puis même la compobox ne marche plus.

    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;
    }
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
              <li
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
     
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun'  L.latLng(12.3547,7.3697),
      'comores'   L.latLng(44.25,-12.14),
      'ethiopie'   L.latLng(40.4897,9.145),
      'guadeloupe'   L.latLng(-61.551,16.265),
      'guyane'   L.latLng(-53.1258,3.9339),
      'reunion'   L.latLng(0.1178,44.2971),
      'madagascar'   L.latLng(46.8691,-18.7669),
      'martinique'   L.latLng(-61.427,14.3632),
      'maurice'   L.latLng(57.5833,-20.3),
      'mayotte'   L.latLng(45.1307,-12.8096),
      'tahiti'   L.latLng(-149.426,-17.6509),
      };
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 7;
    var zoomTravel  = 3;
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20,
        zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol
        duration: 5,
        center: [ 46.8, 1.7 ],
        zoom: 5
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
        // réajuste position et zoom
        oMap.setView(where, zoomInitial);
        // change markers
        swapMarker(where);
      } 
      else {
        // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
                // réajuste position et zoom
                oMap.setView(where, zoomInitial);
                // change markers
                swapMarker(where);
              }, 500);
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    pouvez vous m'aider ?

  4. #24
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var destination = {
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun'  L.latLng(12.3547,7.3697),
      'comores'   L.latLng(44.25,-12.14),
      'ethiopie'   L.latLng(40.4897,9.145),
      'guadeloupe'   L.latLng(-61.551,16.265),
      'guyane'   L.latLng(-53.1258,3.9339),
      'reunion'   L.latLng(0.1178,44.2971),
      'madagascar'   L.latLng(46.8691,-18.7669),
      'martinique'   L.latLng(-61.427,14.3632),
      'maurice'   L.latLng(57.5833,-20.3),
      'mayotte'   L.latLng(45.1307,-12.8096),
      'tahiti'   L.latLng(-149.426,-17.6509),
      };
    la déclaration de ton objet est incorrecte, vérifie la syntaxe !

    Bonus sur le CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    signifie que la hauteur de ta carte faisant 20% de son parent qui fait 37em, sa hauteur sera donc 7.4em soit 118.4px avec une police de 16px, c'est l'application de ce que j'ai déjà écris ci dessus (même calcul pour la largeur).

  5. #25
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut Manipuler une carte leaflet avec JS
    Merci NoSmoking.
    j'ai réecrit mes destinations et maintenant cela marche.

    J'utilise le leaflet suivant : http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css
    mon souci maintenant est que pour la martinique ou tahiti par exemple, le nom du pays ne s'affiche pas . y aurait-il un moyen en modifiant le zoom ou même la carte qu'il s'affiche.

  6. #26
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    ... y aurait-il un moyen en modifiant le zoom ou même la carte qu'il s'affiche. ...
    sûrement, qu'ont donné tes essais ?

  7. #27
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    pour mes essais cela fonctionne, quelques pays s'affichent très bien ; mais j'ai toujours des pays dont le nom ne s'affiche pas : mayotte, tahiti, guadeloupe, martinique, ethiopie, ile de la réunion.

    je vous joins mon nouveau code :

    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;
    }
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
     
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun':      L.latLng(5.76463, 11.75537),
      'comores' :      L.latLng(-12.14, 44.25),
      'ethiopie' :  L.latLng(8.9800, 38.7989),
      'guadeloupe' :      L.latLng(16.265, -61.551),
      'guyane' :      L.latLng(4.144817,-52.8442),
      'reunion' :      L.latLng(-21.1151, 55.5363),
      'madagascar' :      L.latLng(-19.1576, 47.2082),
      'martinique' :      L.latLng(14.64, -61.01669),
      'maurice' :      L.latLng(-20.3484,57.5833),
      'mayotte' :      L.latLng(-12.8096, 45.1307),
      'tahiti' :      L.latLng(-17.6509, 149.426)
    };
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 7;
    var zoomTravel  = 3;
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20,
         zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol
        duration: 5,
        center: [ 46.8, 1.7 ],
        zoom: 5
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
        // réajuste position et zoom
        oMap.setView(where, zoomInitial);
        // change markers
        swapMarker(where);
      } 
      else {
        // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
                // réajuste position et zoom
                oMap.setView(where, zoomInitial);
                // change markers
                swapMarker(where);
              }, 500);
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    merci

  8. #28
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Je ne vois aucune évolution dans « ton » code, je dis « ton » puisque tu as eu la délicatesse de mettre en entête <meta name="author" content="yann" >

    J'en profite pour ressortir ce que tu as écris il y quelque temps (en début de discussion) et que j'ai déjà cité :
    il y a des années de cela j'ai crée une application (en vérité j'étais dans un groupe de travail dans lequel les autres avaient tout fait sans moi) ...
    Est ce que l'histoire se répète ?

    Pour en revenir à ton soucis il te suffit de gérer un zoom d'arrivée pour chacune de tes destinations. Il y a plusieurs façons de gérer cela mais je pense que tu vas trouver .

  9. #29
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    merci pour ton aide continue no smoking

    je crois que je me suis mal expliqué. le pays se positionne bien mais comme il n'y a pas le nom du pays sur la carte il ne peut pas s'afficher . Je n'ai pas trouvé d'autre leaflet. Comment ajouter les noms qui manquent sur la carte (exemple Guadeloupe)?

    je pense que la carte s'affiche comme fond d'écran dans le CSS . donc serait-il possible de le télécharger puis de modifier ce fond ?

  10. #30
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    je crois que je me suis mal expliqué. le pays se positionne bien mais comme il n'y a pas le nom du pays sur la carte il ne peut pas s'afficher
    en fait tu as mal compris, zoome lorsque la carte est positionnée et tu verras que le nom apparaît, c'est le pourquoi de ma préconisation

    je pense que la carte s'affiche comme fond d'écran dans le CSS .
    Tu penses mal !

  11. #31
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Re-Bonjour,

    j'ai essayé de voir dans le code mais sans résultat, comment est définie la variable "where" .

    j'ai compris qu'elle était utilisée dans la fonction "go to destination", que c'est alors la position dans la carte où l'on veut aller . En utilisant la variable "zoominitial" avec, on modifie le zoom sur la position souhaitée (where).

    Comme certains points de la carte ne s'affichent pas avec mon zoom initial, j'ai prévu de créer plusieurs variables (zoominitial 2, 3 ...) en fonction de la destination.

    je me demandais alors comment tester la variable "where" pour modifier le zoom suivant la destination .

    d'avance merci

    j'ai effectué depuis ce message, plusieurs tests mas aucun n'a fonctionné :

    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;}
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
     
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun':      L.latLng(5.76463, 11.75537),
      'comores' :      L.latLng(-12.14, 44.25),
      'ethiopie' :  L.latLng(8.9800, 38.7989),
      'guadeloupe' :      L.latLng(16.265, -61.551),
      'guyane' :      L.latLng(4.144817,-52.8442),
      'reunion' :      L.latLng(-21.1151, 55.5363),
      'madagascar' :      L.latLng(-19.1576, 47.2082),
      'martinique' :      L.latLng(14.64, -61.01669),
      'maurice' :      L.latLng(-20.3484,57.5833),
      'mayotte' :      L.latLng(-12.8096, 45.1307),
      'tahiti' :      L.latLng(-17.6509, -149.426)
    };
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 9; // ce que l'on modifie versus test5 9 au leu de 7
    var zoomTravel  = 3; 
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20, 
         zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol
        duration: 5,
        center: [ 46.8, 1.7 ],
        zoom: 5 
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
      
        // réajuste position et zoom
        switch(where) {
         default :  oMap.setView(where, zoomInitial);
         break;
         case 'paris':
         oMap.setView(where,3);
         break;
         case 'guadeloupe':
         oMap.setView(where,9);
         break;}
        // change markers
        swapMarker(where);
      } 
      else {
         // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
          // réajuste position et zoom
         switch(where) {
         default :  oMap.setView(where, zoomInitial);
         break;
         case 'paris':
         oMap.setView(where,3);
         break;
         case 'guadeloupe':
         oMap.setView(where,9);
         break;
      }
            // change markers
                swapMarker(where);
              }, 500);  
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    de plus j'ai effectué aujourd'hui tous les tests un par un pour avoir la bonne valeur de zoominitial lorsque l'on clique la 1ère fois :
    paris 3.5; cameroun 3.5; comores 4; ethipoie 30. ; guadeloupe 8; guyane 3.5 ; la reunion 8; madagascar 3.5 ; martinique 8 ; maurice 8 ; mayotte 8 ; tahiti 9 .

  12. #32
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut Manipuler une carte leaflet avec JavaScript
    Bonjour,

    j'essaye sur ma page de localiser une carte leaflet suivant la destination voulue .
    Les destinations sont déjà entrées et j'ai trouvé suite à quelques consoles.log la valeur de la variable "where" selon chaque cas. Cela dit, maintenant je n'arrive plus à modifier le zoom de la carte en fonction des lieux.


    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;}
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
     
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun':      L.latLng(5.76463, 11.75537),
      'comores' :      L.latLng(-12.14, 44.25),
      'ethiopie' :  L.latLng(8.9800, 38.7989),
      'guadeloupe' :      L.latLng(16.265, -61.551),
      'guyane' :      L.latLng(4.144817,-52.8442),
      'reunion' :      L.latLng(-21.1151, 55.5363),
      'madagascar' :      L.latLng(-19.1576, 47.2082),
      'martinique' :      L.latLng(14.64, -61.01669),
      'maurice' :      L.latLng(-20.3484,57.5833),
      'mayotte' :      L.latLng(-12.8096, 45.1307),
      'tahiti' :      L.latLng(-17.6509, -149.426)
    };
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 9; // ce que l'on modifie versus test5 9 au leu de 7
    var zoomTravel  = 3; 
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20, 
         zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol
        duration: 5,
        center: [ 46.8, 1.7 ],
        zoom: 5 
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
      
        // réajuste position et zoom
       console.log(where); 
       switch(where) {
         default :  oMap.setView(L.latLng(48.85342, 2.3488), zoomInitial);
         break;
         case L.latLng(48.85342, 2.3488):
         oMap.setView(where,15);
         break;
         case L.latLng(16.265, -61.551):
         oMap.setView(where,8);
         break;}
        // change markers
        swapMarker(where);
      } 
      else {
         // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
          // réajuste position et zoom
         switch(where) {
         default :  oMap.setView(where, zoomInitial);
         break;
         case 'paris':
         oMap.setView(where,3);
         break;
         case 'guadeloupe':
         oMap.setView(where,9);
         break;
      }
            // change markers
                swapMarker(where);
              }, 500);  
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    Comme certains points de la carte ne s'affichent pas avec mon zoom initial, j'ai prévu de créer plusieurs variables (zoominitial 2, 3 ...) en fonction de la destination.

    je me demandais alors comment tester la variable "where" pour modifier le zoom suivant la destination .

    j'ai effectué, plusieurs tests mais aucun n'a fonctionné :

    de plus j'ai effectué aujourd'hui tous les tests un par un pour avoir la bonne valeur de zoominitial lorsque l'on clique la 1ère fois :
    paris 3.5; cameroun 3.5; comores 4; ethipoie 30. ; guadeloupe 8; guyane 3.5 ; la reunion 8; madagascar 3.5 ; martinique 8 ; maurice 8 ; mayotte 8 ; tahiti 9 .

    Merci de votre aide

  13. #33
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    une 1re modification qui pourrait servir serait de passer l'identifiant du lieu dans la fonction "gotoDestination"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    gotoDestination(destination[oDest], oDest);
    au alors vous pouvez changer la structure du tableau "destination" pour y stocker le zoom :
    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
    var destination = {
        "paris" : {
            "libelle" : "Paris",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "cameroun" : {
            "libelle" : "Cameroun",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "reunion" : {
            "libelle" : "La Réunion",
            "point" : L.latLng(-21.1151, 55.5363),
            "zoom" : 8,
        },
        //...
    };
    j'ai aussi rajouté le libellé dans le tableau ce qui pourrait vous permettre de générer le menu déroulant dynamiquement.

  14. #34
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Bonjour Mathieu,

    J'ai suivi ta proposition de réecrire la variable "destination" :

    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;}
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 20%;
      width: 20%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
        "paris" : {
            "libelle" : "Paris",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "cameroun" : {
            "libelle" : "Cameroun",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "comores" : {
            "libelle" : "Comores",
            "point" : L.latLng(-12.14, 44.25),
            "zoom" : 3.5,
        },
        "ethiopie" : {
            "libelle" : "Ethiopie",
            "point" : L.latLng(8.9800, 38.7989),
            "zoom" : 3.5,
        },
        "guadeloupe" : {
            "libelle" : "Guadeloupe",
            "point" : L.latLng(6.265, -61.551),
            "zoom" : 3.5,
        },
        "guyane" : {
            "libelle" : "Guyane",
            "point" : L.latLng(4.144817,-52.8442),
            "zoom" : 3.5,
        },
        "reunion" : {
            "libelle" : "La Réunion",
            "point" : L.latLng(-21.1151, 55.5363),
            "zoom" : 8,
        },
        "madagascar" : {
            "libelle" : "Madagascar",
            "point" : L.latLng(-19.1576, 47.2082),
            "zoom" : 3.5,
        },
        "martinique" : {
            "libelle" : "Martinique",
            "point" : L.latLng(14.64, -61.01669),
            "zoom" : 3.5,
        },
        "maurice" : {
            "libelle" : "Maurice",
            "point" : L.latLng(14.64, -61.01669),
            "zoom" : 3.5,
        },
        "mayotte" : {
            "libelle" : "Mayotte",
            "point" : L.latLng(-12.8096, 45.1307),
            "zoom" : 3.5,
        },
        "tahiti" : {
            "libelle" : "Tahiti",
            "point" : L.latLng(-17.6509, -149.426),
            "zoom" : 3.5,
        },
        //...
    };
    /*var destination = {
     
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun':      L.latLng(5.76463, 11.75537),
      'comores' :      L.latLng(-12.14, 44.25),
      'ethiopie' :  L.latLng(8.9800, 38.7989),
      'guadeloupe' :      L.latLng(16.265, -61.551),
      'guyane' :      L.latLng(4.144817,-52.8442),
      'reunion' :      L.latLng(-21.1151, 55.5363),
      'madagascar' :      L.latLng(-19.1576, 47.2082),
      'martinique' :      L.latLng(14.64, -61.01669),
      'maurice' :      L.latLng(-20.3484,57.5833),
      'mayotte' :      L.latLng(-12.8096, 45.1307),
      'tahiti' :      L.latLng(-17.6509, -149.426)
    };
    */
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 9; // ce que l'on modifie versus test5 9 au leu de 7
    var zoomTravel  = 3; 
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20, 
         zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol
        duration: 5,
        center: [ 46.8, 1.7 ],
        zoom: 5 
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
      
        // réajuste position et zoom
       console.log(where); 
       switch(where) {
         default :  oMap.setView(L.latLng(48.85342, 2.3488), zoomInitial);
         break;
         case L.latLng(48.85342, 2.3488):
         oMap.setView(where,zoom);
         break;
         case L.latLng(16.265, -61.551):
         oMap.setView(where,8);
         break;}
        // change markers
        swapMarker(where);
      } 
      else {
         // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
          // réajuste position et zoom
         switch(where) {
         default :  oMap.setView(where, zoomInitial);
         break;
         case 'paris':
         oMap.setView(where,zoom);
         break;
         case 'guadeloupe':
         oMap.setView(where,9);
         break;
      }
            // change markers
                swapMarker(where);
              }, 500);  
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    mais je voudrais maintenant savoir où est-ce que cette variable -destination- est utilisée parce que lorsqu'on sélectionne une destination, le point sur la carte ne change pas, ce qui me parait normal vu qu'on a modifié la structure du tableau destination.

    merci de votre aide

  15. #35
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    le tableau est utilisé à la ligne 371 pour l'appel à "gotoDestination".
    ensuite dans cette fonction vous aurez le point dans "where["point"]" et la valeur du zoom dans "where["zoom"]"

  16. #36
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Bonsoir Mathieu,

    j'ai tenté d'écrire dans la fonction "gotodestination" dans le script un "console.log" pour afficher le contenu de where.point et where.zoom .

    L'erreur suivante s'affiche lorsque je change de destination :

    TypeError: t is null leaflet.js:5:17888
    que dois faire ?

  17. #37
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Bonsoir à tous,

    Merci beaucoup de votre aide.

    Mais j'ai pensé à une autre solution qui serait plus simple à coder et également plus facile à utiliser.
    Ce serait sur toute la largeur disponible, donc en remplaçant les colonnes que j'avais créées, d'afficher une unique carte leaflet du monde entier avec simplement des marqueurs sur les pays que j'avais.

    Je propose simplement de pousser un marqueur rouge pour Paris, puis des bleus pour chacune des autres destinations.

    Etant donné que cette 2ème solution paraît beaucoup plus simple, je devrais être capable d'y arriver moi même donc je reviendrai vers vous si j'ai un nouveau besoin d'aide.

  18. #38
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2012
    Messages
    335
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2012
    Messages : 335
    Points : 70
    Points
    70
    Par défaut
    Bonsoir à tous

    après une après midi de travail j'ai réussi à afficher la carte du monde.

    je voudrais mettre un marker pour paris d'une couleur et des markers d'un 2ème couleur pour les autres lieux de ma variable destination.

    j'ai besoin de votre aide

    voici mon code :

    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
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>[Leaflet] Animation déplacement</title>
    <meta name="author" content="Yann" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="[Leaflet] Déplacement animé de la carte d'un point à un autre.">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css">
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.js"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;}
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #cadre_carte {
      position: relative;
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #carte {
      height: 55%;
      width: 70%;
    }
    #menu_destination {
      display: inline-block;
      z-index: 100000;
      position: absolute;
      top: 1em;
      right: 1em;
      padding: .125em;
      min-width: 10em;
      border: 1px solid #abc;
      font: .8em/1.5 Verdana,sans-serif;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
      cursor: pointer;
      -moz-user-select: none;
    }
    #menu_destination h1 {
      margin: 0;
      padding: 0;
      font-size: 1em;
      font-weight: normal;
      color: #000;
      text-align:center;
    }
    #menu_destination h1:hover {
      background: #f4f4f4;
    }
    #menu_destination ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display:none;
    }
    #menu_destination ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;
    }
    /* separator */
    #menu_destination ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;
      background: #abc;
    }
    #menu_destination ul li[data-dest]:hover {
      background: #cde;
    }
    #menu_destination ul hr {
      margin: 0;
      padding: 0;
    }
     
    /* déclaration pour les markers */
    .circle {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0 0 10px #888;
    }
    .circle-marker {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
    }
    .circle-red {
      border: 5px solid #F00;
    }
    .circle-green {
      border: 5px solid #0A0;
    }
    .circle-animate {
      animation-name: show-hide;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform: scale(1);
    }
    @keyframes show-hide {
      0%   { transform: scale(1);}
      50%  { transform: scale(.5);}
      100% { transform: scale(1);}
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>[Leaflet] Animation déplacement</h1>
      </div>
      <div class="section">  
        <p>Déplacement animé de la carte d'un point à un autre.</p>
      </div>
      <div class="section">
        <div id="cadre_carte">
          <div id="carte"></div>
          <div id="menu_destination">
            <h1>Destination</h1>
            <ul>
              <li data-dest="paris"    >Paris</li>
              <li data-dest="cameroun" >Cameroun</li>
              <li data-dest="comores"  >Comores</li>
              <li data-dest="ethiopie" >Ethiopie</li>
              <li data-dest="guadeloupe"  >Guadeloupe</li>
              <li data-dest="guyane" >Guyane</li>
              <li data-dest="reunion"      >La R&eacute;union</li>
              <li data-dest="madagascar"      >Madagascar</li>         
              <li data-dest="martinique"      >Martinique</li>       
              <li data-dest="maurice"      >Ile Maurice</li>     
              <li data-dest="mayotte"      >Mayotte</li>         
              <li data-dest="tahiti"      >Tahiti</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script>
    var oMap;
    var animEnCours = false;
    var destination = {
        "paris" : {
            "libelle" : "Paris",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "cameroun" : {
            "libelle" : "Cameroun",
            "point" : L.latLng(48.85342, 2.3488),
            "zoom" : 3.5,
        },
        "comores" : {
            "libelle" : "Comores",
            "point" : L.latLng(-12.14, 44.25),
            "zoom" : 3.5,
        },
        "ethiopie" : {
            "libelle" : "Ethiopie",
            "point" : L.latLng(8.9800, 38.7989),
            "zoom" : 3.5,
        },
        "guadeloupe" : {
            "libelle" : "Guadeloupe",
            "point" : L.latLng(6.265, -61.551),
            "zoom" : 3.5,
        },
        "guyane" : {
            "libelle" : "Guyane",
            "point" : L.latLng(4.144817,-52.8442),
            "zoom" : 3.5,
        },
        "reunion" : {
            "libelle" : "La Réunion",
            "point" : L.latLng(-21.1151, 55.5363),
            "zoom" : 8,
        },
        "madagascar" : {
            "libelle" : "Madagascar",
            "point" : L.latLng(-19.1576, 47.2082),
            "zoom" : 3.5,
        },
        "martinique" : {
            "libelle" : "Martinique",
            "point" : L.latLng(14.64, -61.01669),
            "zoom" : 3.5,
        },
        "maurice" : {
            "libelle" : "Maurice",
            "point" : L.latLng(14.64, -61.01669),
            "zoom" : 3.5,
        },
        "mayotte" : {
            "libelle" : "Mayotte",
            "point" : L.latLng(-12.8096, 45.1307),
            "zoom" : 3.5,
        },
        "tahiti" : {
            "libelle" : "Tahiti",
            "point" : L.latLng(-17.6509, -149.426),
            "zoom" : 3.5,
        },
        //...
    };
    /*var destination = {
     
      'paris':    L.latLng(48.85342, 2.3488),
      'cameroun':      L.latLng(5.76463, 11.75537),
      'comores' :      L.latLng(-12.14, 44.25),
      'ethiopie' :  L.latLng(8.9800, 38.7989),
      'guadeloupe' :      L.latLng(16.265, -61.551),
      'guyane' :      L.latLng(4.144817,-52.8442),
      'reunion' :      L.latLng(-21.1151, 55.5363),
      'madagascar' :      L.latLng(-19.1576, 47.2082),
      'martinique' :      L.latLng(14.64, -61.01669),
      'maurice' :      L.latLng(-20.3484,57.5833),
      'mayotte' :      L.latLng(-12.8096, 45.1307),
      'tahiti' :      L.latLng(-17.6509, -149.426)
    };
    */
    // création des divIcon
    var oIconRed = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-red"></div>'
    });
    var oIconGreen = L.divIcon({
      iconAnchor : [15, 15],
      className: 'circle-marker',
      html: '<div class="circle-animate circle circle-green"></div>'
    });
    // création des markers
    var oMarkerRed   = L.marker( [0,0], {icon: oIconRed});
    var oMarkerGreen = L.marker( [0,0], {icon: oIconGreen});
    // création de la carte
    var zoomInitial = 9; // ce que l'on modifie versus test5 9 au leu de 7
    var zoomTravel  = 3; 
    oMap = L.map('carte', {
        zoomAnimationThreshold: 20, 
        zoomControl: false,          // voir <a href="http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol" target="_blank">http://leafletjs.com/reference-1.1.0...ap-zoomcontrol</a>
        duration: 5,
        center: [ 0, 0 ],
        zoom: 1.1 
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // fonction sur click oMap
    oMap.on('click', function (e) {
      // affiche marker vert au click
      oMarkerGreen.setLatLng([e.latlng.lat, e.latlng.lng]).addTo(this);
      oMarkerGreen.on('click', function (e) {
        this.remove(oMap);
      })
    });
     
    function swapMarker(where){
      // supprime marker rouge
      oMarkerRed.remove(oMap);
      // affiche marker vert
      oMarkerGreen.setLatLng(where).addTo(oMap);
      // autorise autre animation
      animEnCours = false;
    }
     
    function gotoDestination(where) {
      // si animation en cours on quitte
      if (animEnCours) {
        return;
      }
      animEnCours = true;
      var zoomCarte = oMap.getZoom();
      // récupération point de départ
      var pointDepart = oMap.hasLayer(oMarkerGreen) ? oMarkerGreen.getLatLng() : oMap.getCenter();
      // place les marker rouge et vert sur destination et départ
      oMarkerRed.setLatLng(where).addTo(oMap);
      oMarkerGreen.setLatLng(pointDepart).addTo(oMap);
      // calcul distance déplacement
      var distance = oMap.distance(pointDepart, where)/1000;
      // calcul durée déplacement
      var delay = distance / 2000;
      // accés direct si distance < 1000 km
      if (distance < 1000) {
      
        // réajuste position et zoom
       console.log(where); 
       switch(where) {
         default :  oMap.setView(L.latLng(0, 0), zoomInitial);
         break;
         case L.latLng(48.85342, 2.3488):
         oMap.setView(where,zoom);
         break;
         case L.latLng(16.265, -61.551):
         oMap.setView(where,8);
         break;}
        // change markers
        swapMarker(where);
      } 
      else {
         // défini action en fin de zoom
        oMap.once('zoomend', function () {
          // déplacement vers destination
          setTimeout(function () {
            // défini action en fin de déplacement
            oMap.once('moveend', function () {
              // on zooom sur destination
              setTimeout(function () {
          // réajuste position et zoom
         switch(where) {
         default :  oMap.setView(where, zoomInitial);
         break;
         case 'paris':
         oMap.setView(where,3);
         break;
         case 'guadeloupe':
         oMap.setView(where,9);
         break;
      }
            // change markers
                swapMarker(where);
              }, 500);  
            });
            // déplacement
            oMap.panTo(where, {
              animate: true,
              duration: delay
            });
          }, 500);
        });
        // ajuste le zoom minimum
        if (zoomCarte === zoomTravel) {
          oMap.fireEvent('zoomend');
        } 
        else {
          oMap.setZoom(zoomTravel);
        }
      }
    }
     
    // gestion du menu destinations
    var oTravel = document.querySelector('#menu_destination');
    oTravel.onclick = function (e) {
      var oSrc = e.target;
      var oDest = oSrc.getAttribute("data-dest");
      if (destination[oDest]) {
        this.querySelector('ul').style.display = 'none';
        gotoDestination(destination[oDest]);
      }
      else {
        this.querySelector('ul').style.display = 'block';
      }
    };
    oTravel.onmouseleave = function (e) {
      this.querySelector('ul').style.display = 'none';
    };
    </script>
    </body>
    </html>

    merci encore de votre aide

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Réponses: 3
    Dernier message: 20/09/2006, 17h07
  2. création d'une carte avec navigation du type mappy
    Par BernardT dans le forum Interfaces Graphiques en Java
    Réponses: 3
    Dernier message: 30/10/2005, 02h24
  3. Inclure une page dans dans une tableau avec javascript
    Par pierrot10 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/09/2005, 13h31
  4. navigation dans une jsp avec javascript
    Par petitelulu dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 15/11/2004, 19h55
  5. Réponses: 4
    Dernier message: 27/04/2004, 15h45

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