Load a Local OpenLayers Vehicle Navigation Page in Android WebView with JS & Zoom

The article demonstrates how to integrate an OpenLayers HTML page that displays a vehicle navigation map with image rotation into an Android application using a WebView component.

Layout Setup

First, create a new Android project and add a <WebView> widget to the activity layout, assigning it an android:id of @+id/webview. The layout XML snippet is:

<WebView
    android:id="@+id/webview"
    android:layout_width="409dp"
    android:layout_height="729dp"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="1dp"
    tools:ignore="MissingConstraints" />

Asset Preparation

Next, create an assets directory under src/main and copy the entire OpenLayers project—including offLineTileMap.html, JavaScript files, and related resources—into this folder.

WebView Configuration in Code

In MainActivity ’s onCreate method, obtain the WebView instance, set a WebChromeClient (required for JavaScript execution), enable JavaScript and zoom support, and finally load the local HTML file.

//获取webview
WebView webView = findViewById(R.id.webview);
//设置为ChromeClient 才能执行js代码
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);

//设置开启js支持
webView.getSettings().setJavaScriptEnabled(true);
// 是否支持缩放
webView.getSettings().setSupportZoom(true);

//加载本地html
webView.loadUrl("file:///android_asset/offLineTileMap.html");

Full Activity Source

package com.badao.webviewdemo;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取webview
        WebView webView = findViewById(R.id.webview);
        //设置为ChromeClient 才能执行js代码
        WebChromeClient webChromeClient = new WebChromeClient();
        webView.setWebChromeClient(webChromeClient);
        //设置开启js支持
        webView.getSettings().setJavaScriptEnabled(true);
        // 是否支持缩放
        webView.getSettings().setSupportZoom(true);
        //加载本地html
        webView.loadUrl("file:///android_asset/offLineTileMap.html");
    }
}

Result

Running the application displays the vehicle navigation map with rotation, as shown in the included GIF, confirming that the local OpenLayers page is correctly rendered with JavaScript and zoom functionality.