Differences in Styles for Mapbox.

[atorulia]

I am trying to display my Mapbox style, but I see differences in the styles that are rendered using vector_map_tiles compared to the style in Mapbox. For example, you can see the difference in text rendering here; also, for some reason, extra icons are being displayed. examples are provided below.

Mobile	Mapbox Website

I am using vector_map_tiles: ^4.0.0

Here is my flutter version:

Flutter (Channel stable, 3.13.2, on macOS 13.4 22F66 darwin-arm64, locale en-UA)

And my dart version:

Dart SDK version: 3.1.0 (stable) (Tue Aug 15 21:33:36 2023 +0000) on "macos_arm64"

This might also be helpful; here's what I received as url template:

"https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiY…"

I suspect the issue might be in this url, but I'm not certain. Typically, when I've used flutter_map, the call would look like a Raster Tiles API url.

I'm using the following invocation as a urlTemplate.

https://api.mapbox.com/styles/v1/$user/$style?access_token=$accessToken

I also tried the following invocation format.

mapbox://styles/$user/$style?access_token=$accessToken

Also, here's an example of how I use VectorTileLayer in the application:

final style = controller.style.value as Style;

    return FlutterMap(
      mapController: controller.mapController,
      options: MapOptions(
        interactiveFlags: InteractiveFlag.pinchZoom |
            InteractiveFlag.drag |
            InteractiveFlag.doubleTapZoom |
            InteractiveFlag.flingAnimation,
        maxBounds: latLngBounds,
        keepAlive: true,
        maxZoom: Configuration.mapbox.maximumZoom,
        zoom: Configuration.mapbox.initialZoom,
        minZoom: Configuration.mapbox.minimumZoom,
        center: GetStorageService.to.readLastKnownPosition()?.toLatLng() ??
            LatLng(47.0, -100.0),
      ),
      children: [
        VectorTileLayer(
          tileProviders: style.providers,
          theme: style.theme,
          sprites: style.sprites,
          maximumZoom: Configuration.mapbox.maximumZoom,
          tileOffset: TileOffset.mapbox,
          concurrency: 10,
          layerMode: VectorTileLayerMode.raster,
        )
      ],
    );