0

i am facing the issue that my leaflet map doesnt shop up in android webview. In android chrome client it seems ok, but in webview its gray. Console is giving no error. Anybody has any thoughts? I try to change HTTP to HTTPS in nominatim url, but no effect.

My JS:

$("#shopMap").empty();
    $( '#shopMap' ).html( ' ' ).append( '<div id="map" style="height: 250px; width: 100%;"></div>' );

    console.log(adress);
    console.log(city);
    var lat;
    var lon;
    $.getJSON('https://nominatim.openstreetmap.org/search.php?q=' + adress + '+'+ city+'&format=jsonv2', function(data) {
        lat = data[0]['lat'];
        lon = data[0]['lon'];

        $("#shopLon").val(lon);
        $("#shopLat").val(lat);

        console.log("Lat:" + lat + " Lon:" + lon);
        let mapOptions = {
            center: [lat, lon],
            zoom: 16
        }

        var container = L.DomUtil.get('map');
        if(container != null){
        container._leaflet_id = null;
        }

        map = new L.map('map', mapOptions);
    
        let layer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        window.dispatchEvent(new Event('resize'));  

        map.addLayer(layer);

        let marker = new L.Marker([lat, lon]);
        marker.addTo(map);
        window.dispatchEvent(new Event('resize')); //hotfix na mapu
        //map.setView([lat, lon], 16);
        $('.leaflet-control-attribution').hide();
        $('.leaflet-control-zoom').hide();
        setTimeout(() => { 
            map.invalidateSize(true); 
        }, 400); 
    });

I also enabled javascript in my webview, everything seems to be fine, but no result. My java code:

@SuppressLint("SetJavaScriptEnabled")
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    userAgent = System.getProperty("http.agent");

    mWebView = findViewById(R.id.activity_main_webview);
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);

    webSettings.setUseWideViewPort(true);
    webSettings.setAppCacheEnabled(false);

    webSettings.setAllowFileAccess(true);
    webSettings.setAllowFileAccessFromFileURLs(true);
    webSettings.setAllowUniversalAccessFromFileURLs(true);

    webSettings.setUserAgentString(userAgent+ "com.exampl.com");
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    webSettings.setSupportMultipleWindows(true);


    mWebView.clearCache(true);
    // REMOTE RESOURCE
    mWebView.loadUrl("https://exampl.com/web2/1/");
    mWebView.setWebChromeClient(new CustomChromeClient(){
        @Override
        public void onReceivedSslError(WebView view, SslErrorHandler
                handler, SslError error)
        {
            handler.proceed();
        }
    });
    mWebView.setBackgroundColor(Color.TRANSPARENT);

    contextPop = this.getApplicationContext();

    // LOCAL RESOURCE
    // mWebView.loadUrl("file:///android_asset/index.html");
}
Dan Rais
  • 159
  • 2
  • 10
  • Does the rest of Leaflet map UI show up? (Zoom control buttons, attribution) Does a plain image from the tile server show up? E.g. `` – ghybs Mar 02 '22 at 04:20
  • It can happen that android blocks the requests if the Certifacte is unknown. Try to config `network-security-config`: https://stackoverflow.com/q/53984725/8283938 – Falke Design Mar 02 '22 at 06:47
  • Possible duplicate of https://stackoverflow.com/questions/19564366/unwanted-gray-area-on-map or https://stackoverflow.com/questions/56330868/leaflet-map-not-showing-on-android – IvanSanchez Mar 02 '22 at 08:02

0 Answers0