In my last post I described how you can use OpenStreetMaps within your Xamarin.iOS app. Please read that article first, if you don't know what OpenStreetMaps is. Today I show you how you can make use of OpenStreetMaps in your Xamarin.Android app.

Presenting an OpenStreetMap

To present an OpenStreetMap in your Xamarin.Android app the same steps are required as for Xamarin.iOS. Therefor create a new Xamarin.Android app and add the references.

Before a map can be presented we need to get a tile-provider. OpenStreetMap provides a small list of tile-servers at their website. Also worth a view http://wiki.openstreetmap.org/wiki/Tileserver.

With the tile-server a map will be initialized within a few lines of code in OnCreate. One thing worth to mention is, that you have to set the MapTilt property. Otherwise you will see a NullReferenceException.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    try
    {
        Native.Initialize();

        _mapView = new MapView(this, new MapViewSurface(this));
        _mapView.MapTilt = 0; // must be set otherwise NullReferenceException
        _mapView.MapCenter = new GeoCoordinate(52.207767, 8.803513);
        _mapView.MapZoom = 12;
        _mapView.Map = new Map();

        _mapLayer = _mapView.Map.AddLayerTile("http://a.tile.openstreetmap.de/tiles/osmde/{0}/{1}/{2}.png");

        SetContentView(_mapView);
    }
    catch(Exception ex)
    {
        Console.WriteLine(ex);
    }
}

The image on the left is the map with the default OpenStreetMap-style. Just like on iOS, by using another tile-server as the source of our map, we got a more appealing style for the map on the right side.

Display Markers with OSMSharp

Initialy we centered the map at the Cayas Software headquarter. Now, with a working map, it is time to add a marker the make it more recognizable. To do so we need two informations:

  • the position where we want to place the marker
  • an image to represent the marker.

With that the rest is a small peace of code:

using (var bitmap = BitmapFactory.DecodeResource(Resources, Resource.Drawable.pin))
{
    var marker = new MapMarker(this, new GeoCoordinate(52.207767, 8.803513), MapMarkerAlignmentType.CenterBottom, bitmap);
    _mapView.AddMarker(marker);
}

Add offline-functionality

As I wrote in the iOS article too, one of the main reasons I played around with OSMSharp and OpenStreetMap are the capability to use maps even in offline-scenarios. To be comparable I focus on MBTiles as data source.

In this article I am going to add my mbtiles-file as an asset to the Android project. That way it is already included and don't need to be downloaded somewhere. In the app we need to get a stream to the file and tell the MBTile-layer the name of the database.

using (var mapStream = File.OpenRead("./demo_layers.mbtiles"))
{
    _mapView.Map.AddLayer(new LayerMBTile(SQLiteConnection.CreateFrom(mapStream, "map")));
}

I used the same style on Android as on iOS to make the difference between my online-map and the offline-map obvious. Our result looks now like the following if the "Switch to MBTiles" button is pressed:

You can find the demo project and all files on bitbucket. If liked the article or have any questions write a comment.

comments powered by Disqus