Community

Topic: Xamarin component

Change marker and show distance to marker

Sergio Serrano Hernández
Tuesday, November 21, 2017

Good morning, I need help with 2 specific things.
The first is that I have 4 different types of markers and I need to show the images of the marker according to the corresponding one.
I need to show the distance to the marker and they only appear in a range of 1km. I was seeing a comment asking for the same, but the example did not work for me because it was not for Xamarin.
I am using the latest version of the Xamarin component, developing for Android and IOS.
Beforehand thank you very much.

user profile image
Support Team  (expert)
Monday, November 27, 2017

Hi,
you can use the third parameter of the GeoElement constructor to define a "category". In your custom MarkerViewAdapter you can check the category to change the icon.
For example in android:

protected override void OnCreate(Bundle bundle)

{
...
MyMarkerViewAdapter arMyMarkerViewAdapter = new MyMarkerViewAdapter(this, 51, 73);
MyMarkerViewAdapter mapMyMarkerViewAdapter = new MyMarkerViewAdapter(this, 30, 43);

InitGeoFragment(arMyMarkerViewAdapter, mapMyMarkerViewAdapter);

List<GeoElement> geoElementList = new List<GeoElement>();
geoElementList.Add(new GeoElement(loc1, "1", "category_one"));
geoElementList.Add(new GeoElement(loc2, "2", "category_one"));
geoElementList.Add(new GeoElement(loc3, "3", "category_two"));
geoElementList.Add(new GeoElement(loc4, "4", "category_two"));
geoElementList.Add(new GeoElement(loc5, "5", "category_three"));
geoElementList.Add(new GeoElement(loc6, "6", "category_three"));
geoElementList.Add(new GeoElement(loc7, "7", "category_four"));
geoElementList.Add(new GeoElement(loc8, "8", "category_four"));
SetGeoElements(geoElementList);
...
}

private class MyMarkerViewAdapter : MarkerViewAdapter
{
public MyMarkerViewAdapter(Context context, int width, int height) : base(context, width, height)
{
}

public override View GetView(GeoElement p0)
{
ImageView imageView = (ImageView)MarkerView.FindViewById(Resource.Id.image);
if (p0.Name.Equals("category_one"))
imageView.SetImageResource(Resource.Drawable.your_first_icon);
else if (p0.Name.Equals("category_two"))
imageView.SetImageResource(Resource.Drawable.your_second_icon);
else if (p0.Name.Equals("category_three"))
imageView.SetImageResource(Resource.Drawable.your_third_icon);
else if (p0.Name.Equals("category_four"))
imageView.SetImageResource(Resource.Drawable.your_fourth_icon);
imageView.Invalidate();
return MarkerView;
}

public override View GetSelectedView(GeoElement p0)
{
ImageView imageView = (ImageView)MarkerView.FindViewById(Resource.Id.image);
if (p0.Name.Equals("category_one"))
imageView.SetImageResource(Resource.Drawable.your_first_icon);
else if (p0.Name.Equals("category_two"))
imageView.SetImageResource(Resource.Drawable.your_second_icon);
else if (p0.Name.Equals("category_three"))
imageView.SetImageResource(Resource.Drawable.your_third_icon);
else if (p0.Name.Equals("category_four"))
imageView.SetImageResource(Resource.Drawable.your_fourth_icon);
imageView.Invalidate();
return MarkerView;
}
}
then to show the markers within a certain radius you can use the OnGeoLocationChanged callback calculating the distance from the input location:
public override void OnGeolocationChanged(Location p0)

{
float distanceInMeters = p0.DistanceTo(mLocation1);
...
}
You can also change the position update parameters
SetLocationUpdateParameters(long minTime, float minDistance);

Best,

Sign in to add a comment