[LeafLet] Bouton pour changer la "vue"

Bouton pour changer la "vue"

Bonjour, j'utilise Leaflet et j'aimerais avoir différents boutons qui renvoient chacuns à différentes villes. Je commence la programmation et c'est sans doute une question simple mais j'ai beaucoup cherché mais tout ce que j'essaye ne marche pas.
La dernière chose que j'ai essayé c'est

Code:

<button onclick="testMoscou();">Clic</button>

puis dans mon fichier javascript
Code:

1 2 3 function testMoscou() { map.setView(55.76, 37.62, 5); }
Merci d'avance pour vos réponses ;)

Bonjour,
tu n'utilises pas la bonne syntaxe, la documentation est pourtant claire à ce sujet : setView.

J'avais déjà essayé cette syntaxe avant mais cela ne marche toujours pas.
Je pense que je j'ai fait une autre erreur mais je ne sais pas où. Voici donc mes 2 fichiers HTML et Javascript.
Si quelqu'un peut me dire mes erreurs ce serait très sympas. :D

Code:

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
<!DOCTYPE html>
 
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<title>Carte des stades de la coupe du monde 2018</title>
 
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" 
	integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" 
	crossorigin=""/>
 
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" 
	integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" 
	crossorigin=""></script>
 
</head>
 
<body>
 
<div class='boutons'>
 
   <input class='Moscou' type='button' value='Moscou' onClick="BMoscou;">
   <input class='Pétersbourg' type='button' value='Saint-Pétersbourg' onClick="BPétersbourg;">
   <input class='Nijni' type='button' value='Nijni-Novgorod' onClick="BNijni;">
   <input class='Kaliningrad' type='button' value='Kaliningrad' onClick="BKaliningrad;">
   <input class='Ekaterinburg' type='button' value='Ekaterinburg' onClick="BEkaterinburg;">
   <input class='Saransk' type='button' value='Saransk' onClick="BSaransk;">
   <input class='Kazan' type='button' value='Kazan' onClick="BKazan;">
   <input class='Rostov' type='button' value='Rostov-sur-le-don' onClick="BRostov;">
   <input class='Sochi' type='button' value='Sochi' onClick="BSochi;">
   <input class='Volgograd' type='button' value='Volgograd' onClick="BVolgograd;">
   <input class='Samara' type='button' value='Samara' onClick="BSamara;">
 
</div>
 
	<div id="mapid" ></div>
 
	<script src="script.js"></script>
 
</body>
 
</html>

Code:

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
	src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" 
	integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" 
	crossorigin=""
 
	var mymap = L.map('mapid', {
    center: [50, 40],
    zoom: 4
});
 
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		maxZoom: 18,
		id: 'mapbox.streets'
	}).addTo(mymap);
 
    var firefoxIcon = L.icon({
        iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/d/d3/Soccerball.svg',
        iconSize: [35, 35], 
        });
 
	var marker = L.marker([55.755826, 37.617299900000035], {icon: firefoxIcon}).bindPopup('Moscou').addTo(mymap); 
	var marker = L.marker([59.9342802, 30.335098600000038], {icon: firefoxIcon}).bindPopup('Saint-Péterbourg').addTo(mymap);
	var marker = L.marker([56.2965039, 43.936059], {icon: firefoxIcon}).bindPopup('Nijni-Novgorod').addTo(mymap);
	var marker = L.marker([54.7104264,20.452214400000003], {icon: firefoxIcon}).bindPopup('Kaliningrad').addTo(mymap);
	var marker = L.marker([56.83892609999999,60.60570250000001], {icon: firefoxIcon}).bindPopup('Ekaterinbourg').addTo(mymap);
	var marker = L.marker([54.2000477,45.174511499999994], {icon: firefoxIcon}).bindPopup('Saransk').addTo(mymap);
	var marker = L.marker([55.8304307,49.06608060000008], {icon: firefoxIcon}).bindPopup('Kazan').addTo(mymap);
	var marker = L.marker([47.2357137,39.701505], {icon: firefoxIcon}).bindPopup('Rostov-sur-le-don').addTo(mymap);
	var marker = L.marker([43.60280789999999,39.7341543], {icon: firefoxIcon}).bindPopup('Sochi').addTo(mymap);
	var marker = L.marker([48.708048,44.513303500000006 ], {icon: firefoxIcon}).bindPopup('Volgograd').addTo(mymap);
	var marker = L.marker([53.2415041,50.22124629999996 ], {icon: firefoxIcon}).bindPopup('Samara').addTo(mymap);
 
	function BMoscou() {
	var mymap = L.map('mapid', {
    center: [55.755826,37.617299900000035],
    zoom: 4
	});
	}

As tu conscience que lorsque tu écris

Code:

<input class='Moscou' type='button' value='Moscou' onClick="BMoscou;">

cela ne veux pas dire grand chose en terme de javascript il te faudrait au moins écrire

Code:

<input class='Moscou' type='button' value='Moscou' onClick="nom_fonction()">

pour avoir le résultat de ta fonction au clic.

Ceci étant dit je pense qu'il faudrait que tu revois la structure de ton code et ce notamment en ce qui concerne la déclaration de tes points.
Tu pourrais tirer avantage à passer par un objet et à créer tes bouton dynamiquement par exemple.

Regarde l'exemple que j'avais fourni dans cette discussion : https://www.developpez.net/forums/d1...t/#post9260781

Merci beaucoup pour tes réponses !
je vais m'aider de l'exemple de l'ancienne discussion pour obtenir ce dont j'ai besoin.