Android Question WebWiev Javascript problem

jefflynn1974

Member
Licensed User
Longtime User
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.

Html for Openstreetmap:
<!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:
B4X:
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?
 

Attachments

  • wwtest_bad.zip
    76.9 KB · Views: 162

JohnC

Expert
Licensed User
Longtime User
Just a quick suggestion...try adding the chromeclient to webview using wve (forum search will show you how)
 
Upvote 0

drgottjr

Expert
Licensed User
Longtime User
what's the problem again?
 

Attachments

  • 1.png
    1.png
    162.3 KB · Views: 165
Upvote 0

jefflynn1974

Member
Licensed User
Longtime User
I'm happy it is working on your device, but it still says the aforementioned error message on mine :)

b4awebwiev.png
 
Last edited:
Upvote 0

jefflynn1974

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

Similar Threads

D
  • Question
Android Question 2x user error report
Replies
5
Views
3K
Deleted member 103
D
Top