This is a migrated thread and some comments may be shown as answers.

Draw a Circle on Map

10 Answers 126 Views
Map
This is a migrated thread and some comments may be shown as answers.
Lost
Top achievements
Rank 1
Lost asked on 13 Apr 2019, 06:09 AM

Hi everyone.
I need to draw a circle with the desired radius on the map, which is filled inside the circle with a transparent color and visible inside it. I did this according to the telerik tips, but the circle drawn on the map does not change its radius.
Can anyone help in this matter?
This is also my code:

**************draw circle Class **************

public class DrawCricleOnMap : MapPoint
    {
        private int radiusInMeters;

        public DrawCricleOnMap(PointG location) : base(location)
        { }

        public DrawCricleOnMap(PointG location, Size size)
            : base(location, size)
        { }

        public int RadiusInMeters
        {
            get
            {
                return this.radiusInMeters;
            }
            set
            {
                this.radiusInMeters = value;
            }
        }

        public override void ViewportChanged(IMapViewport viewport, ViewportChangeAction action)
        {
            double onePixelInMeters = MapTileSystemHelper.GroundResolution(this.Location.Latitude, viewport.ZoomLevel);

            int scale = -1;
            scale = (int)(this.RadiusInMeters * 2 / onePixelInMeters);
            Size newSize = Size.Empty;
            if (scale > 1)
                newSize = new Size(scale, scale);

            this.Size = newSize;

            base.ViewportChanged(viewport, action);
        }

    }

 

************** use the class in my code by a method ***************

public void DrawCircleOnMap()
        {
            var dbContex = new My_DBEntities();
            var data = dbContex.CarTables.Select(x => new { x.MaxRange, x.CarLat, x.CarLong }).ToList();
            foreach (var item in data)
            {
                DrawCricleOnMap element = new DrawCricleOnMap(new PointG((double)item.CarLat, (double)item.CarLong));
                //element.RadiusInMeters = int.Parse(((double)item.MaxRange).ToString());
                element.RadiusInMeters = 100;
                element.BackColor = Color.FromArgb(125, Color.LightBlue);
                element.BorderColor = Color.Red;
                radMap1.Layers["CircleLayer"].Add(element);
                //DrawCricleOnMap circle = new DrawCricleOnMap(new PointG((double)item.CarLat, (double)item.CarLong))
                //{
                //    RadiusInMeters=int.Parse("200")
                //};
                //radMap1.Layers["CircleLayer"].Add(element);
            }
        }

10 Answers, 1 is accepted

Sort by
0
Lost
Top achievements
Rank 1
answered on 13 Apr 2019, 06:11 AM
and th result is :
0
Accepted
Dimitar
Telerik team
answered on 15 Apr 2019, 05:49 AM
Hello,

Here is an example of this. It would be better to override the Paint method in order to draw the transparent circle:
class MapMarker : MapVisualElement
{
    public Double Radius { get; set; }
    private RectangleL drawRect;
    public override bool IsInViewport
    {
        get { return true; }
    }
    public override void Paint(IGraphics graphics, IMapViewport viewport)
    {
 
        object state = graphics.SaveState();
        graphics.TranslateTransform(drawRect.X, drawRect.Y);
        Graphics g = graphics.UnderlayGraphics as Graphics;
 
        long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
 
        for (int i = -1; i <= viewport.NumberOfWraparounds; i++)
        {
            var rect = new RectangleF(i * mapSize, 0, this.drawRect.Width, this.drawRect.Height);
            g.DrawEllipse(Pens.Green, rect);
            Color newColor = Color.FromArgb(100, Color.Green);
            g.FillEllipse(new SolidBrush(newColor), rect);
        }
 
        graphics.RestoreState(state);
    }
    public override void ViewportChanged(IMapViewport viewport, ViewportChangeAction action)
    {
        long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
 
        double degreesPerMiles = Radius / 69d;
        double left = this.Location.Longitude - degreesPerMiles;
        double right = this.Location.Longitude + degreesPerMiles;
        double top = this.Location.Latitude + degreesPerMiles;
        double bottom = this.Location.Latitude - degreesPerMiles;
 
        RectangleG r = new RectangleG(top, left, bottom, right);
 
        PointL p1 = MapTileSystemHelper.LatLongToPixelXY(r.NorthWest, viewport.ZoomLevel);
        PointL p2 = MapTileSystemHelper.LatLongToPixelXY(r.SouthEast, viewport.ZoomLevel);
 
       this.drawRect = new RectangleL(p1.X, p1.Y, p2.X - p1.X, p2.Y - p1.Y);
     
    }
    public override bool HitTest(PointG pointG, PointL pointL, IMapViewport viewport)
    {
        return this.drawRect.Contains(pointL);
    }
     
}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lost
Top achievements
Rank 1
answered on 15 Apr 2019, 12:16 PM

Thank you very much for your post and advice. But I could not use the class to draw a circle. Is it possible for you to give an example?
With the class I wrote in the previous post, I was able to draw a circle, but by zooming in or out the map scale is changed, but the size of the circle's radius did not change.

 

Thanks...

0
Accepted
Dimitar
Telerik team
answered on 15 Apr 2019, 01:13 PM
Hi,

Here is how you can add the circle:
this.radMap1.Layers.Add(new MapLayer("L1"));
MapMarker marker = new MapMarker();
marker.Location = new PointG(39.83, -98.58); 
marker.Radius = 100d; //radius in miles
 
this.radMap1.Layers["L1"].Add(marker);
 
MapPin pin = new MapPin(new PointG(39.83, -98.58));
this.radMap1.Layers["L1"].Add(pin);

The pin will show you where to look for the circle. The circle will be enlarged when you are zooming (see attached).

Regards,
Dimitar
Progress Telerik
Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lost
Top achievements
Rank 1
answered on 16 Apr 2019, 05:20 AM

Thank you for your example Dimitar. My problem was fixed, but another problem was created. The shape created in the map is like an egg or elliptic. How can it be turned into a circle?
Thank you buddy
0
Accepted
Dimitar
Telerik team
answered on 16 Apr 2019, 09:26 AM
Hello,

We are using the Mercator projection, which means that we are presenting the earth on a flat surface and this is why you are seeing an ellipse. If your location is close to the equator the shape will be close to a circle, and it will look different when it is close to the poles. The distance is correct however presenting it on a flat surface introduces the distortion. For example, the Mercator projection portrays Greenland as larger than Australia and actually Australia is more than three times larger than Greenland (see here).

Please let me know if there is something else I can help you with. 
 
Regards,
Dimitar
Progress Telerik
Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lost
Top achievements
Rank 1
answered on 17 Apr 2019, 07:20 AM

Thank you so much.

I hope you succeed in all stages of life.

0
Lost
Top achievements
Rank 1
answered on 17 Apr 2019, 07:21 AM

Thank you  so much. 

I hope you succeed in all stages of life.

0
Lost
Top achievements
Rank 1
answered on 17 Apr 2019, 07:22 AM

Thank you so much. 

I hope you succeed in all stages of life.

0
Lost
Top achievements
Rank 1
answered on 17 Apr 2019, 07:23 AM

Thank you so much. 

I hope you succeed in all stages of life.

Tags
Map
Asked by
Lost
Top achievements
Rank 1
Answers by
Lost
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or