Manipuler une carte avec JavaScript

**aertys** · 23/04/2017, 20h03

bonsoir,

je voudrais faire la chose suivante en JS :

on est au départ sur une image centrée sur Paris (France);
on clique sur la guyane dans une liste à droite;
on a une image déformée qui s'affiche. l'image est déformée pour montrer que l'on se déplace sur le globe;
on arrive sur l'image définitive centrée sur la guyane; la guyane sera de couleur différente.

est-ce possible en JS ? si ce n'est pas possible n'importe quel framework irait

merci de votre aide

bm · 23/04/2017, 20h53

Google

http://darchevillepatrick.info/js/js_slideshow.htm

**aertys** · 24/04/2017, 21h43

merci

mais j'ai une autre idée:
mon truc ne serait pas possible en utilisant leaflet parce qu'en plus je pouurrais afficher grace à cela le trajet entre la france et la guyane pour montrer que c'est loin.

ce serait mieux pour moi

bm · 25/04/2017, 10h35

JS est une couche au dessus de OpenStreetMap et Leaflet un plugin ou API.
Les animations météo sur les cartes sont codés JS.

Animer une zone géographique avec des capteurs est un très gros projet.

**aertys** · 01/05/2017, 17h40

bonsoir

merci pour cette aide j'en ai déduis que c'était tout de meme possible en leaflet
donc voici les codes que j'ai réalisés

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	function market () {
	     console.log("mark");
		switch (lang) { 
			case 'fr':
			  article1_1.innerHTML = "<link rel='stylesheet' href='https://unpkg.com/leaflet@1.0.3/dist/leaflet.css'   integrity='sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=='   crossorigin=''/><div id='mar_g'><div id='mapid'></div></div> <script src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js'   integrity='sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=='   crossorigin=''></script>";
			  aside1_1.innerHTML += '';
			break;
			case 'en':
			  article1_1.innerHTML = '';
			  aside1_1.innerHTML += '';
			break;
		}
		var mymap = L.map('mapid').setView([48.864716, 2.349014], 0);
	}

mon code 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
14
15
16
17
18
19
20
#mar_g,#mar_l {
     margin: 0 auto;
     width: 22%;
	  display: inline-block;
	  vertical-align: middle;
}
#mar_l {
 
}
#mar_g {
 
}
#mapid {
     margin: 0 auto;	
     vertical-align: middle;
     width: 20%;
     height : 20%;
     border:1px solid black;
     border-radius: 10%;    
}

et mon code html, je ne vous le donne pas, mais vu que j'ai 'écrit mon html dans mon js, vous l'avez quand meme.

le cercle que j'ai essayé de définir ne s'affiche pas , à la place j'ai tout simplement un trait à peu près au milieu de la page et horizontal.

comment faire ?

merci de votre aide

**NoSmoking** · 02/05/2017, 14h12

Bonjour,
si je m'en réfère à ton post #1, ce que tu cherches à faire est du morphing c'est possible mais très particulier dans ton cas et ils existent des plugins pour cela.

Maintenant si tu souhaites utiliser Leaflet je doute que tu puisse obtenir un résultat aussi fin mais tu peux toujours jouer sur avec un effet de dézoom/zoom avec un déplacement de la carte suivant le trajet.

@bm : rien compris de tes interventions

bm · 02/05/2017, 19h06

@bm : rien compris de tes interventions

Ok, si il faut que je me note, le total de mes points ne sera jamais assez bien
Quand le gars poste et n'écrit pas du JS dans un forum JS, le modérateur devrai déplacer son post

@aertys:

innerHTML qui n'est pas dans le contexte d'une page html, c'est imbuvable.
Il y a les bases WC3 qu'il faut connaître avant de poster dans un forum.

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

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
<!DOCTYPE html>
<html>
<body>
 
<h1>My Web Page</h1>
 
<p id="myP">This is a p element.</p>
 
<div id="myDIV">This is a div element.</div>
 
<script>
document.getElementById("myP").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
</script>
 
</body>
</html>

**aertys** · 07/05/2017, 17h27

pourtant nosmoking, il me semblait que c'était assez simple de le faire en leaflet. par exemple 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) qui se chargeait de déplacer l'utilisateur sur le monde suite à différents événements.

à ce que j'ai compris quand m^eme il est possible avec leaflet simplement d'afficher une carte sur un point précis. c'est ce que j'essaye de faire dans mon code, j'ai simplement voulu afficher une carte du monde centrée sur Paris (cf les coordonnées que j'ai écrites) et je voulais coder ensuite, je voulais déplacer cette carte à chaque clic de l'utilisateur sur un paragraphe à coté, dans mon exemple La Guyane. Par contre vu que la carte que je recherche ne serait qu'un petit carré dans la page j'ai écrit un code css associé. juste si ça ne vous était pas possible de faire ce que je voudrais sous forme sphérique on peut faire la carte simplement sous forme de carrés ou de rectangles, mais que cela ne prenne tout la fen^etre du navigateur.

**NoSmoking** · 09/05/2017, 19h44

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) ...

L'exercice me paraissant intéressant et aimant bien cette librairie j'ai fais un petit exemple d'animation de carte.

Principe de l'animation

On « dézoome » pour visualiser le parcours ;
En fin de « dézomage » on se déplace pour avoir le point d'arrivée au centre de la carte. La vitesse pouvant être proportionnelle à la distance à parcourir ;
En fin de déplacement on « re-zoome ».

Pour synchroniser les enchainements il y a la possibilité de mettre des observateurs d'événements que l'on va utiliser pour lancer la phase suivante.

Code :

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

1
2
3
4
5
6
// défini action en fin de zoom
oMap.once('zoomend', function () {
  console.log('Fin de zoom/dézoom');
});
// lancement du zoom
oMap.setZoom(valeur_du_zoom);

Code :

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

1
2
3
4
5
6
// défini action en fin de déplacement
oMap.once('moveend', function () {
  console.log('Fin déplacement');
});
// lancement du déplacement
oMap.panTo(nouvelle_position);

Fichier de test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>[Leaflet] Animation déplacement</title>
<meta name="Author" content="NoSmoking">
<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: 100%;
  width: 100%;
}
#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="rio"      >Rio</li>
          <li data-dest="paris"    >Paris</li>
          <li data-dest="bangkok"  >Bangkok</li>
          <li data-dest="new-york" >New York</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script>
var oMap;
var animEnCours = false;
var destination = {
  'rio':      L.latLng(-22.8119, -43.24817),
  'bangkok':  L.latLng(13.69214, 100.75072),
  'new-york': L.latLng(40.64557, -73.78495),
  'paris':    L.latLng(49.0142, 2.54188)
};
// 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,
    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>

Pour plus d'infos

Leaflet API Reference

Nota

Cela ne répond sûrement pas entièrement à ta problématique mais cela te montre une voie possible à suivre ;
Il existe des plugins qui peuvent également t'aider.

**aertys** · 28/05/2017, 17h49

Merci No Smoking pour ce fichier . ça marche parfaitement.

Est-ce que vous savez si on peut réduire les dimensions de la carte ?
En fait, mon espace fait 30% de la largeur totale.

Merci

**NoSmoking** · 31/05/2017, 10h49

Il te suffit de modifier le CSS correspondant

Code css :

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

1
2
3
4
5
6
7
8
9
#cadre_carte {
  position: relative;
  height: 37em;     /* A ajuster */
  margin: 0 auto;
  max-width: 50em;  /* A ajuster */
  border: 5px solid #FFF;
  font-size: 1em;
  box-shadow: 0 2px 4px 2px #CCC;
}

**aertys** · 09/07/2017, 16h37

bonjour,

j'ai testé ce que no smoking m'a dit de faire et voici le résultat :

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
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
 
   <style>
#mapid {
  position: relative;
  height: 37em;     /* A ajuster */
  margin: 0 auto;
  max-width: 50em;  /* A ajuster */
  border: 5px solid #FFF;
  font-size: 1em;
  box-shadow: 0 2px 4px 2px #CCC;
  /*height: 180px;*/ }</style>
 
   <div id="mapid"></div>
 
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"   integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="   crossorigin=""></script>
 
   <script>
   // défini action en fin de zoom
oMap.once('zoomend', function () {
  console.log('Fin de zoom/dézoom');
});
// lancement du zoom
oMap.setZoom(valeur_du_zoom);
var mymap = L.map('mapid').setView([48.864716, 2.349014],10);
     </script>

.

pour alors sur le test, on voit bien un cadre, l'ennui c'est que j'ai bien vu qu'il avait une largeur, mais je ne sais pas où elle est écrite, ce qui me pose problème pour la changer. de plus, sur cette image la hauteur est réglée par défaut à la taille du navigateur. or moi je voudrais la régler soit 30% à soit 20% selon le besoin que j'aurai. enfin, le cadre s'affiche bien mais aucune carte ne s'y affiche, j'ai les coordonnées que j'ai entrées sont normalement celles de Paris.

**NoSmoking** · 10/07/2017, 14h53

j'ai testé ce que no smoking m'a dit de faire et voici le résultat

Non rien à voir tu as écrit un code qui est n'importe quoi !

Utilisation de oMap avant création ;
Initialisation de mymap != oMap ;
Non mise en place des « tuiles » ...

Echantillon de l'exemple donné

Code :

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

1
2
3
4
5
6
7
8
9
var oMap;
var oMap = L.map('mapid').setView([48.864716, 2.349014],10);
 
oMap.addLayer( L.tileLayer(
    'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  ));

on est loin du compte !

**aertys** · 23/07/2017, 19h23

mes excuses Nosmoking.

voici 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
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
 
   <style>
#mapid {
  position: relative;
  height: 37em;     /* A ajuster */
  margin: 0 auto;
  max-width: 50em;  /* A ajuster */
  border: 5px solid #FFF;
  font-size: 1em;
  box-shadow: 0 2px 4px 2px #CCC;
  /*height: 180px;*/ }</style>
 
   <div id="mapid"></div>
 
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"   integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="   crossorigin=""></script>
 
   <script>
// défini action en fin de déplacement
oMap.once('moveend', function () {
  console.log('Fin déplacement');
});
// lancement du déplacement
oMap.panTo(nouvelle_position);
     </script>

la carte s'affiche bien avec les bonnes coordonnées mais j'ai toujours un pb de taille au niveau de celle-ci, car j'aimerai que ce soit un carré de 20*20%. de plus je voudrai enlever les boutons de zoom et dezoom car je n'en ai pas besoin, je ne voudrai pas que l'utilisateur puisse jouer avec.

**NoSmoking** · 24/07/2017, 12h45

car j'aimerai que ce soit un carré de 20*20%.

Il te faut le gérer en CSS, comme déjà dit, mais savoir 20% de QUOI ?

je voudrai enlever les boutons de zoom et dezoom

Je pense que tu devrais regarder la documentation plus avant : http://leafletjs.com/reference-1.1.0.html#map-option

**aertys** · 02/10/2017, 12h33

déjà les 20*20% font référence aux dimensions totales de la page.

**aertys** · 02/10/2017, 13h43

re bonjour

je crois que j'ai trouvé un moyen de retirer les boutons mais à voir le résultat ma technique n'est pas la bonne

Code JS :

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
script>
L.Control.remove ();
var oMap;
var animEnCours = false;
var destination = {
  'rio':      L.latLng(-22.8119, -43.24817),
  'bangkok':  L.latLng(13.69214, 100.75072),
  'new-york': L.latLng(40.64557, -73.78495),
  'paris':    L.latLng(49.0142, 2.54188)
};
// 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,
    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>

pouvez-vous m'aider ?

**NoSmoking** · 03/10/2017, 10h48

• 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.

• point #2
Pour supprimer les boutons de zoom/dé-zoom, il suffit de faire un simple

Code :

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

1
2
3
4
5
6
7
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
});

**aertys** · 09/10/2017, 13h23

Bonjour,

Je suis désolé mais je n'arrive pas à effacer ces boutons . Il me semble que je ne l'ai pas écrit à la bonne place :

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
<!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: 100%;
  width: 100%;
}
#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="rio"      >Rio</li>
          <li data-dest="paris"    >Paris</li>
          <li data-dest="bangkok"  >Bangkok</li>
          <li data-dest="new-york" >New York</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script>
var oMap;
var animEnCours = false;
var destination = {
  'rio':      L.latLng(-22.8119, -43.24817),
  'bangkok':  L.latLng(13.69214, 100.75072),
  'new-york': L.latLng(40.64557, -73.78495),
  'paris':    L.latLng(49.0142, 2.54188)
};
// 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,
    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';
};
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
});
</script>
</body>
</html>

et pour le 20*20%, j'ai compris qu'il faut le faire dans le CSS mais où exactement ?

**NoSmoking** · 09/10/2017, 14h30

Il me semble que je ne l'ai pas écrit à la bonne place...

il n'y a qu'une chose à faire c'est ajouter cette

Code :

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

    zoomControl: false,          // voir http://leafletjs.com/reference-1.1.0.html#map-zoomcontrol

dans la déclaration de ta carte soit lignes 179 à 184 du code fournit. Il te faut également virer la re-déclaration que tu as ajouté en fin de code lignes 280 à 286.

Manipuler une carte avec JavaScript

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager