In this article I want to show how to display OpenStreetMap map material in a Xamarin.Android app. OSMSharp is used for this purpose. For those interested in using OpenStreetMap in conjunction with OSMSharp and Xamarin.iOS, be sure to check out my OpenStreetMap within your Xamarin.iOS app article.
To integrate OpenStreetMap with OSMSharp, the following steps are required:
As a bonus, there are the following two items:
OpenStreetMap, or OSM for short, is a project where anyone can collect geographic material about roads, forests, rivers, buildings, etc. and compile it into a map of the world. You can learn more about the project at www.openstreetmap.org.
To follow the steps in the article, you need to create a Xamarin.Android project in Visual Studio. Then, download the libraries placed on bitbucket for this article from the Referenced Assemblies folder and add them to your project as a reference.
You should still be able to build the project. Unfortunately, it no longer worked with the packages available on NuGet.
In order for OSMSharp to display geographic material in the Android app at all, it needs a source to load the small tiles that contain only a section of the map. OSM provides various servers for this purpose. An overview of the available ones can be found at https://wiki.openstreetmap.org/wiki/Tile_servers. Of course you can also run your own tiles server if you want to.
As you can see from the overview, the choice of the tile provider can also determine the display - color, line thickness etc. - of the map. - with the choice of the tile provider. It's best to copy the URL, because we need it in the next step.
A simple OSM map can be implemented with OSMSharp with little code. To do this, we first need a MapView instance. It represents the visible area of the map in our app. Since I want to use the map fully in the app, I directly assign the instance to the activity with SetContentView.
Of course, our MapView also needs a map. So I create an instance of Map and assign it to the MapView.Map property. In order to be able to see something of the map, we need the URI of the previously selected tile provider. We add this to the map instance with the AddLayerTile method. From now on the map takes over all further steps to be able to display map data for example by moving the map.
It is important to mention that Native.Initialize(); must be called before working with OSMSharp.
The OnCreate method now looks like this:
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
try
{
Native.Initialize();
_mapView = new MapView(this, new MapViewSurface(this));
_mapView.MapTilt = 0;
_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 iOS, by using a different tile server as the source for our map, we have a more appealing style for the map on the right.
In the previous step, the map was centered on the Cayas Software headquarters by setting MapCenter. To make it more recognizable it is time to position a marker on the map. OSMSharp provides for markers the MapMarker class for which the following two pieces of information are needed:
With that, the rest is a small piece 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);
}
The pin graphic is simply added to the project in the drawables folder. The result is already impressive.
One of the main reasons I've been playing around with OSMSharp and OpenStreetMap is the ability to use maps in offline scenarios. To be comparable to the iOS article, I'm focusing on MBTiles as the data source.
To allow OSMSharp to use the map section from the mbtiles files, I include them as an asset in the Android project for simplicity's sake. This way, no downloading needs to be implemented. In the app, we need to retrieve a stream to the file and tell the MBTile layer the name of the database. With a few lines of code, this can be implemented as follows:
using (var mapStream = File.OpenRead("./demo_layers.mbtiles"))
{
_mapView.Map.AddLayer(new LayerMBTile(SQLiteConnection.CreateFrom(mapStream, "map")));
}
To make the difference between the online map and the offline map clear, I used the dark coloring. Our result now looks like this when the "Switch to MBTiles" button is pressed:
OpenStreetMap can be integrated into your own Xamarin Android projects with OSMSharp at least as easily as Google Maps, and is easier to adapt to your own ideas thanks to flexible data sources. The demo project and all files can be found on bitbucket.
Voice input makes it possible to intuitively record food eaten and drunk without having to look at a device or tap. Instead of laboriously entering everything by hand, users can simply record their meals and snacks by voice command. This approach can lower the inhibition threshold and encourage users to continuously document their eating habits. This saves time and encourages regular documentation.
Modern applications are becoming more design-centric and therefore end-user-centric. For the user, the technical side of the program is not at all interesting, but rather taken for granted. Attractive design, animation and ease of use, on the contrary, all other things being equal, can make the application more popular among competitors.
With the end of support for Xamarin approaching in May 2024, developers are busy migrating existing Xamarin.Forms projects to .NET MAUI as its successor. So are we, of course. In this article, I'll show 7 steps we've always had to take during the transition to make your upgrade .NET MAUI easier.