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.
And here is my code:
Any idea what I might be doing wrong?
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 SubAny idea what I might be doing wrong?
