3

I want to make this map bounce to the center, and make the red line the limit that you can move the map.

Don't know why my fitbounds doesn't work.

Any help?

My code:

var mapBounds = L.latLngBounds([
                    [-8576 / 2, -8576 / 2],
                    [8576 / 2, 8576 / 2]
                ]);
                map.fitBounds(mapBounds);

http://plnkr.co/edit/XQxgpcYjiVaUhU4jCQV9?p=preview

I want something similar to this example:

https://www.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/

You can't move away from that part.

  • An obvious but possibly unforeseen effect of MaxBounds-type things is that users can't scroll to markers near the boundary: Say your northernmost location, the marker/icon will fall off the map when zoomed in from initial level; and you can't center your map around it (e.g. for screenshot). So ideally, you'd insert some extra space (say +1degree for N/E corner and -1degree for S/W corner). – user3445853 Nov 5 '19 at 21:21
11

[Final Answer]

I bet you can easily resolve this by setting the map's maxBounds equal to its initial bounds immediately upon loading. :)

Just add this to your initializing code once your map variable is ready.

map.setMaxBounds(map.getBounds());

[Original Response]

When you instantiate your Leaflet map, you just need to pass in a maxBounds option among your map options.

When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method.

Looking at the Mapbox example you provided, modified a bit, that happens like this:

// Create the LatLngBounds object like this..
// 
var southWest = L.latLng(40.712, -74.227),
    northEast = L.latLng(40.774, -74.125),
    bounds = L.latLngBounds(southWest, northEast);

var map = L.map('map', {
    maxBounds: bounds,   // Then add it here..
    maxZoom: 19,
    minZoom: 10
});


[Follow-up to comments]

With respect to the custom coordinate system in use here, it might be useful to add something like this toward the end of your initialization code to get the current LatLngBounds values for your map right after it has loaded:

console.log(map.getBounds().toString());

Hopefully then, the console output will yield some clues as to how the coordinates should look. If that doesn't work, you can get more specific, like this:

console.log(map.getBounds().getSouthWest().toString()); console.log(map.getBounds().getNorthEast().toString());

Which I expect will show exactly how those southwest and northeast coordinates look after the map is initialized, and they have been normalized for your leaflet map.

Finally, it might help to look here for a little more discussion on handling the LatLngBounds object within a custom coordinate system.

  • But how do I achieve that bounds with my custom coordinates? That's the problem. – RogerHN Feb 5 '16 at 19:27
  • 1
    @RogerHN, hmm gotcha ..well, how are you actually initializing your map with your custom coordinates? It might help to see that. Also check out this post on SO that discusses maxBounds with respect to custom coordinate systems. – elrobis Feb 6 '16 at 18:23
  • @RogerHN, if I were in your shoes, I'd add something like this toward the end of your initialization code to get the current extend of your map right after it has loaded: console.log(map.getBounds().toString); Hopefully then, the console output might give you a clue as to how that object should look. You can also get very specific, like console.log(map.getBounds().getSouthWest().toString);, which will show you just that southwest coordinate.. and .getNorthEast(), respectively. If you can just see them once, then you should know how to proceed. – elrobis Feb 6 '16 at 18:27
  • 1
    @RogerHN, note the two parens following .toString() ..it looks like you're missing them, which is why it's returning the function definition rather than executing the function and returning the result. – elrobis Feb 11 '16 at 20:41
  • 1
    @RogerHN, something just occurred to me--I bet you can just set the maxBounds equal to the current bounds like this: map.setMaxBounds(map.getBounds()); – elrobis Feb 11 '16 at 20:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.