Geek Answers Handbook

Adding additional zoom levels to sheet maps

I use a leaflet to create a photo card with my own fragments, which works as expected.

I am trying to figure out how I can prevent scaling by following this Quadtree pattern:

  • Scale level 0 - width of the entire map = 256 pixels;
  • Scale level 1 - the width of the entire map = 512 pixels;
  • Scale Level 2 - Width of the entire map = 1024px;
  • Etc...

I would like to be able to increase the values ​​in increments of 25% or 100 pixels.

100px increment example:

  • Scale level 0 - Width of the entire map = 200 pixels;
  • Scale Level 1 - Width of the entire map = 300 pixels;
  • Scale Level 2 - Width of the entire map = 400 pixels;
  • Etc...

Question: What is the logic for this? If at all possible?

My reason for this is so that my photo card (which does not wrap like a regular card) can be more responsive and fit the users screen beautifully.

I made a demonstration of my problem, which can be seen here.

+6
source share
1 answer

The short answer is that you can only show zoom levels for which you have prepared tiles beforehand. The flyer will not create intermediate zoom levels for you.

The long answer is that in order to use this, you need to define your own CRS scale method and transfer it to your card, for example:

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, { scale: function (zoom) { // This method should return the tile grid size // (which is always square) for a specific zoom // We want 0 = 200px = 2 tiles @ 100x100px, // 1 = 300px = 3 tiles @ 100x100px, etc. // Ie.: (200 + zoom*100)/100 => 2 + zoom return 2 + zoom; } }); var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);

In this example, I extended L.CRS.Simple , but you can, of course, extend any CRS from the API you need, or even create your own from scratch.

Using a scale factor that results in a map pixel size that is not a multiple of your pleating means that your right / bottom border tiles will be partially filled with map data. This can be eliminated by making the unmarked portion of such boards 100% transparent (or the same as your background).

However, in my opinion, a much better idea is to set the pleating according to the lowest common denominator, in this case 100px. Remember to reflect this using the tileSize option on your tile layer. And, of course, you will need to redisplay your image at 100x100 pixels, instead of using 256x256 fragments at present.

One caveat, the current version of LeafletJS (0.5) has an error that prevents the user-defined scale () method from working, due to the TileLayer class being hard-coded to use level 2 scaling. However, the change you need to make is minor and hopefully this will be covered in a future version of Leaflet. Just change TileLayer._getWrapTileNum() to:

 _getWrapTileNum: function () { // TODO refactor, limit is not valid for non-standard projections return Math.pow(2, this._getZoomForUrl()); },

To:

 _getWrapTileNum: function () { return this._map.options.crs.scale(this._getZoomForUrl()); },
+8
source

More articles:


All Articles