[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