How to develop a custom popup design in xamarin forms map

AswathyAswathy Member ✭✭
edited June 2018 in Xamarin.Forms

Hi, I am new in xamarin, i want to develop a custom popup design in xamarin forms map, how can I do this in android and ios. I am used this link to develop my app -https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map/customized-pin

Please help me

I want a design like this

Answers

  • SzbestaSzbesta Member ✭✭✭

    Well then just follow the guide. By just skimming through it I could see that this will guide you to where you want to be with the design so this question is super redundant as you posted the answer with the link already...

  • AswathyAswathy Member ✭✭

    @Szbesta Actaully I complete the design partially using that link but I can't place the image like the above design

    Here is my design

  • SzbestaSzbesta Member ✭✭✭

    Now that is a layout problem I cant really help you with that without seeing the code you used to achieve your design. Would you mind posting the code of you pin design. Could be helpful

  • AswathyAswathy Member ✭✭
    edited June 2018

    Here is my Android code

  • AswathyAswathy Member ✭✭

    But my ios design look design look like this
    Here is the code
    annotationView.CalloutOffset = new CGPoint(0, 0);

                annotationView.LeftCalloutAccessoryView = new UIImageView(UIImage.FromFile("img1.png"));
                // annotationView.RightCalloutAccessoryView = UIButton.FromType(UIButtonType.DetailDisclosure);
                ((CustomMKAnnotationView)annotationView).Id = customPin.Id.ToString();
                ((CustomMKAnnotationView)annotationView).MarkerId = customPin.MarkerID;
    
  • AswathyAswathy Member ✭✭

    @Szbesta could you please help me

  • AnandVKAnandVK USMember ✭✭

    I think you should use a transparent image with invisible borders, which may help you achieve the look & feel what you are expecting.

  • AswathyAswathy Member ✭✭

    @AnandVK In ios how can I do this....

  • AnandVKAnandVK USMember ✭✭

    @Aswathy You can size the image using cliptobounds and set Bounds of UIImageView which helps you to scale the image properly on map.

  • ProgrammerProgrammer Member ✭✭

    @Aswathy i am facing same problem do you solve ?please help if you solve it and please share the samle code for both android and ios. thanks

  • AswathyAswathy Member ✭✭
    edited March 23

    iOS
    Create a renderer for ios

        public class CustomRendererMap : MapRenderer
          {
           private MapView mapView;
          UIView _view = null;
            UIView customPinView;
    
    
          protected override void OnElementChanged(ElementChangedEventArgs<View> e)
          {
            base.OnElementChanged(e);
    
            if (e.OldElement != null)
            {
                CustomMapiOS formsMap = (CustomMapiOS)e.NewElement;
            }
    
            if (e.NewElement != null)
            {
                CustomMapiOS formsMap = (CustomMapiOS)e.NewElement;
                MapView nativeMap = Control as MapView;
                mapView = nativeMap;
                nativeMap.MarkerInfoWindow = new GMSInfoFor(markerInfoWindow);
    
            }
        }
    
        private void NativeMap_InfoTapped(object sender, GMSMarkerEventEventArgs e)
        {
    
        }
    
        UIView markerInfoWindow(UIView view, Marker marker)
        {
            UIImageView _dwnImage = null;
            customPinView = new UIView();
    
              customPinView.Frame = new CGRect(0, 0, 120, 75);
    
            _view = new UIView(new CGRect(0, 0, 120, 65));
              _view.BackgroundColor = UIColor.White;
    
           //Create the design you want and add it into the _view.
    
                 UILabel _state = new UILabel(new CGRect(0, 5, 120, 20));
                _state.Text = marker.Title;
                _state.TextColor = UIColor.FromRGB(31, 117, 209);
                _view.AddSubview("Text");
                _state.Font = UIFont.BoldSystemFontOfSize(15);
                _state.TextAlignment = UITextAlignment.Center;
    
               customPinView.AddSubview(_dwnImage);
               customPinView.AddSubview(_view);
    
               return customPinView;
        }     
    }
    

    For android


    create a design in .axml

       <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff"
     android:paddingLeft="0.0dp"
     android:id="@+id/abs">
     <LinearLayout
        android:id="@+id/linear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:minWidth="200.0dp"
        android:orientation="vertical"
        android:background="#fff"
        android:layout_x="90.0dp">
        <TextView
            android:id="@+id/InfoWindowTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#14559a"
            android:layout_marginLeft="10.0dp"
            android:textSize="20dp"
            android:textStyle="bold" />       
    </AbsoluteLayout>
    

    Renderer for android


     public class CustomMapRenderer : MapRenderer, GoogleMap.IInfoWindowAdapter
      {
        List<CustomPin> customPins;
    
        GoogleMap gmap;
    
    
        public CustomMapRenderer(Context context) : base(context)
        {
    
        }
    
        protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);
    
            if (e.OldElement != null)
            {
            }
    
            if (e.NewElement != null)
            {
                CustomMap formsMap = (CustomMap)e.NewElement;
                customPins = formsMap.CustomPins;
                Control.GetMapAsync(this);
    
            }
    
        }
    
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
            CustomMap formsMap = (CustomMap)sender;
    
            if (formsMap != null)
            {
                customPins = formsMap.CustomPins;
            }
    
            Control.GetMapAsync(this);
        }
    
        protected override void OnMapReady(GoogleMap map)
        {
            try
            {
                base.OnMapReady(map);
    
                NativeMap.SetInfoWindowAdapter(this);
    
            }
            catch (Exception ex)
            {
    
            }
        }
    
    
      //Set the marker
    
        protected override MarkerOptions CreateMarker(Pin pin)
        {
            var marker = new MarkerOptions();
    
            try
            {
                string _icon = pin.Sample;
                marker.SetPosition(new LatLng(pin.Position.Latitude, pin.Position.Longitude));
    
                if (string.IsNullOrEmpty(_icon))
                {
                    marker.SetIcon(BitmapDescriptorFactory.FromResource(Resource.Drawable.map_state));
                }
            }
            catch (Exception ex)
            {
    
            }
            return marker;
        }
    
    //popup design
    
        public Android.Views.View GetInfoContents(Marker marker)
        {
            try
            {
                var inflater = Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService) as Android.Views.LayoutInflater;
    
                if (inflater != null)
                {
    
                    Android.Views.View view;
    
                    var customPin = GetCustomPin(marker);
    
                    if (customPin == null)
                    {
                    }
    
                    if (!string.IsNullOrEmpty(marker.Snippet))
                    {
                        view = inflater.Inflate(Resource.Layout.MapInfoWindow, null);
    
                        var _name = view.FindViewById<TextView>(Resource.Id.InfoWindowTitle);
    
                        if (!string.IsNullOrEmpty(marker.Title))
                        {
                           _name.Text=marker.Title;
                        }
    
                    }
    
            }
            catch (Exception ex)
            {
    
            }
            return null;
        }
    
        public Android.Views.View GetInfoWindow(Marker marker)
        {
            return null;
        }
    
        CustomPin GetCustomPin(Marker annotation)
        {
            try
            {
                var position = new Position(annotation.Position.Latitude, annotation.Position.Longitude);
    
                if (customPins != null)
                {
                    foreach (var pin in customPins)
                    {
                        if (pin.Position == position)
                        {
                            return pin;
                        }
                    }
                }
            }
            catch (Exception ex)
            {
    
            }
            return null;
    
        }
    
    }
    

    }
    @Programmer i found a solution and solve my problem,am sharing a sample code for you

Sign In or Register to comment.