Android Question WebView - AspNetCore problems

[jackdev65]

Hello
I am trying to display a "map page" of sorts on my mobile app, which worked fine when the site was on .Net Framework (web forms). Now I have since migrated this proect using DotVVM and B4A does not like it, heres the code that runs

WebViewExtras.addWebChromeClient(MapWebView,True)
        WebViewExtras.addJavascriptInterface(MapWebView,True)
                        
            MapWebView.Visible=True
            MapWebView.JavaScriptEnabled = True
            WebViewExtras.addJavascriptInterface(MapWebView, "dotvvm") 'tried adding these but to no avail
            WebViewExtras.addJavascriptInterface(MapWebView, "mapbox-js")
            MapWebView.LoadUrl(serverurl & "/MobileMapVVM?username=" & UserNameVal & "&token=" & Token & "&lat=" & Lat & "&lng=" & Lng)

heres the error I get

Uncaught TypeError: Cannot read property 'init' of undefined in https://XXXXXXXX.azurewebsites.net/MobileMapVVM?username=XXXXXXXX&token=XXXXXXXX&lat=XXXXXXXX&lng=XXXXXXXX (Line: 30)
Uncaught TypeError: Cannot read property 'getItem' of null in https://XXXXXXXX.azurewebsites.net/dotvvmResource/xwz1aaKWJF0JpGGYzM1O/dotvvm--internal (Line: 1)
Uncaught SyntaxError: Unexpected token '.' in https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css (Line: 1)
Uncaught TypeError: window.dotvvm.init is not a function in data:text/javascript;base64,d2luZG93LmRvdHZ2bS5pbml0KCJlbi1VUyIpOw== (Line: 1)

It mentions init which is a method I subscribe to in the view of my webiste

@viewModel XXX.ViewModels.MobileMapViewModel, XXX

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>Display a map</title>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Test</h1>

    <div ID='map'></div>
    <script Dependencies="mapbox-js">
        dotvvm.events.init.subscribe(() => {
            mapboxgl.accessToken = dotvvm.viewModels.root.viewModel.Token();
            lat = dotvvm.viewModels.root.viewModel.Latitude();
            lng = dotvvm.viewModels.root.viewModel.Longitude();

            if (!mapboxgl.supported()) {
                alert('Your mobile device does not support Mapbox GL');
            }
            else {
                var map = new mapboxgl.Map({
                    container: 'map', // container id
                    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
                    center: [lng, lat], // starting position [lng, lat]
                    zoom: 13 // starting zoom
                });


                var marker = new mapboxgl.Marker()
                    .setLngLat([lng, lat])
                    .addTo(map);
            }
        })
    </script>
    <dot:RequiredResource Name="mapbox-js" />
</body>
</html>

Any help would be greatly appreciated

Thanks!