Leaflet map not filling area - php

Question

I am using Leaflet to produce different maps on a button click, but the map is not filling the whole area.
The click event grabs various longitudes and latitudes that were stored in my database and sent to the page in a datatable.
The button click looks like this:
$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
e.preventDefault();
var rampName = $(this).attr('data-rampname');
var delName = $(this).attr('data-delname');
var actramplat = parseFloat($(this).attr('data-actramplat'));
var actramplng = parseFloat($(this).attr('data-actramplng'));
var actdellat = parseFloat($(this).attr('data-actdellat'));
var actdellng = parseFloat($(this).attr('data-actdellng'));
$('#rampName').val(rampName);
$('#delname').val(delName);
$('#actramplat').val(actramplat);
$('#actramplng').val(actramplng);
$('#actdellat').val(actdellat);
$('#actdellng').val(actdellng);
initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng);
$('#mapModal').modal('show');
});
function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
//window.dispatchEvent(new Event('resize')); <-- tried this
//map.invalidateSize(); <-- also tried this
var map = L.map('map').setView([actreclat,actreclng], 8);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=zAlHsNvo6jxv4ENZxW3R', {
attribution: '© MapTiler © OpenStreetMap contributors'
}).addTo(map);
}
In my header, I styled the map as follows:
<style>
height:275px;
width:100%;
</style>
In an attempt to prevent a duplicate post, I attempted to use answers from the following post to no avail:
Data-toggle tab does not download Leaflet map
The map continues to NOT fill the whole area.
What adjustments do I need in order to ensure the map fills the whole area?

Answer 1

You're on the right track - the call to invalidateSize() needs to go after the element which contains the map is made visible - which is presumably like this
$('#mapModal').modal('show');
map.invalidateSize();

Answer 2

I added the following modal command and threw the function call inside of it:
$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
e.preventDefault();
var rampName = $(this).attr('data-rampname');
var delName = $(this).attr('data-delname');
var actramplat = parseFloat($(this).attr('data-actramplat'));
var actramplng = parseFloat($(this).attr('data-actramplng'));
var actdellat = parseFloat($(this).attr('data-actdellat'));
var actdellng = parseFloat($(this).attr('data-actdellng'));
$('#rampName').val(rampName);
$('#delname').val(delName);
$('#actramplat').val(actramplat);
$('#actramplng').val(actramplng);
$('#actdellat').val(actdellat);
$('#actdellng').val(actdellng);
$('#mapModal').modal('show');
// added below modal function
$("#actionMatchbackModal").on("shown.bs.modal", function () {
initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng);
});
});
Then, inside the actual function, I added the map.invalidateSize() after the creation of the map variable:
function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
var map = L.map('map').setView([actreclat,actreclng], 8);
map.invalidateSize();
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=zAlHsNvo6jxv4ENZxW3R', {
attribution: '© MapTiler © OpenStreetMap contributors'
}).addTo(map);
}
Now the map fills the whole area.