Azure maps not showing on IOS app created with capacitor

Question

I'm using Angular with Capacitor to build a hybrid mobile app for iOS and Android. I use the azure-maps-control SDK to render a map inside a component. It works perfectly in:

Chrome / desktop browsers ✅

Android (via Capacitor),

iOS Safari ,

But in the iOS app compiled via Capacitor, the Azure Map does not render.

Symptoms:

The element is created and attached to the DOM
The map instance is created (new atlas.Map(...) returns an object)
But the map area is completely blank / transparent
None of the Azure Maps events (ready, load, error) fire
No requests are made to load atlas.min.js, tiles, or other Azure resources
No JavaScript errors appear in Safari Web Inspector....

is it possible that azure maps is just not compatiable with ios apps?? has anyone here any experience with that?

Try running this line of code 'alert(atlas.isSupported())' assuming the atlas namespace is available/exposed in your app. If this fails, then it's likely WebGL is disabled in the capacitor webview instance. — rbrundritt
– rbrundritt, Commented Apr 21 at 17:15

Pavan · Accepted Answer · 2025-05-05 08:08:53Z

Thanks for the suggestion @rbrundritt that comment was helped pointing things in the right direction.

Running alert(atlas.isSupported()) inside the iOS Capacitor app returned false, which confirmed that WebGL isn’t supported in the current WKWebView environment. This explained why Azure Maps wasn’t rendering no tile requests were made, no events fired, and the map area stayed completely blank.

To resolve this, the capacitor.config.ts file was updated to allow navigation to Azure Maps domains:

server: {
  allowNavigation: [
    '*.microsoft.com',
    '*.azure.com',
    '*.azure.net'
  ]
}

The Info.plist in the iOS project was modified to allow broader loading of external content and support features required by Azure Maps:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Since WebGL still wasn’t functioning correctly, the Capacitor Community WebView plugin was added to improve compatibility:

npm install @capacitor-community/webview
npx cap sync ios

In AppDelegate.swift, the custom WebView engine was registered:

import Capacitor
import CapacitorCommunityWebview

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    CAPBridge.register(CapacitorCommunityWebviewPlugin())
    return true
  }
}

After rebuilding the app in Xcode, Azure Maps rendered successfully on iOS.

Collectives™ on Stack Overflow

Azure maps not showing on IOS app created with capacitor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related