Offline map only scale on loading errors?

[ChristopheLyonnaz]

Hello,

I'm developping an app on Flutter that needs to display offline map.
My need is to display a tile whatever my location and zoom.

To do so, I may have loaded some tiles on my local file system, not covering the whole world with the same zoom level (or instance, I have tiles up to zoom 9 in France, but I only have tile with zoom up to 6 in the US).
If I'm zooming to level 8 in France, and then moving my location to US, I would like the tiles of level 6 to be displayed and scaled, (I have no level 8 tile at this lcoation) rather than having the fallback tile.

If I'm correct in my usage, the current behavior is the following:

• if I zoom up to 8 in France, it returns the available tile correctly,
• if I go deeper (level 10 for instance), flutter_map fails to get the new tile, but manage to scale the upper tile (with zoom 9). It sends an exception as:
  PathNotFoundException: Cannot retrieve length of file, path = '/storage/emulated/0/Android/data/com.xxxxx.yyyy/files/Tiles/13/4080/2948.png' (OS Error: No such file or directory, errno = 2)
• if un-zoom back to level 7, the tile is correctly updated
• now I move my location to NewYork, I fall again in the same error, but there is no scaling to the upper zoom automatically (I was expecting a display of tile at zoom 6, scaled to my map)..

In order to workaround this behavior, I've implemented my own FileTileProvder, that checks correctly if the requested tile is actually present in my local file system or not.
If it is, I return it.
Otherwise, my idea was to be able to return the upper one (i.e the first available tile with a zoom greater at the same location), and to scale this image to the whole map screen.
Unfortunately, I am unable to achieve this scaling.

Using maxNativeZoom is not a solution as I don't know initially what would be the max zoom of my tiles. And this max zoom may differ from one area to another one. I cannot define a maxNativeZoom efficiently.

Any help would be greatly appreciated,
Thank you,
Christophe.

[ChristopheLyonnaz]

Note this behavior can be easily reproduced with flutter_map example, using the sliding_map example, by changing the code as follows:

• create a directory assets/map/anholt_osmbright/0/0/
• put 0.png tile in this directory (showing the whole world) attached
• add this directory in pubspec.yaml in assets section

            child: FlutterMap(
              options: MapOptions(
                initialCenter: const LatLng(56.704173, 11.543808),
               // **Remove min zoom to be able to display zoom level 0** 
               //**minZoom: 12,
                maxZoom: 14,
                initialZoom: 13,
                // **Remove camera constraints to explore the whole world**
                //cameraConstraint: CameraConstraint.containCenter(
                //  bounds: LatLngBounds(northEast, southWest),
                //),
              ),

With this configuration, if you zoom out to zoom level 0, it finally displays the whole world.
If you zoom back in, the world tile (0/0/0) is scaled up, with error messages such as:
I/flutter (10354): Unable to load asset: "assets/map/anholt_osmbright/6/36/11.png".

However, if you start from Anholt island tile at zoom 12, and move outside covered area, flutter_map does not display the world tile scaled, but displays the grey background.

[JaffaKetchup]

Hi there,
This is currently not supported externally I believe, and the closest thing is the maxNativeZoom. However, this is a much simpler mechanism and what you're asking for is not possible with the current TileLayer implementation.
You could write your own TileLayer based on ours, or use a map camera to automatically zoom the map when it travels outside some certain defined bounds (maybe using an animated one).

[ChristopheLyonnaz]

Do you mind if I raise an issue for this to be available in a next release ?

[ChristopheLyonnaz]

Hi @JaffaKetchup
Thank you for the quick answer.
Using zoom with Map Camera is not appropriate when user will move the map to a new position with fingers.

I have experimented another solution, but it is not completely efficient:

• if I don't find a tile, I'm looking for a higher level one (with a less accurate zoom)
• once I found it, I rebuild a new tile at the desired level from this low quality tile
  This is done by extended TileProvider.
  However, I have some real time issue, I think building the new tile is too long and the tile is not used by the TileLayer.
  And moreover, my generated tiles are not reloaded by TileLayer (it seems the tile loading occurs only at TileLayer creation).

I will jump to another possiblity, using tileBuilder ... I'll let you know how it goes ...

[ChristopheLyonnaz]

Hi there,
In order to share my tests, the result with using a local TileBuilder method is not good neither.

I've created a new FileTileProvider as shown below that will return the first available upper level tile if no tile is found at expected level.
And it use the 'scale' parameter to inform the TileBuilder that a scaling is required.
I've also created a TileBuilder that transform the tile by scaling it and translate it.
With all this, I manage to display the tiles with the appropriate zoom, however, they are not correctly positioned in the tile location.

I believe the issue comes from the display of the tile, where it does not always measure 256x256 depending on the current zoom, but I don't see how to adapt my scale accordingly.
If someone has an idea why my rescaled tiles are not displayed properly ?

import 'dart:io';
import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';


class FileZoomingTileProvider extends TileProvider {
  FileZoomingTileProvider();

  @override
  ImageProvider getImage(TileCoordinates coordinates, TileLayer options) {
    bool checkTileExists = false;
    int increment = 0;
    File tileFile = File(getTileUrl(coordinates, options));

    // Si la tuile n'existe pas, on va chercher la tuile de niveau supérieure qui est dispo
    while ((!checkTileExists) && (coordinates.z > increment - 1)) {
      final TileCoordinates currentTile = TileCoordinates(
          (coordinates.x / math.pow(2, increment)).floor(),
          (coordinates.y / math.pow(2, increment)).floor(),
          coordinates.z - increment);
      tileFile = File(getTileUrl(currentTile, options));

      checkTileExists = tileFile.existsSync();
      increment++;
    }

    if (checkTileExists && (increment == 1)) {
      // La tuile a été trouvé à la première itération
      return FileImage(tileFile);
    } else if (checkTileExists) {
      // Il a fallu aller chercher une tuile de niveau supérieur => on la rescale
      return FileImage(tileFile, scale: increment.toDouble());
    } else {
      // La tuile n'a été trouvé -> on passe par le fallback
      final fallbackUrl = getTileFallbackUrl(coordinates, options);
      if (fallbackUrl == null) return FileImage(tileFile);
      return FileImage(File(fallbackUrl));
    }
  }
}


class RectCustomClipper extends CustomClipper<Rect> {
  final double top;
  final double left;
  final Size size;

  RectCustomClipper(this.top, this.left, this.size);
  @override
  Rect getClip(Size size) => Rect.fromLTWH(left, top, size.width, size.height);

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => oldClipper != this;
}

class TileTransformer {
  Widget widget;

  TileTransformer(this.widget);

  void scaleClipOffsetTile(TileCoordinates coordinates, int scale) {
    _offsetTile(scale, coordinates);
    _scaleTile(scale, coordinates);
    _clipTile();
  }

  void _offsetTile(int scale, TileCoordinates coordinates) {
    final int scaleFactor = math.pow(2, scale - 1).toInt();

    final Offset offset = Offset(
      256 * (coordinates.x % scaleFactor) / scaleFactor,
      256 * (coordinates.y % scaleFactor) / scaleFactor,
    );

    widget = Transform.translate(
      offset: -offset,
      child: widget,
    );
  }

  void _clipTile() {
    widget = ClipRect(
      clipper: RectCustomClipper(0, 0, const Size(256, 256)),
      child: widget,
    );
  }

  void _scaleTile(int scale, TileCoordinates coordinates) {
    final double scaleFactor = math.pow(2, scale - 1).toDouble();

    widget = Transform.scale(
      scale: scaleFactor,
      alignment: Alignment.topLeft,
      child: widget,
    );
  }
}

Widget FileZoomingTileBuilder(BuildContext context, Widget tileWidget, TileImage tile) {
  final double scale = (tile.imageProvider as FileImage).scale;
  Widget widget;


  if (scale < 2) {
    widget = tileWidget;
  }
  else {
    // On récupère une partie de la tuile qu'on va zoomer en fonction de l'échelle
    final TileTransformer tileTransformer = TileTransformer(tileWidget);
    tileTransformer.scaleClipOffsetTile(
      tile.coordinates,
      scale.floor(),
    );
    widget = tileTransformer.widget;
  }

  final readableKey = '${tile.coordinates.x} : ${tile.coordinates.y} : ${tile.coordinates.z}';
  return Stack(
      fit: StackFit.passthrough,
      children: [
        widget,
        DecoratedBox(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.red,
            ),
          ),
          child: const SizedBox(width: 256, height: 256),
        ),
        Center(
          child: Text(
            readableKey,
            style: Theme.of(context).textTheme.headlineSmall,
          ),
        ),
      ]
  );
}

[ChristopheLyonnaz]

FYI, the same issue exists actually for any provider.
AS soon as you increase the default maxNativeZoom to set a value bigger than what is provided by your map provider, you fall into the same issue.

for instance, let's say you define a layer with OpenStreetMap as provider. OSM is limited to zoom 20.

    _map_flat = TileLayer(
      urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
      userAgentPackageName: 'com.xyz.abc',
      tileProvider: provider,
      subdomains: ['a', 'b', 'c'],
      maxNativeZoom: 30,
    );

If you zoom on a specific point to display a tile of zoom 20, and continue zooming, the loaded tile will be expanded.
Now, if you move to some adjacent tiles, at some point, you will have a lot of DIO errors, because it fails to load the related tiles and display empty tile in grey.

I will raise an issue to track this problem.