[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.
