Displaying OSM in an android webview with Openlayers3
Good evening everyone,
I am currently trying to display the OSM from Openlayer3 using javascript in an HTML page. As long as I stay on a classic webpage (on local with a tomcat) it work just fine and I display my own datas from a GeoJson file.
Now i want to do the same on an android webview using the same HTML & JS files, exported openlayers.js/css and the html in the assets folder. The problem is the map itself doesn't show, just the controls and copyright at the bottom. I have allowed javascript in my webview as i can execute other function from a JavascriptInterface class.
Is there any restrictions with openlayers/osm and android ?
Note : I am currently restricted to just Openlayers and a webview for this project, so i can't use things like leaflet or any Google API.
My current code is :
public class MapActivity extends AppCompatActivity {
private HashSet<Point> points;
private WebView webView;
private WebSettings wSettings;
private AssetManager assetManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
assetManager = getApplicationContext().getAssets();
try {
InputStream targetStream = assetManager.open("lieuxjson.json");
points = GeoJsonParser.readJsonStream(targetStream);
} catch (java.io.IOException e) {
e.printStackTrace();
//stop activity
}
ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo();
WebView webView = new WebView(this);
webView.setClickable(true);
webView.setFocusableInTouchMode(true);
wSettings = webView.getSettings();
wSettings.setJavaScriptEnabled(true);
WebClientClass webViewClient = new WebClientClass();
webView.setWebViewClient(webViewClient);
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.loadUrl("file:///android_asset/index.html");
setContentView(webView);
}}
And the JS (with a div id="map") :
var world = new ol.layer.Tile({ source: new ol.source.OSM() });
world.setZIndex(0);
var myview = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 3
})
var map = new ol.Map({
target: 'map',
layers: [world],
view: myview
});
var bounds = [205723.7692685683, 3128220.0382689075,
794276.2307314316, 9329005.182357315];
map.getView().fit(bounds, map.getSize());
