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

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" />

Answer 2

The code given above is right but there is two errors: it miss a closing bracket at the end of the program (Activity) and you need to add some permissions (by using <uses-permission..../>) in your AndroidManifest:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
After that, you have your map on your screen!