Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Running example #13

Closed
stolus902 opened this issue Sep 20, 2021 · 16 comments
Closed

Running example #13

stolus902 opened this issue Sep 20, 2021 · 16 comments

Comments

@stolus902
Copy link

stolus902 commented Sep 20, 2021 •
edited
Loading

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:
Simulator Screen Shot - iPhone 12 Pro Max - 2021-09-20 at 16 44 28

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

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).

@greensopinion
Copy link
Owner

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

@stolus902
Copy link
Author

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

@greensopinion
Copy link
Owner

greensopinion commented Sep 21, 2021 via email

@stolus902
Copy link
Author

@greensopinion thanks, clearing cache helped with the exceptions, tho loading tiles still doesn't work, I'm getting this empty resul
Simulator Screen Shot - iPhone 12 Pro Max - 2021-09-21 at 19 33 49

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

@greensopinion
Copy link
Owner

greensopinion commented Sep 21, 2021 via email

@Plenituz
Copy link

@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

@greensopinion
Copy link
Owner

@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

@huy-vuong
Copy link

huy-vuong commented Sep 29, 2021 •
edited
Loading

@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).

@Plenituz
Copy link

@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

@mvarendorff2
Copy link

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.

@greensopinion
Copy link
Owner

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

Simulator Screen Shot - iPhone 12 - 2021-11-28 at 15 03 25

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?

@greensopinion
Copy link
Owner

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

@brentlintner
Copy link

brentlintner commented Apr 22, 2022 •
edited
Loading

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

@greensopinion
Copy link
Owner

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.

@greensopinion greensopinion reopened this Apr 22, 2022
@greensopinion
Copy link
Owner

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.

@SeCo89 SeCo89 mentioned this issue Feb 24, 2023
Closed
@HappyMakadiyaS HappyMakadiyaS mentioned this issue May 25, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@brentlintner @Plenituz @huy-vuong @greensopinion @mvarendorff @mvarendorff2 @stolus902