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
heres the error I get
It mentions init which is a method I subscribe to in the view of my webiste
Any help would be greatly appreciated
Thanks!
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
B4X:
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
B4X:
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
B4X:
@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!