2

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?

approxiblue
  • 6,982
  • 16
  • 51
  • 59
ukmikeb
  • 303
  • 1
  • 3
  • 15

2 Answers2

4
  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.
approxiblue
  • 6,982
  • 16
  • 51
  • 59
L. Sanna
  • 6,482
  • 7
  • 33
  • 47
  • Thanks this was all because I am trying to show a hi-res image that is landscape. not square! – ukmikeb Jun 20 '13 at 13:51
  • 2
    How do you know what the maxBounds are for a remote tileLayer? – Titan Apr 10 '15 at 08:47
  • Look at this for more details: https://stackoverflow.com/questions/22155017/can-i-prevent-panning-leaflet-map-out-of-the-worlds-edge – Andrew Koster Apr 30 '20 at 21:14
  • @Titan The max bounds are whatever your client code says they are, even if the tiles are loaded from a remote server. They're latitude and longitudes (see the maxBounds documentation link above for the specific type of object you use to pass the lat/long). – Andrew Koster Apr 30 '20 at 21:17
  • The actual bounds of the Earth are -90 degrees to +90 degrees vertically (latitude), and -180 degrees to 180 degrees horizontally (longitude). So that's what you'd use, if you want your viewport to be limited to exactly one Earth. – Andrew Koster Apr 30 '20 at 21:19
  • Those bounds will limit the user in an annoying arbitrary way, especially for east/west scrolling, for any map of the entire Earth. For example, you might only be able to scroll west to go from Asia to the Americas. If you change the horizontal bounds to - 360 degrees and +360 degrees, then your viewport is limited to two Earths wide, so at least you can scroll east or west to anywhere, once, from the center. – Andrew Koster Apr 30 '20 at 21:57
2

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!

TheGreatestHacker
  • 85
  • 1
  • 6