Android Question WebWiev Javascript problem

[jefflynn1974]

I have a weird problem with webview. I want to dislay the attached html, which is supposed to show an openstreetmap map using javascript and openlayers2. I'm loading the html from a string with WebWiev.LoadHtml and (with WebWievExtras) I get the error message, which is uncaught exception: openlayers is not defined. This is not true, the definition is there. This html can be displayed in a browser, any browser can show it properly.

<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<style Type='text/css'>html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style>
<script Type='text/javascript' src='https://www.openlayers.org/api/OpenLayers.js'></script>
<script Type='text/javascript'> var locations = [    [47.518699645996094,19.121400833129883] ,    [47.518798828125,19.121299743652344] ,    [47.518798828125,19.121400833129883] ,];
function initialize() {
    map = new OpenLayers.Map('map_canvas', { controls: [ new OpenLayers.Control.Navigation() ] });
    map.addLayer(new OpenLayers.Layer.OSM('1','https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png', {numZoomLevels: 19}));
    var fromProjection = new OpenLayers.Projection('EPSG:4326');
    var toProjection   = new OpenLayers.Projection('EPSG:900913');
    var marker_layer = new OpenLayers.Layer.Markers( 'Markers' );
    var start_point = new OpenLayers.Geometry.Point(locations[0][1],locations[0][0]).transform( fromProjection, toProjection);
    var end_point = new OpenLayers.Geometry.Point(locations[0][1],locations[0][0]).transform( fromProjection, toProjection);
    var line_style = new OpenLayers.StyleMap({
        'fillColor':'#FF8C00',
        'strokeWidth':10,
        'strokeDashstyle':'dashdot'
        });
    var vector = new OpenLayers.Layer.Vector('trip', {style: line_style});
    var points = new OpenLayers.Geometry.LineString([start_point,  end_point]);
    for(var i=0;i<locations.length;i++)        {
        points.addPoint(new OpenLayers.Geometry.Point(locations[i][1],locations[i][0]).transform( fromProjection, toProjection));
    }
    var line = new OpenLayers.Feature.Vector(points);
    vector.addFeatures([line]);
    map.addLayers([vector]);
    map.addLayer(marker_layer);
    var    size = new OpenLayers.Size(24,24);
    var    offset = new OpenLayers.Pixel(-(size.w/2), -(size.h));
    var start_icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/marker.png', size, offset);
    var end_icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/marker_green.png', size, offset);
    var end_marker = new OpenLayers.LonLat(locations[0][1],locations[0][0]).transform(fromProjection,toProjection);
    var start_marker = new OpenLayers.LonLat(locations[locations.length-1][1],locations[locations.length-1][0]).transform(fromProjection,toProjection);
    marker_layer.addMarker(new OpenLayers.Marker(start_marker,start_icon));
    marker_layer.addMarker(new OpenLayers.Marker(end_marker,end_icon));
    map.setCenter (end_marker,15);
}
</script>
</head>
<body onload='initialize()'> <div id='map_canvas' style='width:100%; height:100%'>   
</div>
</body>
</html>

And here is my code:

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.   
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main_p")
    
    WebView1.LoadHtml("<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style Type='text/css'>html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script Type='text/javascript' src='https://www.openlayers.org/api/OpenLayers.js'></script><script Type='text/javascript'> var locations = [    [47.518699645996094,19.121400833129883] ,    [47.518798828125,19.121299743652344] ,    [47.518798828125,19.121400833129883] ,];function initialize() {         map = new OpenLayers.Map('map_canvas', { controls: [                   new OpenLayers.Control.Navigation() ]        });        map.addLayer(new OpenLayers.Layer.OSM('1','https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png', {numZoomLevels: 19}));        var fromProjection = new OpenLayers.Projection('EPSG:4326');        var toProjection   = new OpenLayers.Projection('EPSG:900913');        var marker_layer = new OpenLayers.Layer.Markers( 'Markers' );        var start_point = new OpenLayers.Geometry.Point(locations[0][1],locations[0][0]).transform( fromProjection, toProjection);        var end_point = new OpenLayers.Geometry.Point(locations[0][1],locations[0][0]).transform( fromProjection, toProjection);        var line_style = new OpenLayers.StyleMap({                'fillColor':'#FF8C00',                'strokeWidth':10,                'strokeDashstyle':'dashdot'            });        var vector = new OpenLayers.Layer.Vector('trip', {style: line_style});        var points = new OpenLayers.Geometry.LineString([start_point,  end_point]);        for(var i=0;i<locations.length;i++)        {            points.addPoint(new OpenLayers.Geometry.Point(locations[i][1],locations[i][0]).transform( fromProjection, toProjection));        }        var line = new OpenLayers.Feature.Vector(points);        vector.addFeatures([line]);        map.addLayers([vector]);        map.addLayer(marker_layer);        var    size = new OpenLayers.Size(24,24);        var    offset = new OpenLayers.Pixel(-(size.w/2), -(size.h));        var start_icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/marker.png', size, offset);        var end_icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/marker_green.png', size, offset);        var end_marker = new OpenLayers.LonLat(locations[0][1],locations[0][0]).transform(fromProjection,toProjection);        var start_marker = new OpenLayers.LonLat(locations[locations.length-1][1],locations[locations.length-1][0]).transform(fromProjection,toProjection);        marker_layer.addMarker(new OpenLayers.Marker(start_marker,start_icon));        marker_layer.addMarker(new OpenLayers.Marker(end_marker,end_icon));        map.setCenter (end_marker,15);}</script></head><body onload='initialize()'> <div id='map_canvas' style='width:100%; height:100%'></div></body></html>")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Any idea what I might be doing wrong?

 

[JohnC]

Just a quick suggestion...try adding the chromeclient to webview using wve (forum search will show you how)

 

[drgottjr]

what's the problem again?

 

[jefflynn1974]

I'm happy it is working on your device, but it still says the aforementioned error message on mine

 

[jefflynn1974]

Ok, I found the solution. SetApplicationAttribute(android:usesCleartextTraffic, "true") needed in the manifest file. At least on my device (Samsung S9, Android 10).