1

I have a rectangular PNG image which gets converted to tiles using a tool "Maptiler".

MapTiler itself renders an html with leaflet script added to it which in turn lets me zoom in and zoom out.

The issue I am currently facing is since the image isn't square,So while creating the tiles,the maptiler is generating a transparent grey image to cover up the rest of the image as it doesn't fit onto the edges.Hence I am getting a grey border as described in the image below.

enter image description here

So my question is if there is any tool that can stretch the last tile instead of adding a grey border to cover up the image which "maptiler" is doing ??

or if leaflet js supports non square tiles ?? Thanks

Sumodh Nair
  • 1,656
  • 1
  • 11
  • 34

2 Answers2

0

I don't think leaflet supports non square tiles.

In the documentation, tileSize option assumes that tiles are square: http://leafletjs.com/reference.html#tilelayer

YaFred
  • 9,698
  • 3
  • 28
  • 40
0

I had the same issue with DeepZoom, and used tileLayer.Canvas to solve it: http://leafletjs.com/reference.html#tilelayer-canvas

(I used async = true, loaded the image using a temporary img element, waited to img.loaded event and drawn to canvas using canvas.drawImage(). Maybe it is not the most efficient way to do that but it was enough for my purpose).

In addition there is a plugin which might help (I didn't check it myself): https://github.com/aparshin/leaflet-boundary-canvas

MaMazav
  • 1,773
  • 3
  • 19
  • 33