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.

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

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