How to create a route from pins in Xamarin.forms? - xamarin.forms

Question

Using xamarin I would like to add a few pins to map to make a route.
My API for adding pins:
{"Id":1,"X":1.0,"Y":2.0,"RouteId":1,"Route":null}
My API for adding routes:
{"Id":1,"Name":"dd","Description":"fff"}
"RouteId:1" is associated with "Id:1"
I would like to create a route by pressing the button(OnNewRouteClicked)
My code:
public partial class CreatorPage : ContentPage
{
private CustomPin pin;
public CreatorPage()
{
InitializeComponent();
customMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(53.010281, 18.604922), Distance.FromMiles(1.0)));
}
private void OnClearClicked(object sender, EventArgs e)
{
customMap.Pins.Clear();
customMap.MapElements.Clear();
}
private async void OnMapClicked(object sender, MapClickedEventArgs e)
{
if (String.IsNullOrWhiteSpace(nazwaEntry.Text))
{
await DisplayAlert("Błąd", "Podaj nazwę punktu", "Ok");
return;
}
CustomPin pin = new CustomPin
{
Type = PinType.SavedPin,
Position = new Position(e.Position.Latitude, e.Position.Longitude),
Label = nazwaEntry.Text,
Address = opisEntry.Text,
Name = "Xamarin",
Url = "http://xamarin.com/about/",
Question = zagadkaEntry.Text,
Answer = odpowiedzEntry.Text
};
pin.MarkerClicked += async (s, args) =>
{
args.HideInfoWindow = true;
string pinName = ((CustomPin)s).Label;
// string pytanie = ((CustomPin)s).Question;
string opis = ((CustomPin)s).Address;
// string odpowiedz = ((CustomPin)s).Answer;
await DisplayAlert($"{pinName}", $"{opis}", "Quiz");
// await DisplayAlert("Quiz", $"{pytanie}", "Przejdź do odpowiedzi");
await Navigation.PushAsync(new QuestionPage(new Question()));
};
customMap.CustomPins = new List<CustomPin> { pin };
customMap.Pins.Add(pin);
var json = JsonConvert.SerializeObject(new { X = pin.Position.Latitude, Y = pin.Position.Longitude });
var content = new StringContent(json, Encoding.UTF8, "application/json");
HttpClient client = new HttpClient();
var result = await client.PostAsync("URL to points", content);
if (result.StatusCode == HttpStatusCode.Created)
{
await DisplayAlert("Komunikat", "Dodanie puntku przebiegło pomyślnie", "Anuluj");
}
}
private void OnNewRouteClicked(object sender, EventArgs e)
{
}
}

Answer 1

I wrote an example and hope it will help you. In the OnNewRouteClicked method, get all the points which routeId = 1 and draw a polyline with them:
public partial class MainPage : ContentPage
{
List<Points> myPoints { get; set; }
Routes myRoute { get; set; }
public MainPage()
{
InitializeComponent();
//Some data you get from your apis
myRoute = new Routes() { Id = 1 };
myPoints = new List<Points>();
myPoints.Add(new Points() { Id = 1, X = 55.6666, Y = 66.4444, RouteId = 1 }); ;
myPoints.Add(new Points() { Id = 2, X = 52.6666, Y = 68.4444, RouteId = 1 }); ;
myPoints.Add(new Points() { Id = 3, X = 53.6666, Y = 62.4444, RouteId = 1 }); ;
myPoints.Add(new Points() { Id = 1, X = 55.6666, Y = 61.4444, RouteId = 2 }); ;
myPoints.Add(new Points() { Id = 2, X = 51.6666, Y = 65.4444, RouteId = 2 }); ;
myPoints.Add(new Points() { Id = 4, X = 54.6666, Y = 67.4444, RouteId = 1 }); ;
myPoints.Add(new Points() { Id = 5, X = 59.6666, Y = 69.4444, RouteId = 1 }); ;
}
private void OnNewRouteClicked(object sender, EventArgs e)
{
List<Position> positions = new List<Position>();
//Get all the points which RouteId = 1
foreach (var item in myPoints)
{
Points tempPoint = item as Points;
if (tempPoint.RouteId == myRoute.Id)
{
Position tempPosition = new Position(tempPoint.X,tempPoint.Y);
positions.Add(tempPosition);
}
}
//your map
Map map = new Map
{
// ...
};
// instantiate a polyline
Polyline polyline = new Polyline
{
StrokeColor = Color.Blue,
StrokeWidth = 12,
};
//add your positions to polyline.Geopath
foreach (var item in positions)
{
polyline.Geopath.Add(item);
}
// add the polyline to the map's MapElements collection
map.MapElements.Add(polyline);
}
}
public class Routes
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
public class Points
{
public int Id { get; set; }
public double X { get; set; }
public double Y { get; set; }
public int RouteId { get; set; }
}