1

I'm trying to use certain icon instead of default Xamarin.Forms pins on Map. So I created CustomisePin class that inheritance Pin.

using Xamarin.Forms.Maps;
namespace agroNet.Tools
{
    public class CustomPin : Pin
    {
        public string PinIcon { get; set; }
    }
}

Here is what I tried in my ViewModel

private Map _map;

        public IrrigNetViewModel(Map map)
        {
            dialog = UserDialogs.Instance.Loading(AppResource.LocalizationResource.Loading);        
            TabTappedCommand = new Command((tabName) => OnTapClicked(tabName.ToString()));
            HideListOnTapCommand = new Command(HideListOnTap);
            _map = map;
            GetData();
        }

And here is method wor set pins on positions.

public void LoadMapTab()
        {

            //var irrigNetPins = new List<CustomPin>();

            foreach (var item in IrrigNetCollection)
            {
                //var pins = new CustomPin
                //{
                //    Label = item.StationName,
                //    Position = new Position(item.StationLatitude, item.StationLongitude),
                //    PinIcon = "satellite.png"
                //};

                _map.Pins.Add(new CustomPin
                {
                    Label = item.StationName,
                    Position = new Position(item.StationLatitude, item.StationLongitude),
                    //PinIcon = P
                });
                _map.MoveToRegion(
                    MapSpan.FromCenterAndRadius(new Position(item.StationLatitude, item.StationLongitude),
                    Distance.FromKilometers(30)));

                //irrigNetPins.Add(pins);
            }

            //return irrigNetPins;
        }

In LoadMapTab under the comment lines is what I have tried to set pin icon.

And here is part of View if it's important because of Binding Context.

public partial class IrrigNetPage : ContentPage
    {

        public IrrigNetPage()
        {
            InitializeComponent();
            BindingContext = new IrrigNetViewModel(MainMap);
        }
    }

I find some examples on Google, like: https://github.com/raechten/BindableMapTest https://github.com/paulpatarinski/ShouldIWashMyCar

For some reason I can't event run them, but still I tried to use code and no matter what I have Pin are alwas default, or not even show.

What is simple way to set certain icon for pin and is it posiple to render it just with some path to the icon without rendering map also (Because I saw many create costumise map for customised pins).

Also If it's important for someon I'm using MVVM patern.

Nitrus Brio
  • 89
  • 2
  • 15
  • Custom Pins can be shown using Custom Renderers – Paramjit May 29 '19 at 14:32
  • @HobbyDev You don't say? :O – Nitrus Brio May 29 '19 at 14:41
  • If you want to use custom renderers I will find and post the code from one of my projects. – Paramjit May 29 '19 at 14:46
  • @HobbyDev Well, that will be helpful. Thank's in advance. :D – Nitrus Brio May 29 '19 at 14:50
  • The codebase of the project is large. I need to extract the exact code for Custom Pins. So you have to wait for a day. – Paramjit May 29 '19 at 16:29
  • you could refer to [Custom a Map Pin](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map/customized-pin),and there is a sample for it – Leo Zhu May 30 '19 at 02:25
  • 1
    @NitrusBrio I tried to create a sample project for your requirement. I able to show custom pins when the data of the pins is available during page load. Just the data needs to be assign to the pins at constructor of the page. But if pins data is bound to the view model the custom pins remain null. See issue https://github.com/xamarin/Xamarin.Forms/issues/6393 on Github. If the data required for pins is readily available on map load you can use the project from github issue. Ask me if any help is required. – Paramjit Jun 04 '19 at 07:10
  • 1
    @NitrusBrio Hi, With the guidance from a developer I able to create the sample project which use the custom Pins. Have a look https://github.com/HobDev/CustomPinSample/tree/master – Paramjit Jun 04 '19 at 18:52
  • @HobbyDev Thank you again. This is just what i needed. :) You can set link as an answers, so I could approve it. :) – Nitrus Brio Jun 05 '19 at 08:27

1 Answers1

0

The official Xamarin sample and documentation is outdated. I modified the official Custom Pin sample in order to use custom pins in iOS and Android. The project is hosted on GitHub.

An issue is reported about the official sample over here.

Paramjit
  • 760
  • 8
  • 25