CODEWITHSUNDEEP
javascripthtmlleaflet
studyacc
studyacc

Reputation: 33

Setting a Max Boundary is not working Leaflet

I seem to be unable to set a Max Boundary, so that the map bounces back after the user has reached a certain point. Also every time I've tired to change the fitbounds() code the map disappears from my Website.

I've looked at the Leaflet documentation over and over again, with very little luck and been looking through Google for any answers and all the code I have tried has not work. I believe I'm missing or not seeing something really simple.

Any ideas?

Upvotes: 3

Views: 1128

Answers (2)

nunop
nunop

Reputation: 2207

If all you want is to restrict the view to a given geographical boundary, the simplest solution is to set the maxBounds option. Unless you want to do it dynamically, in which case the option to use is setMaxBounds. The fitBounds method seems redundant and may actually be the reason why you aren't getting the desired outcome.

var southWest = L.latLng(52.456009,-10.685582);
var northEast = L.latLng(51.699800,5.215615); 

var maxBoundArea = L.latLngBounds(southWest, northEast);

var map = L.map('map', {        
    zoomControl:true, 
    maxNativeZoom:28, 
    minZoom:8, 
    maxBounds: maxBoundArea
});

Upvotes: 2

Matt-the-Marxist
Matt-the-Marxist

Reputation: 174

I would suggest writing a constrain function

function constrain(n,low,high){
    return Math.max(Math.min(n, high), low);
}

* Note: I did not think of this myself, it is a function in p5 and thought it might work*

Documentation:

https://github.com/processing/p5.js/blob/0.7.3/src/math/calculation.js#L76

Upvotes: 1

Related Questions