Show details on map (like points of interest or roads directions)

[Greismorr]

Congratulations for the good work!

I've started using this plugin because i needed rotation in my map and better fidelity to polilyne routes. To this objective, the plugin worked like a charm!

But I noticed that a lot of data that is present in my custom Mapbox theme is not displayed on the map:

Mapbox Preview of my Theme

My Map in the app

Looks like the only thing that the plugin is getting of my theme is the color.

I have defined the TileProvider as:

tileProviders: TileProviders({
            'composite': MemoryCacheVectorTileProvider(
              delegate: NetworkVectorTileProvider(
                maximumZoom: 22,
                urlTemplate:
                    'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?style=mapbox://styles/petize/cl0thnp3q00oj15o8qbsin9z0@2022-10-13T13:30:58.076Z&access_token=$apiKey',
              ),
              maxSizeBytes: 1024 * 1024 * 2,
            ),
          }),

[greensopinion]

When I've seen issues like this before, it's either because the theme used doesn't match the tile data, or there are expressions in the theme that aren't supported by this library. I've had Mapbox streets working before, see the gallery

To troubleshoot the theme, consider adding a logger to the theme, e.g. ThemeReader(Logger.console()).read(theme)

Consider providing an example that we can look into here or a copy of your theme on this ticket.

[Greismorr]

Thanks for the reply!

Today, i've noticed that the names of the points of interest are now appearing in the map without the icons. Road directions are still missing.

I've added the logger and the result was:

WARN: Unsupported expression syntax: [to-number, [get, sizerank]]
I/flutter ( 6434): WARN: Unsupported expression syntax: [>=, [to-number, [get, sizerank]], 0]
I/flutter ( 6434): WARN: Unsupported expression syntax: [all, [>=, [to-number, [get, sizerank]], 0], [match, [get, class], [park, airport, glacier, pitch, sand, facility], true, residential, [step, [zoom], true, 12, false], false], [<=, [-, [to-number, [get, sizerank]], [interpolate, [exponential, 1.5], [zoom], 12, 0, 18, 14]], 14]]
I/flutter ( 6434): WARN: Unsupported expression: [all, [>=, [to-number, [get, sizerank]], 0], [match, [get, class], [park, airport, glacier, pitch, sand, facility], true, residential, [step, [zoom], true, 12, false], false], [<=, [-, [to-number, [get, sizerank]], [interpolate, [exponential, 1.5], [zoom], 12, 0, 18, 14]], 14]]
I/flutter ( 6434): WARN: theme layer type circle not implemented
I/flutter ( 6434): WARN: theme layer type circle not implemented

So i guess that the problem is what you've said, "expressions in the theme that aren't supported by this library". But can i do something to show at least road directions? My theme json is hosted here and it was created by Mapbox Studio.

[greensopinion]

Thanks for the detail.

Icons aren't supported yet. I'm not sure what you mean by "road directions"?

For to-number you need this https://github.com/greensopinion/dart-vector-tile-renderer/pull/69 (now published as version 3.0.4 of vector_tile_renderer)

[Greismorr]

I meant those arrows in the first image showing the traffic direction of the road. But you said that icons aren't supported yet and i guess that's an icon.

I'm closing this issue, thanks for the help and keep the good work :).

[greensopinion]

I've started working on support for sprites here:

• https://github.com/greensopinion/dart-vector-tile-renderer/pull/83
• https://github.com/greensopinion/flutter-vector-map-tiles/pull/142

[greensopinion]

this is a screenshot based on the Mapbox Streets style.

in the screenshot we have:

• line-based icon-image
• scaling to fit content (text)
• point-based icon-image

[HugoHeneault]

Wow! Looks great. Can't wait to have it released! 👏

[greensopinion]

There are still a few issues to resolve:

1. one-way arrows aren't placed on roads with Mapbox Streets - not sure why

2. MapTiler icons aren't scaled to size to the text content (yet) because their sprite.json doesn't include content or placeholder indicating where the content should go. There must be some way to differentiate between sprites used to indicate a point (which should not be scaled) and sprites used for road numbers (which should be scaled), but so far I haven't figured it out.

Maptiler has sprites represented in their json as follows:

    "us-interstate_3": {
        "width": 44,
        "height": 36,
        "x": 38,
        "y": 278,
        "pixelRatio": 2.0
    }

Mapbox specifies placeholder for the same sprite:

    "us-interstate-3": {
        "width": 52,
        "height": 44,
        "x": 286,
        "y": 436,
        "pixelRatio": 2,
        "placeholder": [
            0,
            16,
            52,
            28
        ],
        "visible": true
    }

this is the spec: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/

Any help on this would be appreciated. For next steps, I'm thinking that we should reach out to Maptiler and ask them, or have a look a one of the existing open source libraries (such as maplibre.org) to find out what they do.