Height of Platform View type may not be set in full screen map web

[PhloxDev]

when run example on web and open full screen map not fill all page and log is:

 Height of Platform View type: [plugins.flutter.io/mapbox_gl_432856607] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [plugins.flutter.io/mapbox_gl_432856607] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.

how to resolve it ?

[felix-ht]

seen this as well - reloading makes this go away for me. No idea how to fix it as of now.

[metafounder]

seen this as well. Also, reloading multiple times does not make it to go away for me.

what I did:

  void _onStyleLoaded(_) {
    _map.resize();
    ...

forcing a unnecessary resize. However, it does work as expected after this - if you can live with the ugly resize.

I dig up an issue with mapbox-gl-js : mapbox/mapbox-gl-js#11085 I think in one of the comments here someone suggested the resize hack.

[metafounder]

also this is how you get rid of the warnings with " Height of Platform View type" add ..style.width and ..style.height like this :

  void _registerViewFactory(Function(int) callback, int identifier) {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        'plugins.flutter.io/mapbox_gl_$identifier', (int viewId) {
      _mapElement = DivElement()
        ..style.width = '100%'
        ..style.height = '100%';
      callback(viewId);
      return _mapElement;
    });
  }

But this won't help you with the bug itself. The only solution I know for now is the resize trick.

[felix-ht]

a pr for this seems to be in the works: mapbox/mapbox-gl-js#11310

So this will hopefully be fixed soonish, from the upstream. @metafounder are the changes required to Div related to the resizing bug or is this another issue?

With the resize i would wait for new release from upstream - but if the warning would persist it would be great if you could create a PR for the style changes.

[metafounder]

Yes, I agree we need to wait for a fix in mapbox-gl-js.

The changes in the Div are only related to the warning printed regarding height and width, so I can create a PR for this.

[lukemadera]

@metafounder I tried the resize call you showed but I'm getting an error: Error: The method 'resize' isn't defined for the class 'MapboxMapController' and if I try on Map I get a similar one: Error: The method 'resize' isn't defined for the class 'MapboxMap?'.
Does this still work? How is _map defined for you / what does that reference?

[felix-ht]

you have to do this in (a fork of) this repo not in youe own dart code. The map that supports the resize is not exposed.

[metafounder]

hi @lukemadera , @felix-ht is right, that is what I did for now. Is messy, I know, but I take it that it's a temporary solution.

Update: I will create the PR for the style changes mentioned above this week.

[lukemadera]

Oh okay, it only works in a fork right now, thanks for explaining. So @felix-ht after your PR is merged will that expose the resize function? Or will it fix the underlying issue so we do not need to call resize at all? Thank you both!

[felix-ht]

@lukemadera After the upstream release the resize will no longer be required and everything should just work.
To use it all you will have to do is bump your version of mapbox-gl-js to 2.6.2 (in the index.html) after it has been released.

One option you try in the meantime is to use Version 2.4.0 as this bug was introduced with 2.5.

[lukemadera]

Oh in index.html? I'm still on v1.12.0 and having the issue. I'll try v2.4.0

[samu-developments]

Using a local build of mapbox-gl-js does work better in chrome (can't reproduce the issue rarely happens), firefox works on first load, but not after a reload.

[lukemadera]

It still happens for me with https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js in Chrome. It seemed a bit better in v2.4.0 but maybe I was just getting lucky for a bit as it seems just as bad as originally now.

Can we please expose the map resize function for now as a manual work around at least so I can consistently ensure the map is the correct size? @felix-ht

[felix-ht]

This is an upstream issue introduced with 2.5 a fix was merged to master but has yet to be released

[lukemadera]

I thought that as you said that earlier, but I have the issue in 2.4.x also, so it's not (only) an issue in 2.5.x

[lukemadera]

@felix-ht any update on this? I've tried various mapbox js versions and still have the issue, e.g. https://landos.earthshot.eco/p/projec
All that white space is supposed to be the map :)

u

[felix-ht]

2.7 of mapbox js was just released - this should fix this issue:
https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.7.0

[lukemadera]

Awesome! On first few tries it seems to be working, thank you @felix-ht !

[sunilguptasg]

I managed to fix this by wrapping an iFrame with a div:

ui.platformViewRegistry.registerViewFactory(iFrameId, (int viewId) {
final html.Element wrapper = html.DivElement();
wrapper.style.width = '100%';
wrapper.style.height = '100%';
wrapper.append(_iframeElement);
return wrapper;
});

Note: I also had to add these to the iFrame:
_iframeElement.style.width = '100%';
_iframeElement.style.height = '100%';

[SwiftyFlow]

Size issue too here: #1008 (comment)
Any clue??