Let me start by showing you a screenshot of the issue I am facing. Check it out here
The screenshot clearly shows a gap between my expandable left navbar and the left border of the map image.
However, when I resize the browser window by dragging and dropping, the gap disappears. Check out the resized view here
The gray line next to the navbar represents the left side of the map image I am using.
Some additional information about my setup:
- Using Leaflet.css and .js 1.9.3
- Using Bootstrap 5
- Using jQuery 3.6.3
- Testing on a Windows machine with Xampp
I've been struggling to figure out the issue. I've tried tweaking some CSS properties like giving the #map container left: -112px; or adjusting the translate3d values for the .leaflet-map-pane, but I can't seem to pinpoint the source of the problem.
Here is the code snippet I'm using. I've broken it down to keep it as minimal as possible in hopes that someone might be able to help me identify the root cause.
jQuery and JS scripts are included in the HTML, but here they are separately:
<script>
$groesse = 6048;
// Create a new Leaflet map object
var map = L.map("map", {
crs: L.CRS.Simple
});
var bounds = L.latLngBounds([
[0, 0],
[$groesse, $groesse]
]);
var wantedZoom = map.getBoundsZoom(bounds, true);
var center = bounds.getCenter();
map.setView(center, wantedZoom);
map.setMaxBounds(bounds);
// Set maximum and minimum zoom levels
map.setMaxZoom(2);
map.setMinZoom(-4);
map.setZoom(-3)
L.imageOverlay("", bounds, {}).addTo(map);
</script>
<script>
function toggleFilters() {
$('#navbar_right').animate({
width: 'toggle'
}, function() {});
}
// // Get the toggle button and navbar_right element
const toggleBtn = document.querySelector('.btn-toggle-filters');
const navbarRight = document.querySelector('.navbar_right');
// Add click event listener to the toggle button
toggleBtn.addEventListener('click', function() {
// Toggle the collapsed class of the navbar_right element
navbarRight.classList.toggle('collapsed');
});
</script>
Here is the HTML part:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/cdn-cgi/l/email-protection" />
...
And finally, the CSS styling:
.leaflet-container {
background-color: black;
}
...