Zoom sur une carte Leaflet
Bonjour,
Sur ma page web (django+bootstrap), j'ai plusieurs boutons, lorsque je clique sur un des boutons, j'ouvre une fenêtre modale avec une carte Leaflet, je récupère des coordonnées géographiques (la liste dépend du bouton cliqué), je crée un layer geojson à partir de ces coordonnées, j'ajoute le geojson à la carte et je zoome sur l'emprise du geojson.
Chaque bouton a une classe 'btnInfos', donc dans le code jquery, je met mon code dans un événement $(".btnInfos").on("click", function(e){
Le code :
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| $(document).ready(function(){
var preview = L.map('map').setView([48.08, -4.35 ], 5);
preview.attributionControl.addAttribution('Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>');
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(preview);
$(".btnInfos").on("click", function(e){
preview.eachLayer(function(layer) {
if (!!layer.toGeoJSON) {
preview.removeLayer(layer);
}
});
var pts = Liste des points de la forme (x, y)
if (pts.length > 1) {
var pts_f = [];
var lat = [];
var lon = [];
for (const p of pts.values()) {
var xy = p.split(" ");
pts_f.push([xy[0], xy[1]]);
lon.push(xy[0]);
lat.push(xy[1]);
}
var xmin = lon[0];
var ymin = lat[0];
var xmax = lon[0];
var ymax = lat[0];
for (let v of lon) {
if (v < xmin) {xmin = v}
if (v > xmax) {xmax = v}
}
for (let v of lat) {
if (v < ymin) {ymin = v}
if (v > ymax) {ymax = v}
}
var bbox = [{
"type": "Feature",
"properties": {"NAME": myname},
"geometry": {
"type": "Polygon",
"coordinates": [pts_f]
}
}];
var lyr = L.geoJSON(bbox, {
onEachFeature: function (f, l) {
l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
}
}).addTo(preview);
preview.fitBounds(lyr.getBounds(), true);
}
});
}); |
Le problème :
J'affiche la page, je clique sur un des boutons : j'ai bien le geojson qui s'affiche, maisla carte reste zoomée sur l'emprise 'monde'
Lorsque je ferme la fenêtre modale et que je clique sur un autre bouton, j'ai bien le nouveau geojson qui s'affiche et la carte est bien zoomée sur l'emprise du geojson.
Pourquoi c'est juste le premier affichage qui ne se zoome pas correctement? Est-ce qu'il y a quelque chose à initialiser sur la carte?
Merci,
Nico
