Zoom et dézoom avec Leaflet

**itinerairesbis** · 23/08/2018, 09h04

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

**Doksuri** · 23/08/2018, 10h18

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()); ?

**itinerairesbis** · 23/08/2018, 13h56

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

Et encore merci

Cordialement
Gilles

**ProgElecT** · 23/08/2018, 14h11

Salut

map.fitBounds(markers.getBounds()); permet de garantir la visibilité de tous les marqueurs, donc adaptation du zoom pour remplir le contrat.

**itinerairesbis** · 23/08/2018, 14h14

Encore merci pour ces renseignements
Cordialement
Gilles

**itinerairesbis** · 23/08/2018, 14h30

J'avais marqué un peu vite résolu, mais lorsque je veux rajouter une coordonnée, plus rien ne s'affiche...

j'ai annulé la ligne que tu m'avais suggéré, puis remis mais rien n'y fait:

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

Zoom et dézoom avec Leaflet

JavaScript

Vue hybride

Discussions similaires

Partager

Partager