Switching layers during runtime [QUESTION]

[codeOfJannik]

Hi @JaffaKetchup, I've a question about switching between different layers. I also already checked #10 and #16, but that didn't helped me get it working.

I'm trying to implement a button on my map to switch the map layer from aerial style to streetmap style. This should work in online and offline mode.

So I defined two different TileProvider and TileLayerOptions objects:

final aerialTileProvider = StorageCachingTileProvider(cacheName: 'aerial');
  final streetTileProvider = StorageCachingTileProvider(cacheName: 'streetmap');
  final aerialTemplateUrl = Environment.env.mapboxAerialTemplateUrl +
      Environment.env.mapboxAccessToken;
  final streetTemplateUrl = Environment.env.mapboxStreetmapTemplateUrl +
      Environment.env.mapboxAccessToken;
  TileLayerOptions get aerialTileLayerOptions {
    return TileLayerOptions(
        urlTemplate: aerialTemplateUrl,
        tileProvider: aerialTileProvider,
        overrideTilesWhenUrlChanges: true,
        tileFadeInDuration: 0,
        tileFadeInStartWhenOverride: 1.0);
  }

  TileLayerOptions get streetTileLayerOptions {
    return TileLayerOptions(
        urlTemplate: streetTemplateUrl,
        tileProvider: streetTileProvider,
        overrideTilesWhenUrlChanges: true,
        tileFadeInDuration: 0,
        tileFadeInStartWhenOverride: 1.0);
  }

And try to switch them based on map style the user selected:

Observer(
      builder: (context) => FlutterMap(
        options: MapOptions(
            center: viewModel.currentLocation,
            minZoom: viewModel.minZoom,
            maxZoom: viewModel.maxZoom,
            zoom: viewModel.model.initialZoom,
            interactiveFlags: InteractiveFlag.pinchZoom |
                InteractiveFlag.doubleTapZoom |
                InteractiveFlag.drag),
        mapController: viewModel.model.mapController,
        children: [
          TileLayerWidget(
            options: viewModel.model.mapStyle == MapStyle.aerial
                ? viewModel.aerialMapLayer
                : viewModel.streetMapLayer
          )
        ],
        layers: [
          MarkerLayerOptions(markers: [
            Marker(
                point: viewModel.currentLocation,
                builder: (buildContext) => Container(
                    child: Image.asset('assets/images/my_location_circle.png')))
          ])
        ],
      ),
    );

The problem I'm facing right now is, if the style is switched, the current visible map region does not change the style. Only if the map is moved to tiles that have not been displayed before, these tiles are displayed in the correct style.

If I run the same code and just change the TileProvider to the standard flutter_map NonCahcingNetworkImageProvider it works fine.
So, is there any possibility to use the StorageCachingProvider and update the current displayed tiles after the map style has changed?

[JaffaKetchup]

Hi there @codeOfJannik,

I understand your issue is about tiles not updating as soon as the source has changed. Unfortunately, this was an issue in flutter_map, completely independent to this library. #10 and #16 are unrelated to the issue I think your talking about, these were to-do with the actual storage done by this library.

However, as of a few weeks ago fleaflet/flutter_map#667 has been merged into the latest version. This should allow you to hook up a stream to FlutterMap() and send events to it when you want to reset. Indeed, I tried this on my local version of this library and it seemed to work correctly 99% of the time - the other 1% was probably my bad coding in the example project!

Therefore, to resolve this issue, please look into fleaflet/flutter_map#667 further. By looking at the provided examples, you should be able to figure out how to do this on your side whenever you change the source. As this is an issue with flutter_map, not this library, I am unable to provide much detailed support if that doesn't work.

As an unrelated side note, please consider using a pre-release version of this library if your project isn't a production project (breaking changes; bugs; etc. may still be present), because big changes are coming that will make v3 almost entirely incompatible with v4.

Please let me know if this works, or even if it doesn't! Good luck!
If this solved your issue, please consider liking on pub.dev, starring here on GitHub or even potentially donating if you can spare a couple of cents/pennies!

[JaffaKetchup]

I have just reread the last part of your post:

If I run the same code and just change the TileProvider to the standard flutter_map NonCahcingNetworkImageProvider it works fine.
So, is there any possibility to use the StorageCachingProvider and update the current displayed tiles after the map style has changed?

This does seem a little strange, but is still likely to do with the caching in memory that this library does automatically. Please try the above method to fix things, but 'read with salt' the parts about this being an issue in flutter_map, it's more likely a shared issue.

[JaffaKetchup]

Hi there @codeOfJannik,
Just following up: has this solved your question? I'd be happy to offer more help if it hasn't :)

[codeOfJannik]

Hi @JaffaKetchup, thanks for your answers. I was not working on my project the last few days. I'll check your suggestions today and let you know if it's working :)

[codeOfJannik]

Thanks, with v4.0.0-dev.6 and v0.14.0 of flutter_map the tile layer reset works fine 👍
Do you have any time estimation when version 4 will be released for stable? Because the project I'm working on will be out of development on production in a few weeks

[JaffaKetchup]

That's great to hear!

About the v4 release, development is coming to an end. I think all new functionality is implemented, and most functionality should already be stable, but don't use the LineRegion yet in a stable project (there should be few bugs but I'm sure there will be more breaking changes).

Rough timeframe, I'm not exactly sure and I can't promise, but if I had to I'd say 1-2 weeks - then again, I said that 2 months ago. I'll keep the Version 4 PR updated, so you should check there for announcements.

If that's all, you can close the issue! Thanks for your interest :)

[codeOfJannik]

Ok, that's fine. I'm anyway just using RectangleRegion for now.
Thanks some much for your replies! I'm really looking forward to future updates! 😄

[JaffaKetchup]

Hi there,
Just wanted to ask a few questions to smooth off any rough edges for v4, so it would be a huge help for you to spare a few minutes to answer them if you want to and when you have time :)

1. What is your main use case for this library?
   For example: Are you building an app with both 'browse caching' and bulk downloading, or just one or the other? Does your app have a dedicated offline mode that you're using this library for?
2. What is the theme/purpose of your app?
   For example: Is it a hiking app, a food delivery app or just a general mapping app?
3. What platform are you developing for?
   For example: Android/iOS/Both
4. On a scale of 1 (hard) to 10 (easy), how easy was it to setup this library in your app?
   If possible, explain why you gave it that rating (what was hard, what was easy)
5. Is there anything you'd like to see added/removed/changed before the Version 4 release?
   If possible, explain why you chose these things: how would it help you?

Many thanks, and have a great day!

[codeOfJannik]

1. & 2. The main use case is bulk downloading. Since it's an educational app for a school and must run on devices owned by the school, that have no mobile internet connection, the map data will be downloaded in a Wifi network before the students start using the app outdoor.
2. Both
3. 8 - With the example and the awesome in-code documentation I had no problems implementing the library to my app.
4. For my use-cases the v4 is absolutely fine