Xamarin Forms implementing TK.CustomMaps

Question

This is probably a very simple fix, but I can't seem to find a full example of the implementation of TK.Custom maps in a Xamarin Forms project anywhere. As far as I can tell the below code should work as expected, however when debugging using the Universal Windows element of the project I can't see the custom Pin, even removing the imagesource (which according to the documentation should revert the pin image to the default) doesn't resolve the issue.

It's also worth noting that the map, pin, and drag events don't fire. At least they don't appear to when debugging the UWP app.

XAML:

<ContentPage.Content>
<Grid VerticalOptions="Fill" HorizontalOptions="Fill">
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>
    <Entry x:Name="Searchbar" Text="Town, City, Postcode ..." TextColor="Gray" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start" />
    <z:TKCustomMap x:Name="mapView" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" IsVisible="False" />
    <maps:Map x:Name="mapViewNative"  Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MapType="Hybrid" IsVisible="False"/>
  <Button x:Name="nextBtn"  Grid.Row="2" Clicked="NextClicked" Text="Next" HorizontalOptions="End" VerticalOptions="End"/>
</Grid>

C# [SetPosition() is fired on page initialisation]

    Plugin.Geolocator.Abstractions.Position location = null;
    private ObservableCollection<TKCustomMapPin> _pins = new ObservableCollection<TKCustomMapPin>();

    private async void SetPosition()
    {
        mapView.IsVisible = true;

        if (CrossGeolocator.Current.IsGeolocationAvailable)
        {
            location = await CrossGeolocator.Current.GetPositionAsync();

            mapView.SetBinding(TKCustomMap.CustomPinsProperty, "Pins");
            mapView.SetBinding(TKCustomMap.MapClickedCommandProperty, "MapClickedCommand");
            mapView.SetBinding(TKCustomMap.MapLongPressCommandProperty, "MapLongPressCommand");
            mapView.SetBinding(TKCustomMap.MapCenterProperty, "MapCenter");
            mapView.SetBinding(TKCustomMap.PinSelectedCommandProperty, "PinSelectedCommand");
            mapView.SetBinding(TKCustomMap.SelectedPinProperty, "SelectedPin");
            mapView.SetBinding(TKCustomMap.RoutesProperty, "Routes");
            mapView.SetBinding(TKCustomMap.PinDragEndCommandProperty, "DragEndCommand");
            mapView.SetBinding(TKCustomMap.CirclesProperty, "Circles");
            mapView.SetBinding(TKCustomMap.CalloutClickedCommandProperty, "CalloutClickedCommand");
            mapView.SetBinding(TKCustomMap.PolylinesProperty, "Lines");
            mapView.SetBinding(TKCustomMap.PolygonsProperty, "Polygons");
            mapView.SetBinding(TKCustomMap.MapRegionProperty, "MapRegion");
            mapView.SetBinding(TKCustomMap.RouteClickedCommandProperty, "RouteClickedCommand");
            mapView.SetBinding(TKCustomMap.RouteCalculationFinishedCommandProperty, "RouteCalculationFinishedCommand");
            mapView.SetBinding(TKCustomMap.TilesUrlOptionsProperty, "TilesUrlOptions");
            mapView.SetBinding(TKCustomMap.MapFunctionsProperty, "MapFunctions");

            mapView.IsRegionChangeAnimated = true;

            mapView.PinSelected += pinClicked;
            mapView.MapClicked += mapClicked;
            mapView.PinDragEnd += pinDragEnd;

            //mapView.IsShowingUser = true;

            mapView.CustomPins = _pins;

            var initPin = new TKCustomMapPin()
            {
                IsDraggable = true,
                Position = new Position(location.Latitude, location.Longitude),
                IsVisible = true,
                Title = "Concern Location",
                Image = Device.OnPlatform("pinicon.png", "pinicon.png", "Assets/pinicon.png")
            };

            this._pins.Remove(initPin);
            await Task.Delay(1000);
            this._pins.Add(initPin);

            mapView.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(initPin.Position.Latitude, initPin.Position.Longitude), Distance.FromMiles(0.3)));
        }
    }

'Initpin' gets the location properly and the map movesregion to the correct position, but just doesn't want to display the custom pin. Any help is appreciated.

Hello, I want to integrate TKCustom Map in my xamarin app but didn't find the working code. I follow the instruction and try to make the demo but the map doesn't display on iOS 11. If you have working code for it, can you help me with that? — Vivek Shah

Digitalsa1nt Digitalsa1nt · Accepted Answer · 2017-06-09T18:49:44

For anyone that gets here looking for a solution, it turns out that using an IObservableCollection to pass the custom pins to the TKCustomMap was the cause of the issue. I used a standard TKCustomPin[] array and it worked perfectly. Since I posted this message, I've since stopped using the TKCustomMap plugin, and instead merged the work into our code base and carried on implementing missing features, improving the code where required etc. Highly recommend others doing the same, it's a solid base, but hasn't seen much development in recent months.

Xamarin Forms implementing TK.CustomMaps

2 Answers