How to implement a Map in android studio with Leaflet and OpenStreetMap?

Question

I am new to android. I am trying to develop a small app for loading a map with markers in android studio using leaflet and openstreetmap. I have read the article in this link https://asmaloney.com/2014/01/code/creating-an-interactive-map-with-leaflet-and-openstreetmap/#comment-10133 where author explains how to load the map using leaflet and openstreetmap in JavaScript. But I am trying to implement it completely in java in android studio. Is there any source code available for it to start with?

Leaflet is a free library and it helps to load more data on the map. I have implemented the google map in Android studio using Google Api. Also I have tried openstreetmap alone for loading map. Here is my java file.

package com.example.myapplication;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.preference.PreferenceManager;

import org.osmdroid.api.IMapController;
import org.osmdroid.config.Configuration;
import org.osmdroid.tileprovider.tilesource.TileSourceFactory;
import org.osmdroid.util.GeoPoint;
import org.osmdroid.views.MapView;
import org.osmdroid.views.overlay.ScaleBarOverlay;

public class MainActivity extends Activity {
    private MapView map;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //initialise osmdroid configuration
        Context ctx = getApplicationContext();
        Configuration.getInstance().load(ctx, 
PreferenceManager.getDefaultSharedPreferences(ctx));

Configuration.getInstance().setUserAgentValue(BuildConfig.APPLICATION_ID);
        setContentView(R.layout.activity_main);
        map = (MapView) findViewById(R.id.map);
        map.setMultiTouchControls(true);
        map.setBuiltInZoomControls(true);
        IMapController mapController = map.getController();

        mapController.setZoom(14);
        mapController.setCenter(new GeoPoint(48.745, -3.455));
        ScaleBarOverlay scala = new ScaleBarOverlay(map);
        map.getOverlays().add(scala);
        map.invalidate();
    }


    public void onResume() {
        super.onResume();
        map.onResume(); //needed for compass, my location overlays, v6.0.0 
and up
    }

    public void onPause() {
        super.onPause();
        //this will refresh the osmdroid configuration on resuming.
        //if you make changes to the configuration, use
        //SharedPreferences prefs = 
PreferenceManager.getDefaultSharedPreferences(this);
        //Configuration.getInstance().save(this, prefs);
        map.onPause();  //needed for compass, my location overlays, v6.0.0 
and up
    }
}

XML file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<org.osmdroid.views.MapView
    android:id="@+id/map"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
</LinearLayout>

I expect a sample source code to understand how to start with leaflet and openstreetmap for implementing the map on android studio.

Answer 1

Use OSMdroid. I have a good experience with it. Works natively.

Here, I made you some code. In your Java:

import android.content.Context;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import org.osmdroid.api.IMapController;
import org.osmdroid.config.Configuration;
import org.osmdroid.tileprovider.tilesource.OnlineTileSourceBase;
import org.osmdroid.util.GeoPoint;
import org.osmdroid.util.MapTileIndex;
import org.osmdroid.views.MapView;
import org.osmdroid.views.overlay.Marker;

public class tester extends AppCompatActivity {
    MapView map;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tester);
        Context ctx = getApplicationContext();
        Configuration.getInstance().load(ctx, PreferenceManager.getDefaultSharedPreferences(ctx));
        map = (MapView) findViewById(R.id.map);
        map.getTileProvider().clearTileCache();
        Configuration.getInstance().setCacheMapTileCount((short)12);
        Configuration.getInstance().setCacheMapTileOvershoot((short)12);
        // Create a custom tile source
        map.setTileSource(new OnlineTileSourceBase("", 1, 20, 512, ".png",
                new String[] { "https://a.tile.openstreetmap.org/" }) {
            @Override
            public String getTileURLString(long pMapTileIndex) {
                return getBaseUrl()
                        + MapTileIndex.getZoom(pMapTileIndex)
                        + "/" + MapTileIndex.getX(pMapTileIndex)
                        + "/" + MapTileIndex.getY(pMapTileIndex)
                        + mImageFilenameEnding;
            }
        });

        map.setMultiTouchControls(true);
        IMapController mapController = map.getController();
        GeoPoint startPoint;
        startPoint = new GeoPoint(51.0, 4.0);
        mapController.setZoom(11.0);
        mapController.setCenter(startPoint);
        final Context context = this;
        map.invalidate();
        createmarker();
    }

    public void createmarker(){
        if(map == null) {
            return;
        }

        Marker my_marker = new Marker(map);
        my_marker.setPosition(new GeoPoint(4.1,51.1));
        my_marker.setAnchor(Marker.ANCHOR_CENTER, Marker.ANCHOR_BOTTOM);
        my_marker.setTitle("Give it a title");
        my_marker.setPanToView(true);
        map.getOverlays().add(my_marker);
        map.invalidate();
    }

In your build.gradle (app): Add this to your dependencies

implementation 'org.osmdroid:osmdroid-android:6.0.3'

And your layoutfile:

<org.osmdroid.views.MapView android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />