flutter-mapbox-gl doesnt work on the web

[maliknajjar]

in pub.dev android, ios and web is considered supported, but when i use my app in the web the mapbox map doesn't work.
is it me or its just not supported for the web?

[Shailevy]

It works fine on the web, you just need to add a few lines to your index.html, it's described in the js integration guide

[maliknajjar]

It works fine on the web, you just need to add a few lines to your index.html, it's described in the js integration guide

thank you so much Shailevy for responding .. can you please send me the link of the js integration guide?
I didn't find it

[maliknajjar]

Is this what you are talking about Mr. Shailevy ?
https://docs.mapbox.com/mapbox-gl-js/api/

[Shailevy]

Yes.. That's it

[maliknajjar]

I included the JavaScript and CSS files in the head but still doesn't work.
in this path -> {appName}/web/index.html
that's weird

[Shailevy]

What's the errors you see in the browser console? Does the same code work on iOS/Android?

[maliknajjar]

there is nothing in the browser console and yes the map works fine on android

[maliknajjar]

when I included js integration code part which is inside the body tag .. it worked fine
but its not working from the flutter-mapbox-gl side

[maliknajjar]

do I have to make some type of cleaning or refreshing .. could that be the problem ?

[iampato]

If you updated your flutter version to 1.26.0-12.0pre or higher flutter web removed the shadowRoot 'thing' which this plugin still refers to in order to append the html platform view in:
mapbox_gl_web/lib/src/mapbox_map_controller.dart

 HtmlElement e = document.getElementsByTagName('flt-platform-view')[index]
        as HtmlElement;

    LinkElement link = LinkElement();
    link.href =
        'https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css';
    link.rel = 'stylesheet';
    e.shadowRoot.append(link);

[maliknajjar]

what's the solution ?

[iampato]

Downgrade to a lower version in the beta version

[alparslana]

I encounter the same problem. Running Flutter 1.26.0-17.3.pre • channel beta. It was working fine before one of my flutter upgrades, and now it is broken.

Downgrading to a previous version of flutter is neither an elegant solution nor sustainable. Are there any plans to bring a structural fix to mapbox package to be in compliance with newer versions of flutter SDK?

[tobrun]

appreciate any help we can get on this issue! I'm personally not very familiar with flutter web and web in general.

[iampato]

Great I will take a look 👍

[maliknajjar]

was this probleme fixed guys?

[joranmulderij]

Still waiting.

[qcasey]

I still have the issue even with the PR build above, does that fix it for anyone else?

[shroff]

@qcasey could you please comment on #551 describing what you observed?

[alparslana]

Hi all,

I have tried out the update of @shroff and it seems to fix the problem on web version. I will not be able to comment on performance/effectivity however the functionality is back with this update. I have manually updated my local mapbox_map_controller.dart file and now I see the map in my browser. Kudos @shroff

[maliknajjar]

so when this fix pull request will be merged to the master ?

[joranmulderij]

I found that (in Flutter 2) it gets stuck in the loop

Future<void> _addStylesheetToShadowRoot() async {
  int index = -1;
  // Keeps running forever!
  while (index == -1) {
    index = document.getElementsByTagName('flt-platform-view').length - 1;
    await Future.delayed(Duration(milliseconds: 10));
  }
  HtmlElement e = document.getElementsByTagName('flt-platform-view')[index]
      as HtmlElement;

  LinkElement link = LinkElement();
  link.href =
      'https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
  link.rel = 'stylesheet';
  e.shadowRoot.append(link);

  await link.onLoad.first;
}

Removing all the contents from the function results in the map showing, but with the wrong size.

I hope someone can solve this issue.

[alparslana]

@joranmulderij can you try out the update @shroff has done?

Here: https://github.com/tobrun/flutter-mapbox-gl/pull/551/files

Let us know if it works for you. In his implementation the loop is removed with updated _addStylesheetToShadowRoot method contents.

[joranmulderij]

Yes. @shoff's solution works. Just tried it.
I hope it will be merged soon.

[qcasey]

I'm not sure what issue I was having before, but I can also confirm the webcss branch fixes this issue beautifully on Flutter 2.0.1

[joranmulderij]

#551 is just trying to merge the webcss branch into main.
You can indeed also just use the webcss branch.

[maliknajjar]

I tried to change the file but it gave me this error

[joranmulderij]

Put this in your pubspec.yaml. No file editing needed.

dependencies:
  mapbox_gl:
    git:
      url: https://github.com/tobrun/flutter-mapbox-gl.git
      ref: webcss
  # Other dependencies...

[maliknajjar]

nice it's working .. it didn't work for me in the first time but then I changed the --web-renderer to html and it's working now
this is the command for people who had the same issue -> "flutter run -d chrome --web-renderer html"