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
    }
    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" and ol.js & ol.css imported :

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
});

asked 22 Dec '17, 14:08

Bruce%20Swain's gravatar image

Bruce Swain
21113
accept rate: 0%

edited 22 Dec '17, 16:53

Be the first one to answer this question!
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×153
×109
×77
×1

question asked: 22 Dec '17, 14:08

question was seen: 508 times

last updated: 22 Dec '17, 16:53

powered by OSQA