Leaflet map in Bootstrap Modal

[skate master]

Mensen,

voor onze vereniging heb ik een lijst met GPX bestanden van onze club ritten op de website staan.
Alleen een naam van de rit zegt niet zoveel dus had ik het idee om deze GPX bestanden op een Leaflet map weer te geven. De bestanden worden in een lijst weergegeven, door op een item te klikken worden de details van de rit weergegeven in een bootstrap Modal.
In deze modal heb ik de Leaflet container verwerkt zodat hier de map weergegeven wordt. Via een Leaflet plugin lukt het mij om de GPX weer te geven op de kaart.

Het probleem is echter dat de kaart niet volledig geladen wordt wanneer de Modal wordt geopend.
Ik heb in de Modal een extra knop gemaakt waarmee de kaart te reloaden is. Wanneer op deze knop gedrukt wordt, wordt de kaart wel netjes getoond. Het weergeven van de kaart en de GPX track werkt dus, alleen is er een extra klik voor nodig.

In mijn zoektocht door Google heb ik een aantal mogelijke oplossingen gevonden echter krijg ik het niet werkend of ik doe iets fout.

1. Voeg mymap.invalidateSize(); toe nadat de modal is geladen
2. genereer de map container dynamisch wanneer de Modal geopend wordt

Hieronder de javascript code voor het laden van de Leaflat map en het openen van de Bootstrap modal.
Wie kan mij vertellen wat ik fout doe of over het hoofd zie?

JavaScript:

function load_map(){
    document.getElementById('gpxmap').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
    var mymap = new L.map('map').setView([52.277276, 6.15847], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: '#token#'
    }).addTo(mymap);
    // add gpx file to map
    var gpx = jQuery('input[name="gpxfile"]').val(); // URL naar GPX bestand
    new L.GPX(gpx, {async: true}).on('loaded', function(e) {
        mymap.fitBounds(e.target.getBounds());
    }).addTo(mymap);
    mymap.invalidateSize();
}

jQuery(document).ready(function(){
    jQuery('.gpxlink').on("click", function(event){
        var titel = jQuery(this).data("titel");
        var gpxfile = jQuery(this).data("gpxfile");
        var afstand = jQuery(this).data("afstand");
        
        jQuery('input[name="gpxfile"]').val(gpxfile);
        jQuery('.modal-title').html(titel);
        jQuery('.modal-afstand').html(afstand+ ' KM');
        jQuery('#gpxmodal-lg').appendTo("body").modal('show');
        jQuery('#gpxmodal-lg').css("z-index", "150000");
    });

    jQuery('.reloadmap').on("click", function(event){
        load_map();
    }); 

    jQuery('.leaflet-modal').on('show.bs.modal', function(){
        setTimeout(function() {
            load_map();
        }, 10);
    });

    jQuery('.leaflet-modal').on("hidden.bs.modal", function () {
        document.getElementById('gpxmap').innerHTML = "";
    });
});  

[skate master]

En inmiddels opgelost.

De load moest op shown.bs.modal in plaats van op show.bs.modal

JavaScript:

jQuery('.leaflet-modal').on('shown.bs.modal', function(){
        setTimeout(function() {
            load_map();
        }, 10);
    });