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
