How to remove polyline from the map on button click in Xamarin.Forms

Question

I am using CustomMapRenderer.cs and ExtendedMap.cs to draw polylines on the map with the tap (touch event).

ExtendedMap.cs is in the MapTap (Portable) project while the CustomMapRenderer.cs is in MapTap.Android project in the Visual Studio 2015 solution.

CustomMapRenderer.cs

using System.Collections.Generic;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using MapTap;
using MapTap.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Maps.Android;
using System;

[assembly: ExportRenderer(typeof(ExtendedMap), typeof(CustomMapRenderer))]
[assembly: Dependency(typeof(CustomMapRenderer))]

namespace MapTap.Droid
{
    public class CustomMapRenderer : MapRenderer, IOnMapReadyCallback,ClearPolyline
    {
        GoogleMap map;
        List<LatLng> polygontest = new List<LatLng>();

        public CustomMapRenderer()
        {
        }

        protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
        {          
            if (map != null)
                map.MapClick -= googleMap_MapClick;
            base.OnElementChanged(e);
            if (Control != null)
                ((MapView)Control).GetMapAsync(this);
        }

        public void OnMapReady(GoogleMap googleMap)
        {
            map = googleMap;
            if (map != null)
                map.MapClick += googleMap_MapClick; ;
        }

        private void googleMap_MapClick(object sender, GoogleMap.MapClickEventArgs e)
        {
            polygontest.Add(new LatLng(e.Point.Latitude, e.Point.Longitude));
            ((ExtendedMap)Element).OnTap(new Position(e.Point.Latitude, e.Point.Longitude));           

            if (polygontest.Count >1 )
            {
                AddPolygons();               
            }
        }
        public void Clearline()
        {
           map.Clear();
        }

        void AddPolygons()
        {
           var polygonOptions = new PolylineOptions();

            polygonOptions.InvokeColor(0x66FF0000);

            foreach (var position in polygontest)
            {
                polygonOptions.Add(new LatLng(position.Latitude, position.Longitude));
            }

            map.AddPolyline(polygonOptions);
            polygontest.RemoveAt(0);
        }   
    }
}

ExtendedMap.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms.Maps;
using Xamarin.Forms.Maps.Android;
using Android.Gms.Maps;
using Android.Gms.Maps.Model;
using Xamarin.Forms;

namespace MapTap
{   
    public class ExtendedMap : Map
    {
        public event EventHandler<TapEventArgs> Tap;
        public ExtendedMap()
        {            
        }

        public ExtendedMap(MapSpan region) : base(region)
        {
        }

        public void OnTap(Position coordinate)
        {
            OnTap(new TapEventArgs { Position = coordinate });

            var lat = coordinate.Latitude;
            var lng = coordinate.Longitude;

            putpinonclick(lat,lng);
        }

        public void putpinonclick(double lat, double lng)
        {
            var pin = new Pin
            {
                Type = PinType.SavedPin,
                Position = new Position(lat, lng),
                Label = "Xamarin San Francisco Office",
                Address = "394 Pacific Ave, San Francisco CA"
            };

            this.Pins.Add(pin);           
        }

        protected virtual void OnTap(TapEventArgs e)
        {
            var handler = Tap;
            if (handler != null) handler(this, e);
        }
    }

    public class TapEventArgs : EventArgs
    {
        public Position Position { get; set; }
    }
}

I want to clear polylines on button click (Clear Button) from the MainPage.xaml .

Following is a screenshot of the running application: Screenshot

I am calling a function of CustomMapRendrer.cs from MainPage.Xaml.cs using

 var test = DependencyService.Get<ClearPolyline>();
                test.Clearline();

ClearPolyLine is an interface and Clearline in the function of interface which is implemented in CustomMapRender

The problem is that when I call the above line of code, the variable test itself is not null , but all of its member variables (implemented in CustomMapRenderer ) are null. test is of type ClearPolyline .

How to resolve this issue?

Answer 1

PolyLine addedLine = map.AddPolyline(polygonOptions); This should return the added PolyLine so store this Ployline(s) in a property or collection. On button click or command disturb RemovePolyline property (Custom bindable property) of the ExtendedMap and listen to the property changes in the extended renderer and based on the value call addedLine.remove(); or loop in the collection of polylines and remove it.