Open Street Map in Xamarin Forms

I’m not fan of mobile development, but I can’t live witchout my smartfone. Why I’m not fan of mobile development? Because a year or two ago I have tryied to learn java development on Android platform. I have take course on Coursera. I have passed first two courses for mobile development but I didn’t liked Android architecture. For me it was another “.net web forms” development style.

But now many things have changed. Now, we have new Xmarin platform, that ofers us two types of develompent:

a) native -> for those, who like native development in Android or iPhone (not me) but written in C#

b) forms -> .net abstraction based on XAML and MVVM architecture (like in WPF).

To not have to simple task I have decided to make something more complicated than 95% web tutorials. My choise is to use some advanced functions, but not “native supported”. My choice was to use “Open Street Map” in Xamarin Forms.

There is a Open Street Map library for Android. But there are only few information how to use them in Xamarin Forms. The best simple solution for start that I found was: https://development-blog.eu/an-own-map-with-mapsui-in-xamarin-forms-entwurf/

I decided to make some upgrades of this solution :D

I hope you will like it :)

First: Make some user friendly modification of existing code:

unload UWP project (who use windows phone nowdays anyway?? ;-)))
set Compile using Android Version (Target framework) to Android 6.0 -> My smartphone have Android 6.0 and I like to check this app on real phone

Second: Set starting location:

This is just a few lines of codes in MainPage.xaml.cs file:

//add this using

using Mapsui.Projection;

//add this code inside public MainPage() constructor

var centerOfWarsaw = new Point(21.107886, 52.2127475);

// OSM uses spherical mercator coordinates. So transform the lon lat coordinates to spherical mercator

var sphericalMercatorCoordinate = SphericalMercator.FromLonLat(centerOfWarsaw.X, centerOfWarsaw.Y);

// Set the center of the viewport to the coordinate. The UI will refresh automatically

mapControl.NativeMap.NavigateTo(sphericalMercatorCoordinate);

// Additionally you might want to set the resolution, this could depend on your specific purpose

mapControl.NativeMap.NavigateTo(mapControl.NativeMap.Resolutions[9]);

What is worth to mention is convertion from google maps standard of geolocalisation EPSG:4326 to Open Street Map geolocalisation standard EPSG:3857

Third: Add another shape:

This is just adding another shape:

var feature2 = new Feature

{

//warsaw

Geometry = new Polygon(new LinearRing(new[]

{

SphericalMercator.FromLonLat(21.074181, 52.277191),

SphericalMercator.FromLonLat(21.057358, 52.210131),

SphericalMercator.FromLonLat(20.981483, 52.238944),

SphericalMercator.FromLonLat(21.074181, 52.277191),

})

),

[“Label”] = “Warsaw”,

[“Type”] = “My Feature Type”

};

features.Add(feature2);

This code is just “copy->pase” previus code. New thing is that I named Label “Warsaw” (and previus label is now kwnown as “West Germany”) and points localisation is in EPSG:4326.

Inside mapControl.NativeMap.Info += (sender, args) => code block of MainPage() constructor check if featureLabel is not null:

if (!string.IsNullOrWhiteSpace(featureLabel))

{

ShowPopup(featureLabel, featureType);

}

and execute method:

async void ShowPopup(string feature, string type)

{

if (await this.DisplayAlert(

“You have clicked ” + feature,

“Do you want to see details?”,

“Yes”,

“No”))

{

Debug.WriteLine(“User clicked OK”);

}

}

You shoud see something like this:

Final code for this app you will find on my github profile: link to code

References:

Base project, that I have upgraded

Xamarin forms official page

openstreetmap.org

http://epsg.io -> map, that you can switch many epsg formats

**First: Make some user friendly modification of existing code: **

Second: Set starting location:

Third: Add another shape:

Finaly: Show native popup when user click’s on shape

First: Make some user friendly modification of existing code: