After looking at how tiles are rendered and thinking a bit about how to reduce jank, I feel that vector tiles probably should not be rendered on the UI thread.

1. Jank is not only caused by the UI isolate, but also by the raster thread.

   I suspect one factor for this is shader compilation jank. Because maps are so irregular, I'm not sure how much SkSL warm up can help here.

   The other problem is that, if multiple complex enough tiles are painted for the first time in the same frame, it just takes too long to raster them.

2. Rendering tiles to images often blocks the UI thread.

   This could be offloaded to a background isolate, but we would need to have copies of themes, tilesets and all the cached data in the UI isolate and the background isolate.

Proposal

Each Tileset gets its own isolate, which is used to read it, preprocess it and render it to images at different zoom levels. This parallelizes all the stages of processing.

ui.Images cannot be passed between isolates. They have to be encoded in one isolate and decoded in the other. The raw TypedData itself can be transferred between isolates without copying. It is an open question how much of a performance penalty encoding and decoding ui.Images imposes.

The UI isolate just schedules tiles to be rendered when necessary and composes the images.

The TileImageProvider provides a simple interface for the UI isolate to access cached images and request rendering of new ones:

/// The data that describes the contents of a rendered tile image.
///
/// Two tile images with the same [TileImageDescriptor] must have identical contents.
abstract class TileImageDescriptor {
  /// The id of the theme the tile was rendered with.
  String get themeId;

  /// The zoom level at which the tile was rendered.
  ///
  /// The zoom level must be >= 0.
  double get zoom;

  /// The x coordinate of the rendered tile.
  int get x;

  /// The y coordinate of the rendered tile.
  int get y;

  /// The width and hight of the rendered image, in physical pixels.
  int get size;
}

/// The image of a rendered tile.
abstract class TileImage {
  /// Describes the contents of this image.
  TileImageDescriptor get descriptor;

  /// The actual image of the tile.
  ///
  /// Don't dispose this image. This is handled by [release].
  ui.Image get image;

  /// Retains this image.
  ///
  /// An image must only used while it is retained.
  void retain();

  /// Releases this image.
  ///
  /// An image must be released when it is no longer needed.
  void release();
}

/// Provides images of rendered tiles.
abstract class TileImageProvider {
  /// Returns the immediately available rendered tile images.
  ///
  /// An image from the returned list must be retained before it can be used.
  List<TileImage> get images;

  /// Returns the rendered tile image with given [descriptor].
  ///
  /// The returned image is already retained and must be released by the caller.
  Future<TileImage> requestImage(TileImageDescriptor descriptor);
}

Both background isolates and rendered images can be cached. The caching policy can make decisions based on which tile images are being retained/released.

I have not though it all through, but this approach would make it practically impossible for map rendering to cause jank.

Hi there,

first kudos, its amazing someone finally took to implement native vector maps for Flutter,

unfortunately, I just tried this package with our own tiles and I am having serious performance issues, basically the map freezes and I am unable to interact with it, after every zoom change/movement, for a few seconds.

This happens both in debug mode (Android emulator/device) and release mode.

Our config: https://gist.github.com/filipproch/a010f95fcab7a559ab3074c3ebd0e290 We use the map mostly over Czech Republic - Europe

I would like to contribute to help improve this, but not sure where exactly to look/start or maybe you already have some ideas for performance improvements?

Hi, I'm trying to run the example project with mapbox layer, using the url template 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=$MY_TOKEN'; but I don't see the map as it should be, I see the same thing no matter what url I put (tried the stadia one too) there, and there are no errors at all in console and I only see this:

Am I doing something wrong? How to make the vector tiles work? Tried both android and iOS and the same thing.

Hi, I've been playing around with this plugin for the last few days (and am really excited about it!), but I had a question around Mapbox support. With the given example, I'm able to successfully render a map with the Stadia Maps URL. However, when I try to use the Mapbox URL, it doesn't seem to render the tiles. I don't see any errors to the console. I was wondering if this is a known issue and/or if anyone has have any ideas to fix this.

Repro steps:

1. Download the example.
2. Add your Stadia Maps access token to the Stadia Maps URL in main.dart.
3. Change the zoom level to 15 (so that we should see streets and names on the initial render).
4. Run the application. I've encountered this issue on both Mac and Android (the only platforms I've tried).
5. See that it renders the map correctly.

5. Close the application and clear the cache. On Android, I'm doing this by long pressing on the app icon and navigating to "clear storage." On Mac, I'm doing this by deleting the "example" folder at ~/Library/Containers/.
6. Comment out the Stadia Maps URL, uncomment the Mapbox URL, and add your access token.
7. Run the application again.
8. See that streets/names don't show up.

Hello,

We are currently using flutter_map with raster maps from mapbox. But in order to reduce our mapProvider cost we are planning to deploy our own server. Which led us to explore the idea of only serving vectors and let the client app do the rendering.

To that objective I knew about your plugin, problem is our users are using tablets. I saw you wrote in the readme about the performance issues on tablet (that I tested too).

We really need a vector map that works well for our project. So I am down to try and help finding ways to improve performance, either on your repo or on a fork.

Do you have any ressources, blogs, lines of code pointing to where you think there is improvement possible ?

Thanks in advance

I checked out the example project and added my custom urlTemplate and style. The map renders streets and text, but the tiles is cutting off content.

Here is the code:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong2/latlong.dart';
import 'package:map_test/dark_theme.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
import 'package:vector_tile_renderer/src/themes/light_theme.dart';
import 'package:vector_tile_renderer/vector_tile_renderer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isDarkMode = true;
  final _lightTheme = ThemeReader().read(lightThemeData());
  final _darkTheme = ThemeReader().read(darkThemeData);

  static const urlTemplate =
      "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{x}/{y}.pbf";

  @override
  Widget build(BuildContext context) {
    final centerMunich = LatLng(48.129710, 11.586124);

    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () => setState(() => _isDarkMode = !_isDarkMode),
            icon: Icon(_isDarkMode ? Icons.dark_mode : Icons.light_mode),
          ),
        ],
      ),
      body: FlutterMap(
        options: MapOptions(
          center: centerMunich,
          zoom: 13.0,
          plugins: [VectorMapTilesPlugin()],
        ),
        layers: [
          VectorTileLayerOptions(
            theme: _isDarkMode ? _darkTheme : _lightTheme,
            tileProviders: TileProviders(
              {
                'esri': MemoryCacheVectorTileProvider(
                  delegate: NetworkVectorTileProvider(
                    urlTemplate: urlTemplate,
                    maximumZoom: 14,
                  ),
                  maxSizeBytes: 1024 * 1024 * 2,
                ),
              },
            ),
          ),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: centerMunich,
                builder: (ctx) => Icon(
                  Icons.location_on_outlined,
                  color: _isDarkMode ? Colors.white : Colors.black,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Here is the json for the dark theme: The content for final _darkTheme = ThemeReader().read(darkThemeData); can be found here: https://gist.github.com/JulianBissekkou/527d0ade9d4d0a87af9fc9198ad5f94a

Memory usage can spike occasionally while zooming. Sometimes it's severe enough for iOS to terminate the app.

I can reproduce this on the example app by zooming in/out in an area such as Los Angeles or San Francisco where there is a lot of detail on the map.

I'm using tilemaker to generate vector tiles from .pbf datasets that can be downloaded from Geofabrik.
tilemaker claims to produce vector tiles in the Mapbox format, but the flutter_vector_map_tiles package does not seem to be able to parse them.
Any ideas on how I could debug this?

Example vector tile generated by tilemaker

example_vector_tile.zip

Code

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
// ignore: depend_on_referenced_packages
import 'package:vector_tile_renderer/vector_tile_renderer.dart' show ProvidedThemes;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Vector Map',
      home: MapView(),
    );
  }
}

class MapView extends StatelessWidget {
  const MapView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => FlutterMap(
        options: MapOptions(
          center: LatLng(46.933849942685754, 7.424258598204977),
          zoom: 13.0,
          plugins: [
            VectorMapTilesPlugin(),
          ],
        ),
        layers: [
          VectorTileLayerOptions(
            theme: ProvidedThemes.lightTheme(),
            tileProviders: TileProviders({
              'openmaptiles': AssetTileVectorProvider(),
            }),
          ),
        ],
      );
}

class AssetTileVectorProvider extends VectorTileProvider {
  @override
  int get maximumZoom => 19;

  @override
  Future<Uint8List> provide(TileIdentity tile) {
    return rootBundle
        .load("assets/vector_tiles/${tile.z}_${tile.x}_${tile.y}.pbf")
        .then((value) => value.buffer.asUint8List());
  }
}

I've tried to use the plugin with custom styles which I've created in Mapbox Studio and then downloaded as .jsons. Unfortunately, this plugin doesn't seem to apply the styles as the map displays with the default Mapbox Light and Dark (i.e. not dimming texts and borders like I've specified in my styles).

For references, this is how my custom light map should look:

I've made a minimal repo to demo the issue: https://github.com/alkaitagi/vector_map_test/tree/master/lib. I'll appreciate any help.

This message has been sent to multiple plugin authors, so it is not personalised

As part of https://github.com/fleaflet/flutter_map/pull/992 & https://github.com/fleaflet/flutter_map/discussions/927#discussioncomment-1135466, I (a documentation author) am contacting plugin authors to ensure the information about this plugin on the new documentation is correct; or alternatively, if this plugin is not yet on the existing list, to check whether you would like to add your plugin to the new documentation.

I would also like you to check you conform to these new rules:

• this plugin is available via a pub.dev installation to make it easier for developers - if your plugin does not currently have a pub.dev page, please add one or let me know otherwise,
• the plugin documentation includes enough information for installation and basic setup/functionality,
• the plugin includes a runnable example and/or screenshots,
• the plugin description contains the words ' - IN BETA' after the author link on the same line if your plugin is in beta,

Currently I have copied over the existing plugin descriptions, and you can see these here: https://flutter-map.vercel.app/plugins/list. Please note that this documentation is currently unapproved and should not be used unless otherwise directed, as some information may be incorrect or missing, or might change in the future. There is no ETA at the moment, but things seem to be moving along.

Should you wish for the description to remain the same as current on the page linked above, you do not have to reply, you can close this issue.

If you wish to change any information, please leave this issue open and add your reply as a comment.

flutter_map maintainers do not take any responsibility for this message, I am the sole author.

On behalf of myself and the flutter_map community thank you for your excellent plugin :).

I use maptiler server to get 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=$apiKey' tiles and also style ThemeReader(logger: const Logger.console()).read(json_style!). But there a lot of freezes when Im trying to pan or zoom map. I have built release apk and setconcurrency: 4` but it doesn't help.

Hello,

I am trying to use this plugin to show a map using vector tiles and i have a given .js file with the theme of the map. Is there a way to use javascript files with this plugin?

Regards,

Faran

I face a strange problem which I don't really understand how to debug.

When I use VectorTileLayer + OverlayImageLayer I often get weird artifacts.

As I noticed it happens only with zoom being between 22 and 23 (even though I don't have these constants anywhere in my code). Reproducible in both release and debug.

If I scroll to the part of the map which doesn't contain OverlayImageLayer then I can't reproduce it.

Without VectorTileLayer I don't see this issue but maybe I didn't try enough.

It happens both when I move the map and when I just click on it (onTap is called, onPositionChanged not).

Examples: https://imgur.com/a/eQXY5fL (there are a few screenshots + videos).

It is reproducible with local asset image and with networkimage, with jpeg and png. I can reproduce it with MemoryCacheVectorTileProvider and with pure NetworkVectorTileProvider, doesn't depend on maxZoom property.

Changing theme or asset provider also doesn't help.

It seems to be fine on web and android emulator.

Code:

          FlutterMap(
            mapController: mapController,
            options: MapOptions(
              onPositionChanged: (MapPosition position, bool hasGesture) {
                print('PC');
                rotationAngle.value = degreeToRadian(mapController.rotation);
              },
              onTap: (position, latLng) {
                debugPrint('Clicked on map at ${latLng.latitude}, ${latLng.longitude}');
                print(mapController.zoom);
              },
              center: widget.venueDetails.location,
              zoom: 20,
              maxZoom: 26,
              minZoom: 17,
              absorbPanEventsOnScrollables: false,
              interactiveFlags: InteractiveFlag.drag |
                  InteractiveFlag.flingAnimation |
                  InteractiveFlag.pinchMove |
                  InteractiveFlag.pinchZoom |
                  InteractiveFlag.doubleTapZoom |
                  InteractiveFlag.rotate,
            ),
            children: [
              if (!kIsWeb)
                VectorTileLayer(
                  theme: _mapTheme(context),
                  tileProviders: TileProviders(
                    {
                      "openmaptiles": _cachingTileProvider(
                        _urlTemplate(),
                      ),
                    },
                  ),
                ),
              OverlayImageLayer(
                overlayImages: [
                    RotatedOverlayImage(
                      // imageProvider: CachedNetworkImageProvider(imageUrl),
                      imageProvider: AssetImage('assets/images/test.jpeg'),
                      topLeftCorner: widget.corners.topLeft,
                      bottomLeftCorner: widget.corners.bottomLeft,
                      bottomRightCorner: widget.corners.bottomRight,
                    ),
                ],
              ),
              // Some markers
            ],
          );

My flutter doctor is:

[✓] Flutter (Channel master, 3.7.0-3.0.pre.30, on Debian GNU/Linux rodete 5.19.11-1rodete1-amd64, locale en_US.utf8)
    • Flutter version 3.7.0-3.0.pre.30 on channel master at ~/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0a8e92a119 (12 hours ago), 2022-12-05 17:40:10 -0500
    • Engine revision d82c8ad7ac
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at ~/Android/Sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /opt/android-studio-2021.3/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Debian clang version 14.0.6-2
    • cmake version 3.24.2
    • ninja version 1.11.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2021.3)
    • Android Studio at /opt/android-studio-with-blaze-2021.3
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3)
    • IntelliJ at /opt/intellij-ue-2021.3
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.69.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.42.0

[✓] Connected device (3 available)
    • Pixel 6 Pro (mobile)
    • Linux (desktop)      • linux          • linux-x64      • Debian GNU/Linux rodete 5.19.11-1rodete1-amd64
    • Chrome (web)         • chrome         • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Dependencies:

  flutter_map:
    dependency: "direct main"
    description:
      name: flutter_map
      sha256: "95e2b3ae37733c3da79aac6e5a245a524113d652d8e22bc5a5230d61d6db0175"
      url: "https://pub.dev"
    source: hosted
    version: "3.0.0"
  flutter_map_dragmarker:
    dependency: "direct main"
    description:
      name: flutter_map_dragmarker
      sha256: "1a28bc1d1573bfca21c47a7d3fe3513a6587eea969d5aaabc1e4101c79f4e834"
      url: "https://pub.dev"
    source: hosted
    version: "4.1.2"
  flutter_map_marker_cluster:
    dependency: "direct main"
    description:
      name: flutter_map_marker_cluster
      sha256: a272a9f79ec4964272646a5ecad26108040ac2f489e58f1a28d67069b341c3f0
      url: "https://pub.dev"
    source: hosted
    version: "1.0.1"
  flutter_map_marker_popup:
    dependency: transitive
    description:
      name: flutter_map_marker_popup
      sha256: "9eb13384fb217d446398f8de484a70d668ab986485ce75bb3adf5e853a1d8b8a"
      url: "https://pub.dev"
    source: hosted
    version: "4.0.0"
  vector_map_tiles:
    dependency: "direct main"
    description:
      name: vector_map_tiles
      sha256: a0411b32ec4a8b548eb2fdf74d0e1165310e86415c3a7a26459cedf0d4fd1bc0
      url: "https://pub.dev"
    source: hosted
    version: "3.1.4"
  vector_math:
    dependency: transitive
    description:
      name: vector_math
      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
      url: "https://pub.dev"
    source: hosted
    version: "2.1.4"
  vector_tile:
    dependency: transitive
    description:
      name: vector_tile
      sha256: "2ac77f6bbd7ddd97efe059207d67bb7eaf807ab98ad58d99fe41a22c230f44e1"
      url: "https://pub.dev"
    source: hosted
    version: "1.0.0"
  vector_tile_renderer:
    dependency: "direct main"
    description:
      name: vector_tile_renderer
      sha256: "1d4c60b5d8e73b5d8286516f10b02880e3e51156fd2bb82ba2c1f3201e38b89e"
      url: "https://pub.dev"
    source: hosted
    version: "3.0.4"

When I added README's Adding Hillshade to the example, the background of the Hillshade layer was displayed without transparency and the base map layer became invisible. Is there a setting to make it transparent?

Thank you

Hi I am tryin to load esri map using flutter-vector-map-tiles, I am using the same example code as well. But map is not rendering at all in application. It just show blank screen. Could you tell me what was the issue here.
Code:

import 'package:flutter/material.dart' as material;
import 'package:flutter/widgets.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_tile_renderer/vector_tile_renderer.dart';
import 'api_key.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({material.Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return material.MaterialApp(
      title: 'vector_map_tiles Example',
      theme: material.ThemeData.light(),
      home: const MyHomePage(title: 'vector_map_tiles Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return material.Scaffold(
        appBar: material.AppBar(
          title: Text(widget.title),
        ),
        body: SafeArea(
            child: Column(children: [
          Flexible(
              child: FlutterMap(
            options: MapOptions(
                center: LatLng(12.925007, 77.593803),
                zoom: 2,
                maxZoom: 18,
                interactiveFlags: InteractiveFlag.drag |
                    InteractiveFlag.flingAnimation |
                    InteractiveFlag.pinchMove |
                    InteractiveFlag.pinchZoom |
                    InteractiveFlag.doubleTapZoom,
                plugins: [VectorMapTilesPlugin()]),
            layers: <LayerOptions>[
              // normally you would see TileLayerOptions which provides raster tiles
              // instead this vector tile layer replaces the standard tile layer
              VectorTileLayerOptions(
                  theme: _mapTheme(),
                  backgroundTheme: _backgroundTheme(),
                  // tileOffset: TileOffset.mapbox, enable with mapbox
                  tileProviders: TileProviders(
                      // Name must match name under "sources" in theme
                      {'esri': _cachingTileProvider(_urlTemplate())})),
            ],
          ))
        ])));
  }

  VectorTileProvider _cachingTileProvider(String urlTemplate) {
    return NetworkVectorTileProvider(
        urlTemplate: urlTemplate,
        // this is the maximum zoom of the provider, not the
        // maximum of the map. vector tiles are rendered
        // to larger sizes to support higher zoom levels
        maximumZoom: 18);
  }

  Theme _mapTheme() {
    // maps are rendered using themes
    // to provide a dark theme do something like this:
    // if (MediaQuery.of(context).platformBrightness == Brightness.dark) return myDarkTheme();
    return ProvidedThemes.lightTheme();
  }

  _backgroundTheme() {
    return _mapTheme()
        .copyWith(types: {ThemeLayerType.background, ThemeLayerType.fill});
  }

  String _urlTemplate() {
    // IMPORTANT: See readme about matching tile provider with theme

    // Stadia Maps source https://docs.stadiamaps.com/vector/
    return 'https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf?token=$apiKey';

    // Mapbox source https://docs.mapbox.com/api/maps/vector-tiles/#example-request-retrieve-vector-tiles
    // return 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=$mapboxApiKey',
  }
}

Output:

Blank screen with log:   
E/flutter (16275): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: Invalid tile coordinates z=1,x=0,y=2
E/flutter (16275): #0      NetworkVectorTileProvider.provide (package:vector_map_tiles/src/vector_tile_provider.dart:42:7)
E/flutter (16275): #1      VectorTileLoadingCache._loadBytes (package:vector_map_tiles/src/cache/vector_tile_loading_cache.dart:85:44)
E/flutter (16275): <asynchronous suspension>
E/flutter (16275): #2      VectorTileLoadingCache._loadTile (package:vector_map_tiles/src/cache/vector_tile_loading_cache.dart:65:15)