Running example about flutter-vector-map-tiles HOT 16 CLOSED

You're right, the example doesn't tell the whole story. I'll see what I can do to improve it, feel free to submit a PR if you have any ideas.

I recently added this to the readme: Themes and Tile Providers
Hopefully that helps.

If you've got a local clone of the Git repo, you'll want to pull from upstream if you haven't recently, since there have been several improvements to support for theme expressions. See the changelog of vector_tile_renderer dependency for details.

from flutter-vector-map-tiles.

With release 1.4.7 there have been many improvements to better support themes. I've been testing with Mapbox and the outdoors theme with great results. See screenshots on dart-vector-tile-renderer issue#24 if you're interested.

Closing since this should now work as expected.

from flutter-vector-map-tiles.

Closing this one off since I can't reproduce with the example. Feel free to reopen with steps to reproduce.

from flutter-vector-map-tiles.

From my experience this happens because there are a few fields in the theme that either aren't evaluated or might resolve to null in which case nothing is drawn. Some of those cases are worked on in greensopinion/dart-vector-tile-renderer#2 but there is no guarantee that everything will work as expected (I still had issues with streets not showing up with that PR for example).

from flutter-vector-map-tiles.

Hi, thanks for the issue. I've just tried it from here and it's working fine for me. @geisterfurz007 has a great suggestion - if you've replaced the default theme, it could be that you're using theme syntax that's not yet supported.

A few questions:

1. have you made any changes other than providing an API key?
2. how are you running the example
3. can you provide the output of the debug console
4. please provide the output from running flutter doctor -v

Thanks

from flutter-vector-map-tiles.

Hi @greensopinion thanks for the response.

1. Nope, I've only added my api key
2. From vscode or console using flutter run for iOS simulator or Android emulator
3. Yesterday it was nothing in the debug console, no errors, just normal stuff that app is running, tho today using the latest example I'm getting exceptions

[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: InvalidProtocolBufferException: Protocol message end-group tag did not match expected tag.
#0      CodedBufferReader.checkLastTagWas
package:protobuf/…/protobuf/coded_buffer_reader.dart:30
#1      GeneratedMessage.mergeFromBuffer
package:protobuf/…/protobuf/generated_message.dart:195
#2      new VectorTile.fromBuffer
package:vector_tile/…/proto/vector_tile.pb.dart:340
#3      VectorTile.fromBytes
package:vector_tile/vector_tile.dart:29
#4      VectorTileReader.read
package:vector_tile_renderer/src/vector_tile_reader.dart:7
#5      VectorTileLoadingCache.retrieve
package:vector_map_tiles/…/cache/vector_tile_loading_cache.dart:24
<asynchronous suspension>
#6      VectorTileModel._loadOnce
package:vector_map_tiles/…/grid/tile_model.dart:71
<asynchronous suspension>

[d@Dawids-MacBook-Pro example ]$ flutter doctor -v       
[✓] Flutter (Channel stable, 2.5.1, on macOS 11.5.2 20G95 darwin-x64, locale en-PL)
    • Flutter version 2.5.1 at /Users/d/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (4 days ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.2

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/d/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.10+0-b96-7281165)

[✓] VS Code (version 1.60.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

from flutter-vector-map-tiles.

from flutter-vector-map-tiles.

@greensopinion thanks, clearing cache helped with the exceptions, tho loading tiles still doesn't work, I'm getting this empty resul

I'm trying to figure it out since yesterday, trying different styles, different versions, devices, clearing things but I'm not seeng the vector tiles... running out of ideas

from flutter-vector-map-tiles.

from flutter-vector-map-tiles.

@stolus902 I had the same issue today and spent a few hours trying to figure out what's going on, turns out the tip from @geisterfurz007 was the solution for me:
The theme provided in ProvidedThemes.lightTheme() is what causes the bogus display, if you take a theme from one of these files: https://github.com/mapbox/mapbox-gl-styles/tree/master/styles it will work like a charm, make sure you clear the cache on the app after applying the change. Mapbox also has an API that provides themes, although some of them are not compatible with this package

from flutter-vector-map-tiles.

@Plenituz Thanks for looking into this. Did you figure out what the issue was with the theme? I'd like to correct any issues that cause maps to render incorrectly.

The cache uses the ID from the map theme, and the metadata version, if present. If you have either of those in the theme you'll find that you don't need to clear the cache. (the same is not true of the pbf data)

For example, in my theme I have the following:

{
    "version": 8,
    "name": "Dark Style",
    "id": "dark", <---- this is used for the file cache key
    "metadata": {
        "version": "10". <---- this is used for the file cache key
    },
    "sources": {
     ..
    }
}

With the above theme, I end up with cached files named as follows: 3_0_3_3.0_3.0_dark_10.png

from flutter-vector-map-tiles.

@Plenituz

@stolus902 I had the same issue today and spent a few hours trying to figure out what's going on, turns out the tip from @geisterfurz007 was the solution for me: The theme provided in ProvidedThemes.lightTheme() is what causes the bogus display, if you take a theme from one of these files: https://github.com/mapbox/mapbox-gl-styles/tree/master/styles it will work like a charm, make sure you clear the cache on the app after applying the change. Mapbox also has an API that provides themes, although some of them are not compatible with this package

Which themes did you manage to get things working on? I have it rendering a map, but still am missing text for street names (though not city names?) like in the above examples, even at zoom level 24 (though I tried other zoom levels too).

from flutter-vector-map-tiles.

@huy-vuong Yeah I have the same issue where street names are missing, I even tried with one of the mapbox API theme (https://api.mapbox.com/styles/v1/mapbox/dark-v10/ https://api.mapbox.com/styles/v1/mapbox/dark-v10.html), so I'm not sure if this is a theme problem or this package maybe doesn't support something around the street names? @greensopinion probably has more info on that?

@Plenituz Thanks for looking into this. Did you figure out what the issue was with the theme? I'd like to correct any issues that cause maps to render incorrectly.

@greensopinion Unfortunately I really don't have any knowledge on the theme formats, I just copy pasted the value I found on that mapbox repo, so I couldn't tell you what's missing from the provided theme

from flutter-vector-map-tiles.

I faced the same issue while working on greensopinion/dart-vector-tile-renderer#2 and finally found the culprit earlier this morning. The mapbox themes have a very lengthy filter which includes expressions the vector_tile_renderer library cannot parse yet. In such cases it defaults to never selecting the "faulty" layer, thus not rendering streets, buildings, or whatever else might have a filter including match, step or other expressions.

I am currently working on a fix for that and plan on creating dedicated PRs for more in-depth support of the Mapbox style spec once everything is cleaned up.

from flutter-vector-map-tiles.

Running the example with the built-in theme, I get the following:

Street names seem to work fine with the default theme.

If you use unsupported theme functions/styles it's expected that those won't render properly. @stolus902 can you confirm that you see the problem with the built-in theme?

from flutter-vector-map-tiles.

Just ran into this, FWIW for anyone checking this out: the example @greensopinion mentioned uses Stadia maps with the built-in theme. That works.

However the usage example seems to convey you can use Mapbox interchangeably with the built-in theme, but that does not seem to work.

Steps to reproduce

1. Create a vector example using default theme w/ Stadia maps API key (zoom: 10, max: 15)
2. Open app on iPhone 12 simulator
3. You see the map as expected
4. Switch the apiKey and _urlTemplate to Mapbox
5. Long press on the app icon, delete it
6. Run flutter clean then open on Simulator
7. The map looks like the @stolus902's map

Stadia Map Screenshot

Mapbox Map Screenshot

from flutter-vector-map-tiles.