Leaflet maxBounds - bounds do not work
21,165
Solution 1
You must use bounds as an option of L.tileLayer, and not maxBounds.
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);
Solution 2
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);
Author by
wolfmuc
Updated on July 20, 2022Comments
-
wolfmuc almost 2 years
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?