Using Mapbox in Xamarin.Android

There’s nothing much to specify about the famous Mapbox frameworks, so in this article, I’ll only introduce our open-source project: https://github.com/NAXAM/mapbox-android-binding

Installation

You can either add the nuget package Naxam.Mapbox.Droid or pull the project from GitHub and add reference to it.

Mapbox requires ACCESS_FINE_LOCATION permission.

Sign in to your Mapbox account to display your access token. Use that access token and go next step.

Adding a map

This step is quite straightforward since you can just follow Mapbox’s official tutorials with a just little tweak of code for C#.

Step 1:

Add following code into the first onCreate function of MainActivity.

Com.Mapbox.Mapboxsdk.Mapbox.GetInstance(this,“YOUR_ACCESS_TOKEN”);

Step 2:
in res > layout > activity_main.xml, add the following code to declare your layout.

<com.mapbox.mapboxsdk.maps.MapView
      android:id="@+id/mapView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:mapbox_cameraTargetLat="40.73581"
      app:mapbox_cameraTargetLng="-73.99155"
      app:mapbox_cameraZoom="11" />

Step 3:

On your Activity, create a MapView and linked it with id mapView. Override OnCreate, OnStart, OnResum, OnPause, OnStop, OnLowMemory, OnDestroy, OnSaveInstanceState same as following code:

public class MainActivity : AppCompatActivity
{
MapView mapView;
protected override void OnCreate(Bundle bundle)
{
      base.OnCreate(bundle);
      MapboxAccountManager.GetInstance(this,"YOUR_ACCESS_TOKEN");
      SetContentView(Resource.Layout.Main);
      mapView = FindViewById<MapView>(Resource.Id.mapView);
      mapView.OnCreate(bundle);
}
protected override void OnStart()
{
      base.OnStart();
      mapView.OnStart();
}
protected override void OnResume()
{
      base.OnResume();
      mapView.OnResume();
}
protected override void OnPause()
{
      mapView.OnPause();
      base.OnPause();
}
protected override void OnSaveInstanceState(Bundle outState)
{
      base.OnSaveInstanceState(outState);
      mapView.OnSaveInstanceState(outState);
}
protected override void OnStop()
{
      base.OnStop();
      mapView.OnStop();
}
protected override void OnDestroy()
{
      mapView.OnDestroy();
      base.OnDestroy();
}
public override void OnLowMemory()
{
      base.OnLowMemory();
      mapView.OnLowMemory();
}
}

If you use Mapbox on fragment, change OnDestroy() to OnDestroyView()

public override void OnDestroyView()
{
     mapView.OnDestroy();
     base.OnDestroyView();
}

Congratulations! It works.

Adding maker

Implement IOnMapReadyCallback

class OnMapReadyCallback : Java.Lang.Object, IOnMapReadyCallback
{
    public Action<MapboxMap> MapReady { get; set; }
    public OnMapReadyCallback(Action<MapboxMap> MapReady)
    {
        this.MapReady = MapReady;
    }
    public void OnMapReady(MapboxMap p0)
    {
        MapReady?.Invoke(p0);
    }
}

and do same as bellowing code

protected override void OnCreate(Bundle bundle)
{
      base.OnCreate(bundle);
      MapboxAccountManager.GetInstance(this,"YOUR_ACCESS_TOKEN");
      SetContentView(Resource.Layout.Main);
      mapView = FindViewById<MapView>(Resource.Id.mapView);
      mapView.OnCreate(bundle);
      mapView.GetMapAsync(new OnMapReadyCallback
      (
            (mapBox) =>
            {
             MarkerOptions marker = new MarkerOptions();
             marker.SetPosition(new LatLng(21.0276, 105.8355));
             marker.SetTitle("Xin Chao");
             marker.SetSnippet("Well come to ViewNam");
             mapBox.AddMarker(marker);
             }
      ));
}

Change default pin image:

Add image pin.png to drawable folder. When add maker, we will set icon for maker.

MarkerOptions marker = new MarkerOptions();
marker.SetPosition(new LatLng(21.0276, 105.8355));
IconFactory iconFactory = IconFactory.GetInstance(this);
Icon icon = iconFactory.FromResource(Resource.Drawable.pin);
marker.SetIcon(icon);
marker.SetTitle("Xin Chao");
marker.SetSnippet("Well come to ViewNam");
mapBox.AddMarker(marker);

Adding polylines

Of course a polyline is made up of a group of coordinates. Just make sure to pass only the reference to the first coordinate and the number of them when initialize a new polyline.

Try create polyline connect two point:

PolylineOptions polyline = new PolylineOptions();
polyline.Add(new LatLng(21.0276, 105.8355));
polyline.Add(new LatLng(21.0300, 105.8455));
polyline.InvokeWidth(2);
polyline.InvokeColor(Color.Red);
mapBox.AddPolyline(polyline);

tadaaaaa…..!!!

Wrap-ups

This article covers basic functions of Naxam’s binding library for Mapbox Android SDK: displaying a map with custom style and adding annotations on an Android device.

For more information, please refer to Mapbox’s documentations.

If you have questions or issues, please reach to us in GitHub. Any contribution is welcome!

NAXAM - A Mobile Development Company