We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show the direction by latitude and longitude values in SfCircularGauge using direction compass

Platform: Xamarin.Forms |
Control: SfCircularGauge |
Published Date: July 5, 2019 |
Last Revised Date: July 5, 2019

This article explains how to show a needle pointer to a specific direction based on the given latitude and longitude values.

Refer to the following steps to show direction by latitude and longitude values.

Step 1: Initialize the SfCircularGauge control and add scale with sub elements such as StartValue (to set the start value for scale) as 0, EndValue (to set the end value for scale) as 360, StartAngle (to set the start angle for scale) as 270, SweepAngle (to set the end angle for scale) as 360, ScaleStartOffset, and ScaleEndOffset.

Xaml

<SyncfusionGauge:SfCircularGauge Grid.Row="2" x:Name="circularGauge" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
                <SyncfusionGauge:SfCircularGauge.Scales>
 
                    <SyncfusionGauge:Scale x:Name="scale" StartAngle="270" StartValue="0" EndValue="360" Interval="45" LabelOffset="0.75" SweepAngle="360" MinorTicksPerInterval="1" ShowLastLabel="False" ScaleStartOffset="0.99" ScaleEndOffset="0.9" LabelCreated="scale_LabelCreated" RimColor="#E0E0E0" LabelColor="#4B4B4B">
 
                    </SyncfusionGauge:Scale>
                </SyncfusionGauge:SfCircularGauge.Scales>
            </SyncfusionGauge:SfCircularGauge>

 

Change the default label by hooking the LabelCreated event as demonstrated in the following code sample.

C#

private void scale_LabelCreated(object sender, Syncfusion.SfGauge.XForms.LabelCreatedEventArgs args)
        {
            switch ((string)args.LabelContent)
            {
                case "0":
                    args.LabelContent = "N";
                    break;
                case "45":
                    args.LabelContent = "NE";
                    break;
                case "90":
                    args.LabelContent = "E";
                    break;
                case "135":
                    args.LabelContent = "SE";
                    break;
                case "180":
                    args.LabelContent = "S";
                    break;
                case "225":
                    args.LabelContent = "SW";
                    break;
                case "270":
                    args.LabelContent = "W";
                    break;
                case "315":
                    args.LabelContent = "NW";
                    break;
                case "360":
                    args.LabelContent = "N";
                    break;
            }
        }

 

Step 2: Add NeedlePointer to scale pointers, assign the double value converted from latitude and longitude points to scale’s pointer value, snd set Type (appearance of the NeedlePointer) to Triangle, KnobRadius, KnobColor, KnobStrokeWidth, and KnobStrokeColor.

The following code snippet demonstrates how to place a pointer to a specific direction.

Xaml

<SyncfusionGauge:Scale.Pointers>
 
<SyncfusionGauge:NeedlePointer x:Name="pointer1" Value="{Binding PointerValue}" Color="#f03e3e" Type="Triangle" LengthFactor="0.65" Thickness="30" KnobRadius="30" KnobColor="White" KnobStrokeWidth="3" KnobStrokeColor="#f03e3e" EnableAnimation="True"/>
                        
</SyncfusionGauge:Scale.Pointers>

 

Step 3: Add MajorTickSettings to scale with StartOffset, EndOffset, Thickness, and Color, and then add MinorTickSettings to Scale with StartOffset, EndOffset, Thickness, and Color.

Xaml

<SyncfusionGauge:Scale.MajorTickSettings>
                            <SyncfusionGauge:TickSettings x:Name="majorTicks" StartOffset="0.9" EndOffset="0.83" Thickness="2" Color="#9E9E9E"/>
                        </SyncfusionGauge:Scale.MajorTickSettings>
                        <SyncfusionGauge:Scale.MinorTickSettings>
                            <SyncfusionGauge:TickSettings x:Name="minorTicks" StartOffset="0.9" EndOffset="0.85" Thickness="2" Color="#9E9E9E"/>
                        </SyncfusionGauge:Scale.MinorTickSettings>

 

Step 4: Convert the latitude and longitude points to double value.

C#

void ConvertLatitudeLongitudeToDegree(double lat1, double long1, double lat2, double long2)
        {
            var y = Math.Sin(this.degreeToRadian(long2 - long1)) * Math.Cos(this.degreeToRadian(lat2));
            var x = Math.Cos(this.degreeToRadian(lat1)) * Math.Sin(this.degreeToRadian(lat2)) - Math.Sin(this.degreeToRadian(lat1)) * Math.Cos(this.degreeToRadian(lat2)) * Math.Cos(this.degreeToRadian(long2 - long1));
            var tempValue = 0.0;
 
            tempValue = Math.Atan2(y, x);
            tempValue = this.radianToDegree(tempValue);
 
            if (tempValue < 0) tempValue = 360 + tempValue;
 
            PointerValue = tempValue;
        }
 
 public double degreeToRadian(double angle)
        {
            return Math.PI * angle / 180.0;
        }
 
        public double radianToDegree(double angle)
        {
            return angle * (180.0 / Math.PI);
        }

 

Screenshot

 

NeedlePointer place to specific place using xamarin SfCircularGauge

You can find the sample in the following location: Sample

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile