Leaflet et fenêtre modale Bootstrap
Bonjour,
Je cherche à afficher une carte Leaflet dans une fenêtre modale Bootstrap:
Dans ma page, j'ai un bouton, qui permet d'afficher la fenêtre modale :
Code:
1
2
3
| <div class="row">
<div class="col-md-1"><button type="button" class="btn btn-primary btnInfos" data-bs-toggle="modal" data-bs-target="#infosModal" id="btnInfos" name="btnInfos">i</button></div>
</div> |
J'ai ma fenêtre modale :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="modal fade" id="infosModal" tabindex="-1" aria-labelledby="infosModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="infosModalLabel">Projet <i><span id="PJ_NAME"></span></i></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>Ici des infos</div>
<div id="map" style="width:100%;height:300px" class="mapContainer"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> |
et à la fin de ma page, j'ai une balise <script> :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script>
$(document).ready(function(){
var preview = L.map('map').setView([48.08, -4.35 ], 10);
preview.attributionControl.addAttribution('<a href="https://www.my.fr" target="_blank">my</a>');
var layers = L.layerGroup().addTo(preview);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18
}).addTo(preview);
$(".btnInfos").on("click", function(e){
console.log("test");
setTimeout(function() {
preview.invalidateSize();
}, 100);
});
});
});
</script> |
Quand je clique sur le bouton, j'ai bien la fenêtre modale qui s'affiche, le message "test dans la console".
Mais la carte ne se charge pas correctement : il n'y a pas toutes les dalles, et ça dépasse largement de la fenêtre modale, l'affichage de la carte ne reste pas limité aux dimensions spécifiées dans la balise id=map.
Pourtant, de ce que j'ai vu dans différents forums, c'est le but de l'instruction invalidateSize.
Qu'est ce qui cloche?
Merci,
Nico
