1

I am building a mobile app for iOS and Android that needs geolocation permission. Using Capacitor to build this, it works fine in Android. But on iOS, the "center on user" button in my Mapbox map does not work and gets crossed out and disabled when you try to click on it. There are lots of answers online like this one where people explain that you have to add three permissions to the Info.plist file:

  • NSLocationAlwaysUsageDescription
  • NSLocationWhenInUseUsageDescription
  • NSLocationAlwaysAndWhenInUseUsageDescription

I only added the second one because I only need access to geolocation while the app is in use. But there is still no access to location services. I've also tried adding several plugins, but this also did not fix the problem. Here is a list of the relevant items in the package.json file:

  "dependencies": {
    "@capacitor/core": "^3.0.2",
    "@capacitor/ios": "^3.0.2",
    "@ionic-native/location-accuracy": "^5.34.0",
    "@mapbox/mapbox-gl-geocoder": "^4.7.1",
    "@mapbox/mapbox-sdk": "^0.13.0",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "mapbox-gl": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@capacitor/app": "^1.0.2",
    "@capacitor/cli": "^3.0.2",
    "@capacitor/geolocation": "^1.0.2",
    "capacitor-resources": "^2.0.5"
  }

For the android build, which works properly, I don't have to import any plugins or anything, I just have to add the permission. How can I let the users center the map on their location on ios using Capacitor? Thanks.

Alex
  • 2,154
  • 3
  • 26
  • 49

1 Answers1

0

The problem was that Android and iOS behave pretty differently for my use case. In the Android build, it was enough to give location permissions. With just these permissions, the mapbox map that's a big part of my app was able to make use of the user's location as it would normally in the web build. No plugins were necessary, so it was basically an ideal scenario.

On iOS, the mapbox map still does not have direct access to the user's location. So, when you clicked on the target symbol button to center on your location, the mapbox map couldn't complete the request even with the permissions. But what you can do is use the @capacitor/geolocation plugin to get the coordinates (and other gps data), and then set the map to go to specific coordinates that you pass to it.

I'm not sure why Android and iOS behave so differently in this case.

Alex
  • 2,154
  • 3
  • 26
  • 49