1

I am working on an app that uses ionic capacitor in ios. I recently updated my Xcode to 13. When syncing my ionic app to ios and then running my code in Xcode, it runs. But when opening a map using mapbox, the screen half loads, and then the app bugs out and starts refreshing the page. See the half-loaded screen here:

broken app

When I instead run ionic cap run ios -l --external, creating a live reload server that runs the code in ios, the code runs and the Mapbox map works! I've run the app without adding the -l (indicating live reload) and it does not work.

This is a major problem because I cannot run a live reload server for users when using the app in production. Anyone experienced this or know how to fix the problem? I'm not sure if this is because I've updated my Xcode or not.

Darrow Hartman
  • 4,142
  • 2
  • 17
  • 36
  • Unrelated question, is Mapbox the next big thing for integrating maps on mobile applications ? Why not use Google since there is so much documentation and support for it ? – mahen23 Oct 29 '21 at 10:29
  • Seeing the same issue. Works when running in with the LiveReload option, grey screen otherwise. – Thomas Klemm Nov 18 '21 at 19:49

2 Answers2

1

Had the same issue (with Ionic React), solved it this way (leaving notes if someone else stumbles onto it):

This turned out to be a super-frickly issue with how mapbox-gl works internally. A certain module can't be transpiled properly if other browsers are targeted.

Followed these docs on transpiling v2: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Previous bug reports happened in multiple ways:

Thomas Klemm
  • 10,678
  • 1
  • 51
  • 54
0

Update: It appears that this.map.on('load'()=>{}) does not work when running an ionic capacitor app using mapbox gl js on ios. I just commented that code out and the app worked.

Darrow Hartman
  • 4,142
  • 2
  • 17
  • 36