Discussion :

[DiverSIG]

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 :

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

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 :

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

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
 
<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 &copy; <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

[DiverSIG]

Résolu !
Dans la déclaration de la librairie Leaflet, j'avais déclaré que leaflet.js, et pas le css

Nico