Currently, I am in the process of integrating a leaflet map into my meteor-based website that utilizes blaze as its templating engine.
I have encountered some peculiar issues regarding the map size and its behavior when dragging and zooming.
The map initialization code is as follows:
var mymap = L.map('leaflet-map').setView([40.712, -74.227], 5);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 15,
minZoom: 1,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
HTML setup:
<div id="map-div">
<div id="map-inner-div">
<div id="leaflet-map"></div>
</div>
</div>
CSS styles applied:
#map-div {
height:300px;
width:500px;
}
Upon loading the webpage, only a single tile displays which does not fill its parent container.
https://i.sstatic.net/lhI39.png
Any attempt at dragging or zooming results in unpredictable movement and random appearance of additional tiles.
https://i.sstatic.net/wdSnV.png
No error messages are generated during this erratic behavior.
My assumption is that the map's dimensions default to full-screen, resulting in inconsistent tile loading.
If anyone can provide search terms or suggestions to guide me in resolving this issue, it would be greatly appreciated as I struggle to articulate what I am observing.