I recently experimented with Leafletjs maxBounds by testing it out using code from Mapbox's example.
For my complete code, you can also view it on this jsfiddle link.
<!DOCTYPE HTML>
<html>
<head>
<title>leaflet bounds test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var southWest = L.latLng(40.712, -74.227),
northEast = L.latLng(40.774, -74.125),
mybounds = L.latLngBounds(southWest, northEast);
var map = L.map('map').setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
maxBounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
</script>
</div>
</body>
The result on jsfiddle seems to be displayed oddly, and I am unsure why that is happening.
Can anyone explain why the code above does not behave like the one in the Mapbox example?