[BUG] Labels, places and street names not showing and getting "Cancelled" error

[riccardodebellini]

Package

vector_map_tiles_pmtiles

Bug Description

The map is very laggy and slow on zoom/pan/movement in general, and doesn't display any street name / building labels (schools, transportation..).

Steps to Reproduce

1.Run the code
2. Zoom/move around

Expected Results

The map should

• move fluidly
• show street names (curved according to the movement of the street) and building labels

Video

Actual Results

The map

• Is slow (i get errors such as [1])
• Doesn't show labels (i get errors such as [2])

[1]

======== Exception caught by image resource service ================================================
The following CancellationException was thrown:
Cancelled

When the exception was thrown, this was the stack: 
====================================================================================================

======== Exception caught by image resource service ================================================
The following CancellationException was thrown:
Cancelled

When the exception was thrown, this was the stack: 
#0      TileLoader._renderTile (package:vector_map_tiles/src/raster/tile_loader.dart:72:7)
#1      TileLoader._renderJob (package:vector_map_tiles/src/raster/tile_loader.dart:66:40)
#2      ImmediateExecutor.submit (package:executor_lib/src/immdediate_executor.dart:17:44)
#3      ConcurrencyExecutor._startJob (package:executor_lib/src/concurrency_executor.dart:74:10)
#4      ConcurrencyExecutor._startJobs (package:executor_lib/src/concurrency_executor.dart:59:7)
#5      ConcurrencyExecutor._startJob.<anonymous closure> (package:executor_lib/src/concurrency_executor.dart:81:7)
<asynchronous suspension>
(elided 5 frames from dart:async)
====================================================================================================

[2]

, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name3], [get, name3]], {text-font: [case, [==, [get, script3], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [format, [coalesce, [get, name:en], [get, pgf:name3], [get, name3]], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}]]]]

Video

Code Sample

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
import 'package:vector_map_tiles_pmtiles/vector_map_tiles_pmtiles.dart';
import 'package:vector_tile_renderer/vector_tile_renderer.dart' as vtr;

/// TODO: use your own tile source https://docs.protomaps.com/pmtiles/cloud-storage
/// This can be a hosted file or local file in your file system,
/// However, flutter assets are not supported.
const String tileSource =
    'https://demo-bucket.protomaps.com/v4.pmtiles';

class VectorMapTilesPmTilesPage extends StatelessWidget {
  VectorMapTilesPmTilesPage({super.key});

  /// The theme specifies the look of the rendered map.
  ///
  /// Note: Styles from Mapbox, OpenMapTiles and others and not compatible
  /// with Protomaps styles.
  final vtr.Theme mapTheme = ProtomapsThemes.lightV4(
    logger: kDebugMode ? const vtr.Logger.console() : null,
  );

  final _futureTileProvider = PmTilesVectorTileProvider.fromSource(tileSource);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text('vector_map_tiles_pmtiles'),
      ),
      body: FutureBuilder<PmTilesVectorTileProvider>(
        future: _futureTileProvider,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final tileProvider = snapshot.data!;
            return FlutterMap(
              options: const MapOptions(
                initialCenter: LatLng(43.787942, 11.237517), // firenze
                maxZoom: 18,
                minZoom: 0,
              ),
              children: [
                VectorTileLayer(
                  // disable the file cache when you change the PMTiles source
                  fileCacheTtl: Duration.zero,
                  theme: mapTheme,
                  showTileDebugInfo: true,
                  tileProviders: TileProviders({
                    'protomaps': tileProvider,
                  }),
                ),
              ],
            );
          }
          if (snapshot.hasError) {
            debugPrint(snapshot.error.toString());
            debugPrintStack(stackTrace: snapshot.stackTrace);
            return Center(child: Text(snapshot.error.toString()));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Platforms

windows

[josxha]

Hello @riccardodebellini, your issue contains multiple topics.

The map is very laggy and slow on zoom/pan/movement in general

PMTiles in general a slightly longer loading time than serving tiles with a tile server. For general performance issues with vector_map_tiles, see greensopinion/flutter-vector-map-tiles#120.

and doesn't display any street name / building labels (schools, transportation..).

This is releated to the warning that gets printed to the console. Some style expressions that are used in newer versions on protomaps are not suported by vector_map_tiles. The complete logged warning is:

flutter: WARN: Unsupported expression syntax: [case, [all, [any, [has, name], [has, pgf:name]], [!, [any, [has, name2], [has, pgf:name2]]], [!, [any, [has, name3], [has, pgf:name3]]]], [case, [has, script], [case, [any, [is-supported-script, [get, name]], [has, pgf:name]], [format, [coalesce, [get, name:en], [get, name:en]], {}, 
, {}, [case, [all, [!, [has, name:en]], [has, name:en], [!, [has, script]]], , [coalesce, [get, pgf:name], [get, name]]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [get, name:en]], [format, [coalesce, [get, name:en], [get, pgf:name], [get, name]], {}]], [all, [any, [has, name], [has, pgf:name]], [any, [has, name2], [has, pgf:name2]], [!, [any, [has, name3], [has, pgf:name3]]]], [case, [all, [has, script], [has, script2]], [format, [get, name:en], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [case, [has, script2], [format, [coalesce, [get, name:en], [get, pgf:name], [get, name]], {}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [format, [coalesce, [get, name:en], [get, pgf:name2], [get, name2]], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}]]], [case, [all, [has, script], [has, script2], [has, script3]], [format, [get, name:en], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name3], [get, name3]], {text-font: [case, [==, [get, script3], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [case, [!, [has, script]], [format, [coalesce, [get, name:en], [get, pgf:name], [get, name]], {}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name3], [get, name3]], {text-font: [case, [==, [get, script3], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [!, [has, script2]], [format, [coalesce, [get, name:en], [get, pgf:name2], [get, name2]], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name3], [get, name3]], {text-font: [case, [==, [get, script3], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}], [format, [coalesce, [get, name:en], [get, pgf:name3], [get, name3]], {}, 
, {}, [coalesce, [get, pgf:name], [get, name]], {text-font: [case, [==, [get, script], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}, 
, {}, [coalesce, [get, pgf:name2], [get, name2]], {text-font: [case, [==, [get, script2], Devanagari], [literal, [Noto Sans Devanagari Regular v1]], [literal, [Noto Sans Regular]]]}]]]]

Eitherway this is missing feature in the upstream vector_map_tiles / vector_tile_renderer package and not in this package. It is possible to use pmtiles archives that use other map style schemes.

The following CancellationException was thrown: Cancelled

Last, the logged tile cancellations in the console are tracked in this issue: greensopinion/flutter-vector-map-tiles#205

[josxha]

some additional information because this issue got mentioned on the flutter_map discord server:

• the issue i linked mentions a recent pull request render raster tiles using dart_ui_isolate greensopinion/flutter-vector-map-tiles#220 that could give some performance improvements.
• it is important to distingulish between the pmtiles file format and the protomaps tile scheme, while there appears to be some problem with map styles that are based on the protomaps tile scheme, the pmtiles file format should work just fine. It should be possible to modify the style expressions in the map style that are not supported, or use an entirely different tile schema such as OpenMapTiles with pmtiles.

[greensopinion]

I've made some changes that fix a few defects, it may be worth trying again using commit 2b076f1dd or the latest rebase of flutter-vector-map-tiles/pull/220