[FEATURE] vector_map_tiles_pmtiles web support

[aliakbar-dt]

Package

other

Feature Description

int64 accessor not supported by dart2js

Feature importance

(3) can't live without it

[josxha]

What package are you using? There is a reason for this dropdown..
Additionally, please provide a minimal reproducible example

[aliakbar-dt]

Hi, and thank you for your great work on this package.

I'm using the following setup in my project:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.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;

String tileSource = 'http://192.168.222.13/tiles/map.pmtiles';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late final MapController mapController;
  final vtr.Theme mapTheme = ProtomapsThemes.lightV3(
    logger: kDebugMode ? const vtr.Logger.console() : null,
  );

  final _futureTileProvider = PmTilesVectorTileProvider.fromSource(tileSource);

  @override
  void initState() {
    mapController = MapController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        FutureBuilder<PmTilesVectorTileProvider>(
          future: _futureTileProvider,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final tileProvider = snapshot.data!;
              return FlutterMap(
                mapController: mapController,
                options: const MapOptions(
                  maxZoom: 18,
                  minZoom: 11,
                  initialZoom: 14,
                  interactionOptions: InteractionOptions(flags: InteractiveFlag.pinchZoom | InteractiveFlag.drag),
                ),
                children: [
                  VectorTileLayer(
                    fileCacheTtl: const Duration(hours: 1),
                    memoryTileCacheMaxSize: 10000,
                    textCacheMaxSize: 10000,
                    theme: mapTheme,
                    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());
          },
        ),
      ],
    );
  }
}

I'm using:

vector_map_tiles_pmtiles: ^1.5.0
flutter_map: ^7.0.2

Everything works fine on Android and iOS, but when I try to run it in a Flutter Web environment (tested on Chrome), I get this error:

Unsupported operation: Uint64 accessor not supported by dart2js

It seems like the current implementation relies on ByteData.getUint64() or something similar, which is not supported in dart2js compiled web builds.

I’d appreciate any workaround or fix you can suggest to make this work on web.

Thanks again!

[josxha]

Web is currently not supported in the latest stable vector_map_tiles release.

vector_map_tiles included web support in v9 that is currently released as pre releases. You can try it out by using

• flutter_map 8
• vector_map_tiles 9
• and vector_map_tiles_pmtiles from this repository https://github.com/josxha/flutter_map_plugins/tree/main/vector_map_tiles_pmtiles

[aliakbar-dt]

Hi, I updated the packages as follows:

flutter_map: ^8.1.1
vector_map_tiles: ^9.0.0-beta.8
vector_map_tiles_pmtiles:
  git:
    url: https://github.com/josxha/flutter_map_plugins.git
    path: vector_map_tiles_pmtiles/

However, I didn't change anything in my existing code. When I run the app on Flutter Web, I still get the following error:

Unsupported operation: Uint64 accessor not supported by dart2js

Any idea what might be wrong or missing?
Thanks again for your support!

[josxha]

The task is currently no priority to me until we have a stable vector_map_tiles release with web support. Feel free to create a pull request if you want. :)