Web: race condition while loading map causing incorrect map state

[JulianBissekkou]

Problem description

When initializing a map, there is sometimes a race condition where the map gets into an "bad" state. In this state it throws a few exceptions while interacting with it. Dragging or clicking on the map throws exceptions and adding icons is not possible. Essentialy all interactions with anyAnnotationManager is throwning an error.

Reproduce the issue

In the branch fix-missing-layer-issue we adjusted the example app to have a minimal reproducable example that can be used to test the issue.

1. Run the app flutter run --web-renderer html -d chrome --release (we were able to reproduce it more often with release, but profile and dev also works)
2. Open the console in the dev tools, you should see a bunch of warnings
3. Click on the FloatingActionButton. If the map is in that incorrect state, nothing should happen and the map should not zoom to the pin
4. See the console for additional errors, usally the source that was added initially from all the AnnoationManagers is gone

We are running this on MacOS with Flutter 3.16.0 or 3.16.4 on Chrome

[JulianBissekkou]

@m0nac0 I was able to trace the issue back to the web sdk. I am not 100% sure if I am on the right track but this is what I found out: The style of the map is loaded and we setup all the AnnotationManagers. Every manager adds his own source. Then the JS sdk does something internally where it reapplies the style (again?) and then clears all the other sources.

I added some logging and I found out that after the flutter map was loaded, the js sdk intenally called removeSource See this class and method in the js repo.

Any idea what happens here?

[m0nac0]

Sorry, I don't have any idea what might be going on there. Can you maybe get a callstack / trace from maplibre js?

[stefanschaller]

We just got the stacktrace + the message from the screenshot. Could you check it out by yourself @m0nac0 ?

[stefanschaller]

@m0nac0 We need help to fix that issue, otherwise we are not able to ship it with this map to the customer.

[m0nac0]

Sorry, I've tried to reproduce this issue at least a few dozen times with your branch, html renderer and release mode and I can never reproduce it (neither on Firefox nor Chrome). The FAB always works and I never see those errors.

Maybe you can use a local copy of maplibre js and insert a console.trace() in the removeSource method you linked?

[JulianBissekkou]

Can you give me some guidance on how to run this with a local copy of maplibre js? I never did this

[m0nac0]

I'd put a local copy of the js file in the example/web folder and replace the https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js reference in index.html with the name of the local file.

[stefanschaller]

Seems to be fixed in 3.6.2

[m0nac0]

That's good to hear! Should we change anything in the repo? I guess our example code should pull the latest version of maplibre gl js automatically, right?

[stefanschaller]

I sadly had the issue again today and yesterday. I will try find more details.

[stefanschaller]

I just figured out how to do that by myself.

1. Download a release dist.zip from e.g. https://github.com/maplibre/maplibre-gl-js/releases/tag/v4.0.0
2. Unzip the file
3. Move the file into example/web

Add the following lines:

  <script src='dist/maplibre-gl.js'></script>
  <link href='dist/maplibre-gl.css' rel='stylesheet' />

Edit: Doesn't make since to use the release, since it's also obfuscated

[stefanschaller]

I just figured out how to add the js sources. @JulianBissekkou

1. Download a release dist.zip from e.g. https://github.com/maplibre/maplibre-gl-js/releases/tag/v4.0.0
2. Unzip the file
3. Move the file into example/web

Add the following lines:

  <script src='dist/maplibre-gl-dev.js'></script>
  <link href='dist/maplibre-gl.css' rel='stylesheet' />

I can still reproduce the error with maplibre-gl-js 4.0.0: