Android Webview support

Hi,

I can’t use the native SDK for Android.

I’ve tried to use the Web SDK and show the map in HTML loaded into Android Webview.

I can see the controls of the map but I don’t see any map tile.

Here’s my logcat:

D/NetworkSecurityConfig: No Network Security Config specified, using platform default
I/chromium: [INFO:CONSOLE(1)] “Not allowed to load local resource: blob:null/0f35d4f8-b840-4660-a4cf-1b9391ad2996”, source: blob:null/97d6d9ef-0ef7-4907-b5f3-08787a42e4cc (1)
I/chromium: [INFO:CONSOLE(1)] “Not allowed to load local resource: blob:null/0f35d4f8-b840-4660-a4cf-1b9391ad2996”, source: blob:null/97d6d9ef-0ef7-4907-b5f3-08787a42e4cc (1)
I/chatty: uid=10131(il.co.isrcorp.routenavigationgmaps) identical 1 line
I/chromium: [INFO:CONSOLE(1)] “Not allowed to load local resource: blob:null/0f35d4f8-b840-4660-a4cf-1b9391ad2996”, source: blob:null/97d6d9ef-0ef7-4907-b5f3-08787a42e4cc (1)
I/chromium: [INFO:CONSOLE(1)] “Uncaught Error: NetworkError: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: The script at ‘blob:null/0f35d4f8-b840-4660-a4cf-1b9391ad2996’ failed to load.”, source: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps-web.min.js (1)

Can you please advise?

It seems I didn’t have a network connection.

Now I do have network connection, but I still can’t see the map.

That’s what I see in the logcat:
03-17 09:42:15.038 2050-2050/il.co.isrcorp.routenavigationgmaps I/chromium: [INFO:CONSOLE(1)] “Uncaught TypeError: Object raster-traffic-incidents has no method ‘startsWith’”, source: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps-web.min.js (1)
03-17 09:42:15.038 2050-2050/il.co.isrcorp.routenavigationgmaps I/chromium: [INFO:CONSOLE(25)] “Uncaught ReferenceError: tt is not defined”, source: https://d5dfbc67-5900-47d4-99fb-c564bfae7850.androidplatform.net/tomtommaps.html (25)

Hi.

Can you please share the source code of your activity class and together with JS code which you are using to load a map?

It will help to understand what’s going on.

Regards,
Mateusz

Hi,

Meanwhile I’ve solved the previous issue.
I ran it on Android 4.4, and there some missing javascript methods, so I’ve added them, as you can see at the attached file.

Now, I can successfully see the map on Android 9, but I can’t see the the streets names on the map. I’m getting the following error:
“Not allowed to load local resource: blob:null/72fff2b1-728b-412e-af0d-2953538a0954”, source: blob:null/0c253c32-13f8-4bd9-a0a2-2b8d469f7629 (1)

In Anroid 4.4 I can’t even see the map, and I’m getting the following error:
03-18 12:00:40.689 2757-2757/com.example.tomtomtest I/chromium: [INFO:CONSOLE(1)] “Error: Failed to initialize WebGL”, source: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps-web.min.js (1)
03-18 12:00:40.689 2757-2757/com.example.tomtomtest I/chromium: [INFO:CONSOLE(1)] “Uncaught Error: Failed to initialize WebGL.”, source: https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps-web.min.js (1)

Here’s my Java code:
WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl(“file:///android_asset/tomtommaps.html”);

Here is my HTML file (without my key…):

<!DOCTYPE html>
<html class='use-all-space'>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>My Map</title>
    <meta name='viewport'
          content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <!-- Replace version in the URL with desired library version -->
    
    <style>
       #map {
           width: 100vw;
           height: 100vh;
       }
    </style>
</head>
<body>
    <div id='map' class='map'></div>
 <!-- Replace version in the URL with desired library version -->
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps.css'>
    <script>
	if (typeof String.prototype.startsWith != 'function') {
  // see below for better implementation!
  String.prototype.startsWith = function (str){
    return this.indexOf(str) === 0;
  };

  }
  if (typeof Array.prototype.includes != 'function') {
  // see below for better implementation!
  String.prototype.includes = function (str){
    return this.indexOf(str) === 0;
  };
  }
</script>
	<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.48.1/maps/maps-web.min.js"></script>
    <script>
	var counter = 1;
	var map = tt.map({
    key: 'key',
    container: 'map',
    zoom: 18, 
   center: [35.00781666666666,31.90859722222222], 
    style: 'tomtom://vector/1/basic-main',
    
});
map.addControl(new tt.FullscreenControl());
map.addControl(new tt.NavigationControl());
map.on('load',function() {

	var coords = [[35.00781666666666,31.90859722222222],[35.032719444444446,31.893191666666667]];

map.addLayer({
        'id': '123',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'data':{
					"type": "Feature",
					"geometry": {
								"type": "LineString",
								"coordinates": coords
								},
  
					}
					},
        
        'paint': {
            'line-color': '#ff0000',
            'line-width': 5
        }
});

});
    </script>
</body>
</html>

Thank’s

Adi

Thanks for the code.

Street names will appear when you will set a different language for example en-GB or you can change a map style to raster: tomtom://raster/1/basic-main. When I’ll get any more information about that I’ll come back to you.
Regarding Android 4.4 and it’s WebView… I don’t think that we are supporting it. Even our website is rendering with a lot of errors as well as JavaScript Examples and other map-based applications.

Regards,
Mateusz

Hi,

I’ve tried it with “tomtom://raster/1/basic-main” but it still doesn’t work.

Only setting map language to “en-GB” solved it.

But I don’t understand why it works properly when I run it on my PC, including Hebrew street names, but it doesn’t work the same way in Android.

About Android 4.4, I’ve found the following solutions of mapbox:

Do you have similar solution?

Adi

Hi,

It’s good that changing the language worked for you. That’s strange however that ‘raster’ didn’t. I’ve tested raster on Android 10 and Android 9 phones and it works without any problems:

.
On PC when you are running browser different than based on Chromium it should work out of the box, like on Firefox for example.
This issue is connected with the fact that Chromium-based browsers don’t allow to load local resources: https://bugs.chromium.org/p/chromium/issues/detail?id=379206.
The workaround is to host the page on a local http server, like it is described in the following tutorial: https://developer.tomtom.com/maps-sdk-web-js/tutorials-basic/display-vector-map.

Regarding Android 4.4 similar to MapBox workaround solution, you can try to apply it using our old JS SDK: https://developer.tomtom.com/maps-sdk-web/tutorials-basics/displaying-vector-map. I don’t know however whether it will work in that way or not. Hopefully, you’ll succeed.

Regards,
Mateusz