RD-1209: Update map device loading (#59)

Author: sasaprodribaba

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/bridge/WebViewExecutor.kt

@@ -7,6 +7,7 @@
 package com.maptiler.maptilersdk.bridge
 
 import android.content.Context
+import android.view.View
 import android.view.ViewGroup
 import android.webkit.WebChromeClient
 import android.webkit.WebSettings
@@ -52,6 +53,8 @@ internal class WebViewExecutor(
     }
 
     private var _webView: WebView? = null
+    private var hasLoadedContent: Boolean = false
+    private var jsInterfaceAdded: Boolean = false
     internal val webView: WebView
         get() {
             if (_webView == null) {
@@ -69,6 +72,8 @@ internal class WebViewExecutor(
                 WebView(context).apply {
                     settings.javaScriptEnabled = true
                     settings.allowFileAccess = true
+                    settings.allowFileAccessFromFileURLs = true
+                    settings.allowUniversalAccessFromFileURLs = true
                     settings.domStorageEnabled = true
                     settings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
                     settings.useWideViewPort = true
@@ -93,13 +98,55 @@ internal class WebViewExecutor(
                             ViewGroup.LayoutParams.MATCH_PARENT,
                         )
 
-                    loadUrl("file:///android_asset/${Constants.JSResources.MAPTILER_MAP}.${Constants.JSResources.HTML_EXTENSION}")
+                    // Defer loading until JS interface is attached and the view is attached.
+                    // This prevents early page load causing "Android is not defined" on some devices.
+                    if (isAttachedToWindow) {
+                        ensureContentLoadedIfReady(this)
+                    } else {
+                        addOnAttachStateChangeListener(
+                            object : View.OnAttachStateChangeListener {
+                                override fun onViewAttachedToWindow(v: View) {
+                                    ensureContentLoadedIfReady(this@apply)
+                                    removeOnAttachStateChangeListener(this)
+                                }
+
+                                override fun onViewDetachedFromWindow(v: View) = Unit
+                            },
+                        )
+                    }
                 }
         }
     }
 
     internal fun setWebView(webView: WebView) {
         this._webView = webView
+        // Ensure our clients are attached so navigation callbacks work consistently.
+        webView.webChromeClient = WebChromeClient()
+        webView.webViewClient =
+            object : WebViewClient() {
+                override fun onPageFinished(
+                    view: WebView?,
+                    url: String?,
+                ) {
+                    url?.let { delegate?.onNavigationFinished(it) }
+                }
+            }
+
+        // If provided WebView is already attached, try loading if ready.
+        if (webView.isAttachedToWindow) {
+            ensureContentLoadedIfReady(webView)
+        } else {
+            webView.addOnAttachStateChangeListener(
+                object : View.OnAttachStateChangeListener {
+                    override fun onViewAttachedToWindow(v: View) {
+                        ensureContentLoadedIfReady(webView)
+                        webView.removeOnAttachStateChangeListener(this)
+                    }
+
+                    override fun onViewDetachedFromWindow(v: View) = Unit
+                },
+            )
+        }
     }
 
     internal fun getAttachableWebView(): WebView? = webView
@@ -151,9 +198,21 @@ internal class WebViewExecutor(
 
     internal fun addJSInterface(jsInterface: MTJavaScriptInterface) {
         webView.addJavascriptInterface(jsInterface, "Android")
+        jsInterfaceAdded = true
+        // Attempt to load content now that the interface is ready.
+        ensureContentLoadedIfReady(webView)
     }
 
     internal fun reload() {
         webView.reload()
     }
+
+    private fun ensureContentLoadedIfReady(webView: WebView) {
+        if (!hasLoadedContent && jsInterfaceAdded && webView.isAttachedToWindow) {
+            hasLoadedContent = true
+            webView.loadUrl(
+                "file:///android_asset/${Constants.JSResources.MAPTILER_MAP}.${Constants.JSResources.HTML_EXTENSION}",
+            )
+        }
+    }
 }

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/map/MTMapViewClassic.kt

@@ -9,22 +9,16 @@ package com.maptiler.maptilersdk.map
 import android.content.Context
 import android.util.AttributeSet
 import android.view.LayoutInflater
-import android.webkit.WebChromeClient
 import android.webkit.WebSettings
 import android.webkit.WebView
-import android.webkit.WebViewClient
 import android.widget.FrameLayout
 import com.maptiler.maptilersdk.R
 import com.maptiler.maptilersdk.bridge.MTBridge
-import com.maptiler.maptilersdk.bridge.WebViewExecutor.Constants
-import com.maptiler.maptilersdk.logging.MTLogType
-import com.maptiler.maptilersdk.logging.MTLogger
 import com.maptiler.maptilersdk.map.style.MTMapReferenceStyle
 import com.maptiler.maptilersdk.map.style.MTMapStyleVariant
 import com.maptiler.maptilersdk.map.style.MTStyle
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.launch
 
 class MTMapViewClassic(
     context: Context,
@@ -59,45 +53,30 @@ class MTMapViewClassic(
         this._controller = controller
         this._styleVariant = styleVariant
 
-        _controller.bind(scope)
-        _controller.options = options
-
-        val style = MTStyle(referenceStyle, styleVariant)
-        _controller.style = style
-
+        // Inflate and bind WebView first so the executor manages loading and callbacks.
         val rootView = LayoutInflater.from(context).inflate(R.layout.mtmapview_layout, this, true)
         webView = rootView.findViewById(R.id.map)
+        _controller.setWebView(webView)
 
+        // Configure settings only (clients + loading are handled by the executor).
         webView.apply {
             settings.javaScriptEnabled = true
             settings.allowFileAccess = true
+            settings.allowFileAccessFromFileURLs = true
+            settings.allowUniversalAccessFromFileURLs = true
             settings.domStorageEnabled = true
             settings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
             settings.useWideViewPort = true
             settings.loadWithOverviewMode = true
 
             isVerticalScrollBarEnabled = false
-
-            webChromeClient = WebChromeClient()
-            webViewClient =
-                object : WebViewClient() {
-                    override fun onPageFinished(
-                        view: WebView?,
-                        url: String?,
-                    ) {
-                        scope.launch(Dispatchers.Main) {
-                            try {
-                                _controller.initializeMap()
-                            } catch (error: Exception) {
-                                MTLogger.log("Map Init error $error", MTLogType.ERROR)
-                            }
-                        }
-                    }
-                }
-
-            loadUrl("file:///android_asset/${Constants.JSResources.MAPTILER_MAP}.${Constants.JSResources.HTML_EXTENSION}")
         }
 
-        _controller.setWebView(webView)
+        // Now bind the controller (attaches JS interface) and set options/style.
+        _controller.bind(scope)
+        _controller.options = options
+
+        val style = MTStyle(referenceStyle, styleVariant)
+        _controller.style = style
     }
 }

MapTilerSDK/src/test/java/com/maptiler/maptilersdk/StyleAndCommandsTests.kt

@@ -75,7 +75,10 @@ class StyleAndCommandsTests {
 
     @Test fun addLayer_Symbol_NoIcon_AddsLayerDirectly() {
         val layer = MTSymbolLayer("sym1", "src1")
-        val js = com.maptiler.maptilersdk.commands.style.AddLayer(layer).toJS()
+        val js =
+            com.maptiler.maptilersdk.commands.style
+                .AddLayer(layer)
+                .toJS()
         assertEquals("${MTBridge.MAP_OBJECT}.addLayer({\"id\":\"sym1\",\"type\":\"symbol\",\"source\":\"src1\"});", js)
     }
 
@@ -89,7 +92,10 @@ class StyleAndCommandsTests {
         every { ImageHelper.encodeImageWithMime(any()) } returns EncodedImage("AAA", "image/png")
 
         val layer = MTSymbolLayer("sym2", "src2", bmp)
-        val js = com.maptiler.maptilersdk.commands.style.AddLayer(layer).toJS()
+        val js =
+            com.maptiler.maptilersdk.commands.style
+                .AddLayer(layer)
+                .toJS()
 
         // Check presence of image add and addLayer call and data URL with correct mime
         assertTrue(js.contains("addImage('iconsym2'"))