Menu
I tried out Leafletjs maxBounds with example code I found at Mapbox.
Below you find my complete code, also in a jsfiddle here.
<!DOCTYPE HTML>
<html>
<head>
<title>map - leaflet test bounds</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="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
</script>
</div>
</body>
The jsfiddle result looks odd, I don't know why.
Why doesn't the upper code work like the Mapbox example?
286
You must use bounds as an option of L.tileLayer, and not maxBounds.
Bounds reference
Also, it seems you've loaded a wrong file for the leaflet.css in JSFiddle, the correct source is this: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
Finally, avoid to use percent sizes in JSFiddle, use pixel ones instead. Here's a working JSFiddle: http://jsfiddle.net/1zyL4q4a/4/
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
This is the (my) final code.
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[40.712, -74.227],
//north east
[40.774, -74.125]
],
}).setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With