CODEWITHSUNDEEP
javascripthtmlcssleafletextent
kojo justine
kojo justine

Reputation: 113

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

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.

enter image description here

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>

Upvotes: 1

Views: 1231

Answers (2)

wallfell00
wallfell00

Reputation: 58

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)

Upvotes: 0

Antfere
Antfere

Reputation: 90

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

Upvotes: 1

Related Questions