Map circle actual radius

[MS]

Trying to create a circle to define an area on the map.

It's not clear what unit does the Radius property use (meters, kilometers, miles, pixels, etc...).

And the circle radius is always the same at any zoom level.

I'm trying to achieve the same effect as below (shape size changing when zooming in, radius in meters):

Here is the xaml i'm currently using:

<sfmaps:SfMaps>

                            <sfmaps:SfMaps.Layer>

                                <sfmaps:MapTileLayer UrlTemplate="https://provider/tile/{z}/{x}/{y}.png" EnableZoomingAnimation="True">

                                    <sfmaps:MapTileLayer.Center>

                                        <sfmaps:MapLatLng Latitude="54.1657552" Longitude="-2.3245077" />

                                    </sfmaps:MapTileLayer.Center>

                                    <sfmaps:MapTileLayer.ZoomPanBehavior>

                                        <sfmaps:MapZoomPanBehavior EnableZooming="True" ZoomLevel="5" MinZoomLevel="4" MaxZoomLevel="18" />

                                    </sfmaps:MapTileLayer.ZoomPanBehavior>

                                    <sfmaps:MapTileLayer.Sublayers>

                                        <sfmaps:MapCircleLayer>

                                            <sfmaps:MapCircleLayer.Circles>

                                                <sfmaps:MapCircle Center="{Binding Area.Coordinates, Converter={converters:CoordinatesToSfMapLatLng}}" Radius="{Binding Area.Radius}" Fill="Blue" Stroke="DarkBlue">

                                                </sfmaps:MapCircle>

                                            </sfmaps:MapCircleLayer.Circles>

                                        </sfmaps:MapCircleLayer>

                                    </sfmaps:MapTileLayer.Sublayers>

                                </sfmaps:MapTileLayer>

                            </sfmaps:SfMaps.Layer>

                        </sfmaps:SfMaps>

[Kamalesh Periyasamy]

Hi Rebin,

Regarding “maintain radius in geographic units”:

In the Syncfusion .NET MAUI SfMaps control, the MapCircle functions as a sublayer that overlays the base layer. Its radius is rendered in pixels, rather than geographic units such as kilometers or meters, ensuring that the circle maintains a consistent radius across varying zoom levels.

If you need to render the MapCircle.Radius using geographic units such as kilometers or meters, while still maintaining a consistent radius across different zoom levels, this can be achieved at the sample level with the following code snippet. 

[C#]:

private double radius;

private const double EarthRadius = 6371;

private const double BasePixelRadius = 256;

private const double ScalingFactor = 1.455;

 

public MainPage()

{

              InitializeComponent();

              this.circle.Radius = GetPixelRadius(this.circle.Radius, 1);

              this.radius = this.circle.Radius;

}

 

private void MapTileLayer_ZoomLevelChanging(object sender, Syncfusion.Maui.Maps.ZoomLevelChangingEventArgs e)

{

              if (this.circle == null)

              {

                             return;

              }

 

              double newPixelRadius = GetPixelRadius(this.radius, e.NewZoomLevel);

              this.circle.Radius = newPixelRadius;

}

 

private double GetPixelRadius(double radiusKm, double zoomLevel)

{

              double scaleFactor = Math.Pow(2, zoomLevel);

              double circumferencePixels = BasePixelRadius * scaleFactor * 2 * Math.PI;

              return (radiusKm / EarthRadius) * (circumferencePixels / (2 * Math.PI)) * ScalingFactor;

}

 

The above code dynamically adjusts the MapCircle.Radius to accurately represent a geographic radius (in kilometers) across different zoom levels. The GetPixelRadius() method converts the radius from kilometers to pixels by considering Earth's circumference, zoom-level scaling, and an empirical scaling factor to align the calculated value with the map's rendering behavior.

 

We have prepared an example sample and video attached them below for your reference. Please check the attached sample and let us know whether this meets your requirement.

 

We hope that this helps you. Please let us know if you need further assistance.

Regards,

Kamalesh P

Attachment: MapRadius_Ypf6eL7zJ2_8ef8c239.zip

[MS]

Hi Kamalesh,

Thank you for your reply and project sample, appreciate it.

However it seems like the circle size is not accurate.

If I replace the constructor code with:

this.circle.Radius = GetPixelRadius(1, this.mapZoomPanBehavior.ZoomLevel);

Which basically should create a 1km circle.

But as you can see it covers a much larger area.

Reference: https://www.freemaptools.com/radius-around-point.htm?lat=13.076516&lng=80.238884&r=1000

[Kamalesh Periyasamy]

Hi Rebin,

We have reviewed your query; in our sample the Map circle is initially rendered based on a zoom level one. Subsequently, the circle radius is adjusted according to changes in the zoom level. Therefore, if you need to modify the circle's radius, please update the radius value during the initial calculation as demonstrated in the following code snippet.

public MainPage()

{

    InitializeComponent();

    this.circle.Radius = GetPixelRadius(1, 1);

    this.radius = this.circle.Radius;

    if (this.mapZoomPanBehavior.ZoomLevel > 1)

    {

        this.circle.Radius = GetPixelRadius(this.radius, this.mapZoomPanBehavior.ZoomLevel);

    }

}

We have modified an example sample and attached it below for your reference. Please check the attached sample and let us know whether this meets your requirement.

If you have any further questions or require assistance with any other aspect, please do not hesitate to let us know. We are here to help.

Regards,
Kamalesh P

Attachment: MapRadius_(2)_(1)_8b14b1ee.zip

[MS]

Hi Kamalesh,

Thanks for getting back to me.

The updated sample works as expected with the provided sample coordinates.

However unless I'm missing something, otherwise when I change the coordinates, then it becomes inaccurrate.

Please see the attached, I've marked places in and out of the radius for comparison.

I've used the following coordinates as an example: 55.953659, -3.182608

Thank you

Attachment: different_coords_ad90907f.png

[Priyadharshni Murugan]

Hi Rebin,

Thank you for your detailed feedback and for sharing your observations regarding the radius inaccuracy when using coordinates other than the one provided in sample.

The original sample produced correct results only at the given latitude, but you noticed inaccuracies at other coordinates. This is because most web/Earth map providers (such as Google Maps and OpenStreetMap) use the Web Mercator projection. In this projection, as latitude increases from the Equator towards the poles, the number of meters represented by each pixel decreases—pixels get "squished" vertically. That means a circle with a fixed pixel radius represents a smaller physical distance at higher latitudes.

To address this, we have updated our logic to always use the actual latitude of the circle’s center (based on the specified coordinates) in the radius calculation. This approach ensures the displayed circle accurately reflects the intended real-world radius, regardless of where it is placed on the map.

We have attached the modified sample (along with a video demonstrating the tested output) for your reference. Please review the sample and let us know if this resolves your issue.

If you have any further questions or notice other concerns related to map projection or radius calculation, please let us know. We are happy to help!

 

Regards,

Priyadharshni M

Attachment: MapRadius_1_56b09487.zip

[MS]

Hi Priyadharshni,

It now seems to work as expected.

Thank you all for all your help.

[Preethi Rajakandham]

Hi MS,

You are welcome.

We are glad that the provided response meets your requirements. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R