How to show the direction by latitude and longitude values in SfCircularGauge using direction compass
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
You can find the sample in the following location: Sample
