Zoom et dézoom avec Leaflet

Version imprimable

Bonjour à toutes et à tous,
je suis nouvel utilisateur de Leaflet, et j'ai bien installé la carte qui s'affiche, mais je ne peux pas faire modifier le zoom d'affichage, je m'explique que je mette ce zoom à 1 ou à 20 l'affichage reste le même sur ma carte.
voici le code que j'ai installé:

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
<style>
                        html { height: 100% }
                        body { height: 100%; margin: 0; padding: 0 }
                        #map { 
                                width: 480px;
                                height: 250px; 
                        }
                </style>
 
                <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
                <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
                </head>
        <body>
                <div id="map"></div>
                <script type="text/javascript">
                        var map = L.map('map').setView([35.33046758831031, 25.367593327417012], 1);
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>' }).addTo(map);
 
                        var myItems = [
                            ["c'est ici", 35.33046758831031, 25.367593327417012]
                            //["Musée d'Orsay", 48.86, 2.327],
                            //["Museum National d'Histoire Naturelle", 48.8422, 2.3564],
                          //["Notre Dame", 48.803056, 2.349722]
                                                        ];
 
                        var markers = new L.featureGroup();
                        for (var i = 0; i < myItems.length; i++) {
                                var item = myItems[i];
                                marker = new L.marker([item[1],item[2],item[3]]).bindPopup(item[0]);
                                markers.addLayer(marker);
                        }
 
                        markers.on('mouseover', function(e){ e.layer.openPopup(); })
                               .on('mouseout', function(e){ e.layer.closePopup(); });
                        map.addLayer(markers);
                        map.fitBounds(markers.getBounds());
                </script>

23/08/2018, 11h18
Doksuri

Salut,
merci d'utiliser la balise code pour formater le code que tu postes

que ce passe-t-il si tu supprimes la ligne map.fitBounds(markers.getBounds()); ?
23/08/2018, 14h56
itinerairesbis

ça maaaaaaaaaaaaaarche!!!

Tout d'abord, merci d'avoir répondu,
et en plus lorsque l'on a l'avis d'un connaisseur c'est encore mieux..
Mais alors pourquoi cette lignes si importante pour ce genre de problème?
Sans vouloir abuser de ton temps bien sur:mrgreen:
Et encore merci

Cordialement
Gilles
23/08/2018, 15h11
ProgElecT

Salut

map.fitBounds(markers.getBounds()); permet de garantir la visibilité de tous les marqueurs, donc adaptation du zoom pour remplir le contrat.
23/08/2018, 15h14
itinerairesbis

merci

Encore merci pour ces renseignements
Cordialement
Gilles

encore un petit souci,

J'avais marqué un peu vite résolu, mais lorsque je veux rajouter une coordonnée, plus rien ne s'affiche...:lol:
j'ai annulé la ligne que tu m'avais suggéré, puis remis mais rien n'y fait:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var myItems = [
                            ["Luxury Villas Hersonissos", 35.33046758831031, 25.367593327417012]
                            ["St Nicolas Bay", 35.2048109788692, 25.719681190258704]
                            //["Museum National d'Histoire Naturelle", 48.8422, 2.3564],
                          //["Notre Dame", 48.803056, 2.349722]
							];
 
                        var markers = new L.featureGroup();
			for (var i = 0; i < myItems.length; i++) {
				var item = myItems[i];
				marker = new L.marker([item[1],item[2],item[3]]).bindPopup(item[0]);
				markers.addLayer(marker);
			}
 
			markers.on('mouseover', function(e){ e.layer.openPopup(); })
			       .on('mouseout', function(e){ e.layer.closePopup(); });
			map.addLayer(markers);
			//map.fitBounds(markers.getBounds());

Encore merci pour ta patience,
Gilles

23/08/2018, 15h46
itinerairesbis

mes excuses...

Alors toutes mes excuses,
J'avais oublier une virgule entre les 2 adresses, la prochaine fois, si il y a prochaine fois je prendrais plus de temps avant de déranger les gens
Encore merci pour votre attention:oops:
Gilles