Twitter-bootstrap – Leaflet map not showing properly in bootstrap 5.0 modal (solution)

     <!-- Modal -->
            <div class="modal fade" id="mapModal">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Standort bestimmen</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <?php include('inc/map.inc.php'); ?>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Fertig</button>
                        </div>
                    </div>
                </div>
            </div>

<script> 
var myModal = document.getElementById('mapModal') myModal.addEventListener('shown.bs.modal', function () {   setTimeout(function() {     map.invalidateSize();   }, 10); }) 
</script>