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:

1. Restrict the view of this large square image to just the middle (landscape rectangle) area?
2. 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:

1. Restrict the view of this large square image to just the middle (landscape rectangle) area?
2. Produce a non-square rectangular set of tiles?

Additionally, can Leaflet auto-fit the bounded area to the Map container?

• javascript
• leaflet

2 Answers 2

1. Yes. Use the maxBounds option.
2. No idea, but why do you want to do such a thing?
3. 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!