How to load pins just around your current location and load more as you zoom out in Xamarin.Forms.Maps

Question

I’m trying to show pins on the map but only the ones that can fit the screen around your current location depending on the zoom level I’ve set on when the map appears, because I have 10’s of pins and when I open the map it loads every pin and takes a long time to load.

Any idea on how to do it ?

Method to load pins:

    async Task ExecuteLoadPinsCommand()
    {
        IsBusy = true;

        try
        {
            Map.Pins.Clear();
            Map.MapElements.Clear();
            Map.CustomPins.Clear();
            var contents = await placeRepository.GetAllPlacesWithoutRelatedDataAsync();

            if (contents == null || contents.Count < 1)
            {
                await App.Current.MainPage.DisplayAlert("No places found", "No places have been found for that category, please try again later", "Ok");
                await ExecuteLoadPinsCommand();
            }

            if (contents != null)
            {
                places.Clear();
                var customPins = this.Map.CustomPins;
                places = contents;
                foreach (var item in places)
                {
                    CustomPin devicePin = new CustomPin
                    {
                        Type = PinType.Place,
                        PlaceId = item.PlaceId.ToString(),
                        Position = new Position(item.Latitude, item.Longitude),
                        Label = $"{item.Name}",
                        Address = $"{item.Name}"
                    };

                    Map.CustomPins.Add(devicePin);
                    Map.Pins.Add(devicePin);
                }
            }
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex);
        }
        finally
        {
            IsBusy = false;
        }
    }

CustomMapRenderer:

    protected override MarkerOptions CreateMarker(Pin pin)
    {
        CustomPin pin = (CustomPin)pin;
        var thePlace = Task.Run(async () => await placeRepository.GetPlaceByIdWithMoodAndEventsAsync(Guid.Parse(pin.PlaceId)));
        var place = thePlace.ConfigureAwait(true)
                            .GetAwaiter()
                            .GetResult();

        var marker = new MarkerOptions();

        marker.SetPosition(new LatLng(place.Position.Latitude, place.Position.Longitude));
        if (place.Category == "" && place.SomethingCount == 0)
        {
            marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.icon));
        }
        //else if ...

        return marker;

    }

Answer 1

A major part of programming is learning to debug well.

When facing a performance problem, it is important to isolate the time delay to the smallest bit of code that you can.

Here's the thought process I would go through:

• YOUR OBSERVATION: When there is one pin, it takes less than a second. When there are 20 pins, it takes maybe 10 seconds. (9 second difference.)

• YOUR HYPOTHESIS (Given the question you posted): Maybe adding 20 pins to map takes much or most of the 9 seconds.

• TESTS: How can we test EXACTLY the code that "adds pins to map"?
  A: "Divide and conquer":
  Let all the other code run 20 times. That is, have 20 pins as data. BUT suppress the code that adds those pins.

Test #1: Have 20 pins returned by GetAllPlacesWithoutRelatedDataAsync. So all that work is done 20 times.
Comment out JUST the code that ADDS the pins. Make this change:

//Map.CustomPins.Add(devicePin);
//Map.Pins.Add(devicePin);

Result #1: _____ seconds

Its possible that having NO pins allows the map to skip loading some pin-related code. Lets find out how quick it is when we only ADD ONE of the 20 pins.

Test #2: Have 20 pins in the data. BUT only ADD one of them. Make this ONE-LINE change:

            foreach (var item in places)
            {
                CustomPin devicePin = new CustomPin
                {
                    Type = PinType.Place,
                    PlaceId = item.PlaceId.ToString(),
                    Position = new Position(item.Latitude, item.Longitude),
                    Label = $"{item.Name}",
                    Address = $"{item.Name}"
                };

                Map.CustomPins.Add(devicePin);
                Map.Pins.Add(devicePin);
                break;   // <--- ADD THIS LINE.
            }

Result #2: _____ seconds

(Test #2 is what I was trying to ask you to do, in one of my comments on the question. I've deleted those comments.)

Now we have enough information to determine how much of the ~9 extra seconds are due to going through that foreach loop 20 times, to ADD 20 pins.

This will determine whether there is any point in trying to speed up the ADDS, or whether there is a problem elsewhere.

---

If most time is spent elsewhere, then you need to add the suspect code to the question. Then do similar tests there. Until you can report exactly what code takes most of the time.

---

IF 20x map.Pins.Add(..) takes a significant amount of time, THEN here are two techniques, either of which should be faster, imho.

FASTER ADD #1:

Use Map.ItemsSource.

FASTER ADD #2:

Create the map WITH its pins, BEFORE displaying it.

using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace XFSOAnswers
{
    // Based on https://github.com/xamarin/xamarin-forms-samples/blob/main/WorkingWithMaps/WorkingWithMaps/WorkingWithMaps/PinPageCode.cs
    public class PinPageCode : ContentPage
    {
        public PinPageCode()
        {
            Title = "Pins demo";

            Position position = new Position(36.9628066, -122.0194722);
            MapSpan mapSpan = new MapSpan(position, 0.01, 0.01);

            Map map = new Map(mapSpan);

            Pin pin = new Pin
            {
                Label = "Santa Cruz",
                Address = "The city with a boardwalk",
                Type = PinType.Place,
                Position = position
            };
            map.Pins.Add(pin);
            // ... more pins.

            Content = new StackLayout
            {
                Margin = new Thickness(10),
                Children =
                {
                    map
                }
            };
        }
    }
}