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 FeatureThis 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.
{
//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);
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)You shoud see something like this:
{
if (await this.DisplayAlert(
"You have clicked " + feature,
"Do you want to see details?",
"Yes",
"No"))
{
Debug.WriteLine("User clicked OK");
}
}
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
