Using Mapbox in Xamarin.iOS

There’s nothing much to specify about the famous Mapbox frameworks, so in this article, I’ll only introduce our open-source project: Xamarin binding library for Mapbox iOS SDK.

Installation

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

If you haven’t acquired an access token for Mapbox, you can create a free account and grab a token to insert into your info.plist file. Or if you preferer adding via code or changing it later, you may use:

MGLAccountManager.AccessToken = "<Your Mapbox access token>";

Note: From version 4.0.2, please add

--registrar:static

into “Additional mtouch arguments” for iOS build when running on simulators.

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#. For example:

var mapView = new MGLMapView(
   View.Bounds,
   new NSUrl(“mapbox://styles/naxamtest/cj5kin5x21li42soxdx3mb1yt”)
 );

(Without passing a style’s url, Mapbox will load their default style: Light Street)

Update map’s center & zoom level:

mapView.SetCenterCoordinate(new CLLocationCoordinate2D(21.028511, 105.804817), 11, false);

Adding annotations

Adding point annotation(s)

var temple = new MGLPointAnnotation()
{
    Title = "Temple of literature",
    Subtitle = "Van Mieu - Quoc Tu Giam",
    Coordinate = new CLLocationCoordinate2D(21.0276, 105.8355)
};
mapView.AddAnnotation(temple);

If you want to show a callout view when the annotation is tapped, you’ll need to implement IMGLMapViewDelegate:

mapView.WeakDelegate = this;
...
[Export("mapView:annotationCanShowCallout:")]
public bool MapView_AnnotationCanShowCallout(MGLMapView mapView, IMGLAnnotation annotation)
{
     return true;
}

The default pin image looks boring? Let’s add an image for it:

[Export("mapView:imageForAnnotation:")]
public MGLAnnotationImage MapView_ImageForAnnotation(MGLMapView mapView, IMGLAnnotation annotation)
{
     var annotationImage = mapView.DequeueReusableAnnotationImageWithIdentifier("temple");
     if (annotationImage == null) {
         var image = new UIImage("temple");
         image = image.ImageWithAlignmentRectInsets(new UIEdgeInsets(0, 0, image.Size.Height / 2, 0));
         annotationImage = MGLAnnotationImage.AnnotationImageWithImage(image, "temple");
     }
     return annotationImage;
}

Voilà

(Thank Icons8 for this cute icon)

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.

var coordinates = new CLLocationCoordinate2D[] {
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude + 0.03, longitude: mapView.CenterCoordinate.Longitude - 0.02),
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude + 0.02, longitude: mapView.CenterCoordinate.Longitude - 0.03),
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude, longitude: mapView.CenterCoordinate.Longitude - 0.02),
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude - 0.01, longitude: mapView.CenterCoordinate.Longitude),
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude - 0.04, longitude: mapView.CenterCoordinate.Longitude + 0.01),
      new CLLocationCoordinate2D(latitude: mapView.CenterCoordinate.Latitude - 0.04, longitude: mapView.CenterCoordinate.Longitude + 0.04)
 };
var polyline = MGLPolyline.PolylineWithCoordinates(ref coordinates[0], (nuint)coordinates.Length);
mapView.AddAnnotation(polyline);

Some customization using the delegate functions:

[Export("mapView:strokeColorForShapeAnnotation:")]
public UIColor MapView_StrokeColorForShapeAnnotation(MGLMapView mapView, MGLShape annotation)
{
     return UIColor.Blue;
}
 
[Export("mapView:lineWidthForPolylineAnnotation:")]
public nfloat MapView_LineWidthForPolylineAnnotation(MGLMapView mapView, MGLPolyline annotation)
{
     return 2.0f;
}

Wrap-ups

This article covers basic functions of Naxam’s binding library for Mapbox iOS SDK: displaying a map with custom style and adding annotations on an iOS 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!