CODEWITHSUNDEEP
c#xamarin.forms
JoeTomks
JoeTomks

Reputation: 3276

Xamarin Forms implementing TK.CustomMaps

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.

Upvotes: 1

Views: 3406

Answers (2)

Pxaml
Pxaml

Reputation: 555

I'm not able to reproduce your code.

This is my xaml 

 xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
 xmlns:customMap="clr-namespace:TK.CustomMap;assembly=TK.CustomMap"

however, I don't know how to integrate the drop and drag pin functionality.

Upvotes: 0

JoeTomks
JoeTomks

Reputation: 3276

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.

Upvotes: 1

Related Questions