How to remove blank space at the end of of my leaflet map

Question

When panning my map towards the end of the earth, You see the end of the basemap, and then blank space showing there is no basemap there. Question: How do I remove the blank space and make the map end at the end of the earth as seen on leaflet base map.

js code on map creation var mymap = L.map('mapid').setView([9.4258946,-0.8842213], 1);

 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    // attribution: 'Map data &copy; <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>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiYXd1bWJvcm8iLCJhIjoiY2tmeDNkZmNrMW14YzJ6c3ZtOWxjM2c2cyJ9.Xc6_tLdj7UhBMwZNOleuDg'
}).addTo(mymap);

var markerIcon = L.icon({
    iconUrl: 'target.png',
    iconSize:     [20, 20], 
    iconAnchor:   [0, 0], 
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

CSS code

    .map{
    height: 100vh ;
    width: 100vw;
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

HTML code

        <div class="map" id="mapid" ></div>

Answer 1

I'm not very familiar with leaflet.js but maybe you can try something like this?

https://leafletjs.com/reference-1.7.1.html#map-maxbounds

When you create the map add the max bounds option and set it up with values in this format:

https://leafletjs.com/reference-1.4.0.html#latlngbounds

Answer 2

setMaxBounds will bounce back from [south, west] coordinate to [north, east] coordinate, therefore south should be -90 and north should be 90

const bounds = [[-90, -180], [90, 180]]
L.map("map").setMaxBounds(bounds)

The following is optional. It prevents zooming out of the map based on window height but the actual values will depend on the use case

const minzoom = window.innerHeight > 960 ? 3 : 2

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    minZoom: minzoom,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map)