Maximum number of tiles?

[janstehno]

Hello,

so I am pretty new to programming phone apps, but I am maintaining one for almost 2 years now. App is made as a companion for a hunting game. In my app I have 13 maps (for now) where I am showing positions of outposts and animals. Until now I did it through Stack and Image.assets only and I stood upon performance issues when there is too much to show. I also implemented InteractiveViewer for zooming. So when zoomed it is even worse.

I was trying to find some package that could help me improve my maps performance-wise and even helped me with more interactivity. Every other map package (and I think this one too) offers Google Maps. The game however has its own maps. I was able to create some tiles and I was also able to show them in the grid in the app using this package. I had to make some little changes to the zoom but I made it work too.

However I am still trying to solve one last issue. I would like to have about 3 zoom levels. The maps are squares. 2000x2000 png files. So the number of tiles would be always final. 1st zoom level will have 5x5 tiles, 2nd 10x10, etc. What it does in my app is that I can move further than the shown 25 tiles.

I would like to know if there is any way I could limit the number of generated tiles by the builder? Or rather how to not pan out of the shown tiles of the map? I was trying to change the algorithm for it but could not make it work. I also tried to limit the Stack size by wrapping it in the SizedBox but it did not help either. I would really love to use this package as it helps with the performance when zoomed in as it only shows the tiles it needs, not everything like I have it in the current version of the app (there are almost 20 2000x2000 pngs when user wants to show everything).

I would also like to know if I would be able to show many markers (like hundreds, in some cases almost thousands). If anybody needs a visual aid, please look at 'COTW Companion' app in the GooglePlay or AppStore. I really do not want to promote anything at all. Just want to provide this in case I did not explain the problem properly.

Anyways, I hope everything is clear. If I am missing something I am so sorry. But if anybody has solution to this, I would really appreciate it.

Thank you!

[xclud]

Hi,

Map is using Stack and Positioned in the background, but in a very efficient way, still not the best possible performance. As you mentioned, It only displays the tiles needed. Switching to a custom renderer is on the roadmap with no ETA/Priority.

Limiting the user to a specific boundary is easy. Basically it is if(_controller.center.x > blabal) _controller.move(someDeltaDx). I am sure you get the idea. If you limit the user from panning, you have limited the tiles that will be generated. It only generates on-demand.

Please put the link to Google Play Store.

[janstehno]

Thank you for your quick answer. I will try to limit the panning boundaries then.

Links should be now added to the main text.

[xclud]

I forgot to answer one question about many markers. The quick answer is No i cannot handle many markers. There is no algorithm implemented to optimize markers and/or clustering them. So you need to benchmark and figure out how many markers suits your need. I also would like to know the results if you don't mind sharing.

[janstehno]

Well, that will be a challenging task for me but I can share the observasions and results for sure.

[xclud]

Beautiful app. I'd like to see Map is used by you. And please let me know if you need more help.

Btw, i didnt see "many" markers in the app. It will be handled i guess.

[janstehno]

Thank you. More layers can be turned on from the bottom right corner menu. Most layers can be turned on on 'Revontuli Coast' map btw. Screenshot shows how it could look like. I was thinking about the dots being also markers like Containers or something but like I wrote I do not know if the app will handle it.

[xclud]

If the markers are not interactive you could also bake them in a separate tile layer as static images.

[janstehno]

Hello,

so I was able to somehow created something I wanted. It is probably not the best solution, but it works. First of all I had to create my own projection as the one you are using is for the real world map. I have flat 1:1 map. So the values for both axis will be calculated with the same method.

Projection

  @override
  LatLng toLatLng(TileIndex tile) {
    final x = tile.x;
    final y = tile.y;
    final xx = x - 0.5;
    final yy = y - 0.5;
    final lat = 360.0 * yy;
    final lng = 360.0 * xx;
    return LatLng(lat, lng);
  }

  @override
  TileIndex toTileIndex(LatLng location) {
    final lng = location.longitude;
    final lat = location.latitude;
    double x = (lng + 180.0) / 360.0;
    double y = (lat + 180.0) / 360.0;
    return TileIndex(x, y);
  }

Second, I had to "lock" the movement out of the boundaries of the shown tiles. In my case Lat and Lng values goes from -360 to 360 for both axis. And my thought was to move the center half the screen away from the border when border goes into the screen. That is the really best way I could come up with.

Border check and Center move

centerLatEnd and centerLngEnd are there so I can calculate the length between the border and the center value when the border went into the screen

    //LEFT BORDER
    if (transformer.toOffset(LatLng(_mapController.center.latitude, -360)).dx > 0) {
      double y = _centerLngEnd + (-360 - transformer.toLatLng(const Offset(0, 0)).longitude);
      y = y > 0 ? 0 : y;
      _mapController.center = LatLng(_mapController.center.latitude, y);
    }

    //RIGHT BORDER
    if (transformer.toOffset(LatLng(_mapController.center.latitude, 360)).dx < _screenWidth) {
      double y = _centerLngEnd + (360 - transformer.toLatLng(Offset(_screenWidth, 0)).longitude);
      y = y < 0 ? 0 : y;
      _mapController.center = LatLng(_mapController.center.latitude, y);
    }

    //TOP BORDER
    if (transformer.toOffset(LatLng(-360, _mapController.center.longitude)).dy > 0) {
      double x = _centerLatEnd + (-360 - transformer.toLatLng(const Offset(0, 0)).latitude);
      x = x > 0 ? 0 : x;
      _mapController.center = LatLng(x, _mapController.center.longitude);
    }

    //BOTTOM BORDER
    if (transformer.toOffset(LatLng(360, _mapController.center.longitude)).dy < _screenHeight) {
      double x = _centerLatEnd + (360 - transformer.toLatLng(Offset(0, _screenHeight)).latitude);
      x = x < 0 ? 0 : x;
      _mapController.center = LatLng(x, _mapController.center.longitude);
    }

    _centerLatEnd = _mapController.center.latitude;
    _centerLngEnd = _mapController.center.longitude;

Last thing I was worried about were markers. I created a long list of coordinates for each zoom level. I have 3. The first zoom level should show as few markers as possible. Then you should see more details the more you zoom in. I had to also add a function to show only the markers that are in the view and do not care about the ones that are not.

Check if marker in view

left, top, right, and bottom are border of the marker

  bool _inView(double left, double top, double right, double bottom) {
    if ((right >= 0 && left <= _screenWidth) && (bottom >= 0 && top <= _screenHeight)) return true;
    return false;
  }

Every marker on

zoom 1

zoom 2

zoom 3

Unfortunately I was not working with a performance workbench. So I think that this is still not the best solution for older devices. But overall the performance should be better than before.

Anyways thank you for this awesome package. The base of it helps me a lot.

[xclud]

My pleasure @janstehno,

Your above post has a potential be become an article/tutorial/wiki.