Xamarin Custom Map Pin Renderers

Question

Firstly I would like to disclose that I am a new developer and just starting out coding with Xamarin and C sharp.

Ok. So I am creating a custom renderer for the map pin in my application. I have been using the following sample code found here: https://github.com/xamarin/xamarin-forms-samples/tree/master/CustomRenderers/Map/Pin

As it currently stands I am trying to set the popup on the pins so that when I click on them they will either go to a page in the app or possibly have a popup come up with more details on that specific pin location. Currently when I click on the pin popup it takes me to a website.

Here is a screen shot of the app: enter image description here

I have been looking at this code and Im trying to figure out if it would be possible to change the URL to a local page?

  InitializeComponent();

        var position1 = new Position(52.649005, -7.250712);
        var position2 = new Position(52.648061, -7.252879);
        var position3 = new Position(52.650519, -7.249260);
        var position4 = new Position(52.652680, -7.244724);
        var position5 = new Position(52.648061, -7.252879);
        var position6 = new Position(52.648061, -7.252879);

        var pin1 = new CustomPin
        {
            Type = PinType.Place,
            Position = position1,
            Label = "Butler House",
            Address = "394 Pacific Ave, San Francisco CA",
            Id = "test",
            Url = "http://xamarin.com/about/"
        };

        var pin2 = new CustomPin
        {
            Type = PinType.Place,
            Position = position2,
            Label = "Talbots Tower",
            Address = "394 Pacific Ave, San Francisco CA",
            Id = "",
            Url = "http://xamarin.com/about/"

        };

In the CustomMapRender.cs file here is where I believe I need to be able to alter the CustomPin.URL to allow me to click and get local pages in the app itself.

 protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
    {
        MKAnnotationView annotationView = null;

        if (annotation is MKUserLocation)
            return null;

        var customPin = GetCustomPin(annotation as MKPointAnnotation);
        if (customPin == null)
        {
            throw new Exception("Custom pin not found");
        }

        annotationView = mapView.DequeueReusableAnnotation(customPin.Id.ToString());
        if (annotationView == null)
        {
            annotationView = new CustomMKAnnotationView(annotation, customPin.Id.ToString());
            annotationView.Image = UIImage.FromFile("pin-red-10.png"); //pin is set by image not changable by colour attributes
            annotationView.CalloutOffset = new CGPoint(0, 0);
            annotationView.LeftCalloutAccessoryView = new UIImageView(UIImage.FromFile("Ireland-icon.png"));
            annotationView.RightCalloutAccessoryView = UIButton.FromType(UIButtonType.DetailDisclosure);
            ((CustomMKAnnotationView)annotationView).Id = customPin.Id.ToString();
            ((CustomMKAnnotationView)annotationView).Url = customPin.Url;
        }
        annotationView.CanShowCallout = true;

        return annotationView;

Any help or insight on this would be much appreciated as Im going around in circles trying so many different things at present.

Thanks Michael

Unknown Unknown · Accepted Answer · 2018-08-07T22:44:26

GetViewForAnnotation method is for getting the MKAnnotationView (i.e., the callout that's displaying the details of the Pin).

What you need is the tap event of the MKMapView callout. Add an EventHandler to CalloutAccessoryControlTapped and handle the logic for navigation.

In the sample provided it would be this part

void OnCalloutAccessoryControlTapped(object sender, MKMapViewAccessoryTappedEventArgs e)
        {
            // handle navigation here instead of opening the webpage
            var customView = e.View as CustomMKAnnotationView;
            if (!string.IsNullOrWhiteSpace(customView.Url))
            {
                UIApplication.SharedApplication.OpenUrl(new Foundation.NSUrl(customView.Url));
            }
        }

Xamarin Custom Map Pin Renderers

1 Answers