Bouton pour changer la "vue"

**M.TAZ** · 08/05/2018, 12h45

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 :

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

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

puis dans mon fichier javascript

Code :

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

1
2
3
function testMoscou() { 
map.setView(55.76, 37.62, 5);
}

Merci d'avance pour vos réponses

**NoSmoking** · 09/05/2018, 08h29

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

**M.TAZ** · 10/05/2018, 13h27

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.

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
<!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 :

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
	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
	});
	}

**NoSmoking** · 15/05/2018, 18h48

As tu conscience que lorsque tu écris

Code html :

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

<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 html :

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

<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

**M.TAZ** · 16/05/2018, 00h55

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

Bouton pour changer la "vue" [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager