Leaflet map not filling area

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: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  }).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?

score 1 · Answer 1 · answered Oct 24 '19 at 17:28

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();

answered Oct 24 '19 at 17:28

peeebeee

2,541
6
21
26

I attempted your suggestion. However, the map got larger only by 2 or 3 tiles. I can provide screen shots, if necessary. Any thoughts? – John Beasley Oct 24 '19 at 17:36

score 1 · Accepted Answer · answered Oct 24 '19 at 19:23

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: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  }).addTo(map);
}

Now the map fills the whole area.

Leaflet map not filling area

2 Answers2