Leaflet - when zooming decrease tiles dimension instead of using different tiles

0
votes

I am using angular-leaflet-directive with World_Imagery provider in a Ionic hybrid app. Only purpose of the map is to draw circle of varying radius around center (position of the user). User changes radius by interacting with a slider. Radius can take from 10 meters to 2km. I am using fitBounds() to zoom out when circle is bigger than the viewport. When chaning from zoom level 14 to zoom level 13 quality of images becomes very bad. I would like to avoid that and just change the dimensions of the tiles appropriately.

If someone can think of a better solution, it's more than welcome.

2
ionic-frameworkleaflet
Don't you mean "tiles" instead of "titles"? Also, what zoom level are you having issues at? 4? 12? 18? Any particular world area the images are bad? – IvanSanchez
Tiles, you are right. At zoom level 13 quality decreases significantly. I have edited the question. Thanks – user3002996
Remember that at zoom N-1, each tile normally covers 4 tiles of zoom N. So if you keep tiles from zoom 14 at zoom 13, you will have 4 times as many tiles in you viewport. And so on if you go to even lower zooms… – ghybs
@ghybs I am aware of that increase. The only reason for this solution is that I know the zoom level 13 is the smallest zoom level user will ever reach. – user3002996

2 Answers

0
votes

An alternative solution would be to use some imagery provider for zoom levels 0-13 and then your current one for zoom levels 14-18.

0
votes

If anyone is interested I have achieved what I wanted by:

  1. Set options.tileSize from L.TileLayer to half the usual size so 128.
  2. Change constant from L.CRS.scale to 128.

For my use case it is perfect but user can still see bad quality titles if the map will be zoomed out enough.