I have a square image 16384x16384 that has been sliced into tiles using MapTiler to create 6 levels of zoom in Leaflet.
I have set up the image in Leaflet as follows:
var map = L.map('map', {
maxZoom: 6,
minZoom: 0,
}).setView([0, 0],1);
var tilesURL = "_server/tiles/{z}/{x}/{y}.jpg";
L.tileLayer(tilesURL, {
maxZoom: 6,
continuousWorld: 'false',
tms: true
}).addTo(map);
How would I either:
- Restrict the view of this large square image to just the middle (landscape rectangle) area?
- Produce a non-square rectangular set of tiles?
Additionally, can Leaflet auto-fit the bounded area to the Map container?
I have a square image 16384x16384 that has been sliced into tiles using MapTiler to create 6 levels of zoom in Leaflet.
I have set up the image in Leaflet as follows:
var map = L.map('map', {
maxZoom: 6,
minZoom: 0,
}).setView([0, 0],1);
var tilesURL = "_server/tiles/{z}/{x}/{y}.jpg";
L.tileLayer(tilesURL, {
maxZoom: 6,
continuousWorld: 'false',
tms: true
}).addTo(map);
How would I either:
- Restrict the view of this large square image to just the middle (landscape rectangle) area?
- Produce a non-square rectangular set of tiles?
Additionally, can Leaflet auto-fit the bounded area to the Map container?
Share Improve this question edited Feb 8, 2017 at 20:03 approxiblue 7,12216 gold badges52 silver badges59 bronze badges asked Jun 19, 2013 at 9:03 ukmikebukmikeb 3031 gold badge5 silver badges15 bronze badges2 Answers
Reset to default 4- Yes. Use the maxBounds option.
- No idea, but why do you want to do such a thing?
- Yes: the method fitBounds does that.
Couldn't edit @L. Sanna code since the queue is full but I would like to contribute with an example on how to use maxBounds for the first question.
I am using Leaflet 1.7.1 on Angular
Note:
- maxBounds() accepts latLngBounds data type as an argument. In my case I used a tuple holding the two coordinates.
- maxboundViscosity() accepts a value between 0.0-1.0 that will control how solid the bounds are when dragging the map out of bounds. Value on 1 will prevent any out of bounds areas from showing.
- Tip: Adjust you minZoom to have the view not show any out of bound areas.
this.map = L.map('map', {
maxBounds: [[-90, -260],[90, 260]],
maxBoundsViscosity: 1,
center: [39.8282, -98.5795],
zoom: 5,
zoomSnap: 0.15 // enables fractional zooms
});
Happy coding!