Flutter_map: MBTilesImageProvider.fromFile() is not working

[aliyazdi75]

I've downloaded mbtile file from https://openmaptiles.com/downloads/planet/ and put it on phone storage and called MBTilesImageProvider.fromFile(mbtileFile) and I've got these errors:
(The mbtile file was Germany like your example)

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following message was thrown resolving an image codec:
Failed to load tile for coords: Coords(5265, 3221, 13)

Image provider: MBTileImage()
Image key: MBTileImage()
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5266, 3221, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (3) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5267, 3221, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (4) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5265, 3222, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (5) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5266, 3222, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (6) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5267, 3222, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (7) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5265, 3223, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (8) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5266, 3223, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (9) Exception caught by image resource service ════════════════════════════════════════════
Failed to load tile for coords: Coords(5267, 3223, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (10) Exception caught by image resource service ═══════════════════════════════════════════
Failed to load tile for coords: Coords(5265, 3224, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (11) Exception caught by image resource service ═══════════════════════════════════════════
Failed to load tile for coords: Coords(5266, 3224, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (12) Exception caught by image resource service ═══════════════════════════════════════════
Failed to load tile for coords: Coords(5267, 3224, 13)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (13) Exception caught by image resource service ═══════════════════════════════════════════
Failed to load tile for coords: Coords(35207, 21491, 16)
════════════════════════════════════════════════════════════════════════════════════════════════════
....

[johnpryan]

Are you sure there are tiles in that database for those coordinates?

[aliyazdi75]

Yes, I am.
Are you sure this transform is correct?

class SphericalMercator extends Projection {
  static const int r = 6378137;
  static const double maxLatitude = 85.0511287798;
  static const double _boundsD = r * math.pi;
  static final Bounds<double> _bounds = Bounds<double>(
    CustomPoint<double>(-_boundsD, -_boundsD),
    CustomPoint<double>(_boundsD, _boundsD),
  );

  const SphericalMercator() : super();

  @override
  Bounds<double> get bounds => _bounds;

  @override
  CustomPoint project(LatLng latlng) {
    var d = math.pi / 180;
    var max = maxLatitude;
    var lat = math.max(math.min(max, latlng.latitude), -max);
    var sin = math.sin(lat * d);

    return CustomPoint(
        r * latlng.longitude * d, r * math.log((1 + sin) / (1 - sin)) / 2);
  }

  @override
  LatLng unproject(CustomPoint point) {
    var d = 180 / math.pi;
    return LatLng((2 * math.atan(math.exp(point.y / r)) - (math.pi / 2)) * d,
        point.x * d / r);
  }
}

[augusto3691]

That's beacuse the mbtiles from openmaptiles is a pbf vector format, and this flutter_maps expected a PNGs inside

[4F2E4A2E]

@augusto3691 do you have any idea how we could add support for pbf vector format?

[augusto3691]

Hello @4F2E4A2E, i give up for using this, the implementation is not straight forward and i prefer go to solutions more robust like ESRI

[4F2E4A2E]

Okay, thanks, but what do you mean exactly? Maybe something like this? https://pub.dev/packages/flutter_map_arcgis

[ibrierley]

I did do some work on the pbf and vector tile format eg at https://github.com/ibrierley/flutter_map_vector_tiles (this was tested using mapbox vector tiles, but the pbf modules should work to decode pbf files).

Main issue I stumbled into with vector tiles was that they are very slow in canvas when pinch/zooming. So to get it fluid, you either have to convert to an image, but then you lose a bit of the essence of vector tiles. That may be ok for some people.

[djsliders]

That's beacuse the mbtiles from openmaptiles is a pbf vector format, and this flutter_maps expected a PNGs inside

Hi,
Is there a way to convert it? I tried several tools (mb-util, mapbox tools, etc...), nothing works when given to Flutter Map.
From my side, I create a mbtiles with tilelive-copy, but it seems it is not using PNG neither.
Can you help on How to generate a correct mbtiles with the existing tools or how to convert it?
Thank you in advance for your help,
Mike

[ibrierley]

Do you have a URL to some example mbtiles and documentation about them ?

[djsliders]

I m using https://github.com/mapbox/tilelive
with the tms module to get http tiles.
It creates a mbtiles but not compatible with MBTilesImageProvider.

[4F2E4A2E]

We could create png based mbtiles - which are no more then sqllite db files - and tiles with http://maperitive.net/

[djsliders]

Sorry, It was my mistake. The mbtiles that I was creating wasn't containing correct information.
Thank you for the replies and thank you for this great feature ! :)

[4F2E4A2E]

MbtilesProvider is not working on web though.