format text of a point on RadMap

1 Answer 146 Views
Map
Ammar
Top achievements
Rank 1
Ammar asked on 15 Sep 2021, 07:54 PM

Hi 

I have added points to RadMap and on each point I have placed an image and a text (as shown in the attached screenshot image). 

My questions

1) can I move the text below the point because it is currently on top of the added image ?

2) can I add a background color to the text to make sure it is visible to end users?

 

The code I am using is below:

    PointG racheer = new PointG(Latitude, Longitude);
    MapPoint point = new MapPoint(racheer);
    point.Image = Properties.Resources.myImage;
    point.Size = new Size(15, 15);
    point.Text = "TEXT";
    point.ForeColor = Color.Red;
    radMap1.MapElement.Layers["myLayer"].Add(point);

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 Sep 2021, 06:34 AM

Hello, Ammar, 

In order to achieve your goal, it is necessary to plug into the painting of the MapPoint, decrease in height the rectangle in which the image is rendered and draw a fill rectangle for the text. I have prepared a sample code snippet for your reference: 

        public RadForm1()
        {
            InitializeComponent();

            string cacheFolder = @"..\..\cache";
            OpenStreetMapProvider osmProvider = new OpenStreetMapProvider();
            MapTileDownloader tileDownloader = osmProvider.TileDownloader as MapTileDownloader;
            tileDownloader.WebHeaders.Add(System.Net.HttpRequestHeader.UserAgent, "your application name");
            LocalFileCacheProvider cache = new LocalFileCacheProvider(cacheFolder);
            osmProvider.CacheProvider = cache;
            this.radMap1.MapElement.Providers.Add(osmProvider);
            this.radMap1.Layers.Add(new MapLayer("myLayer"));

            PointG racheer = new PointG(42.3665137, -71.06160420);
            CustomMapPoint point = new CustomMapPoint(racheer);
            point.Image = Properties.Resources.New_York ;
            point.Size = new Size(15, 15);
            point.Text = "New York";
            point.ForeColor = Color.Red; 
            radMap1.MapElement.Layers["myLayer"].Add(point);
        }

        public class CustomMapPoint : MapPoint
        {
            public CustomMapPoint(PointG location) : base(location)
            {
            }

            protected override void PaintText(Telerik.WinControls.Paint.IGraphics graphics, IMapViewport viewport)
            {
                if (this.Text == null)
                {
                    return;
                }

                long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);

                object state = graphics.SaveState();

                SizeF size = graphics.MeasureString(this.DrawText, System.Windows.Forms.Control.DefaultFont, new StringFormat());
                SizeF space = graphics.MeasureString("X", System.Windows.Forms.Control.DefaultFont, new StringFormat());
                MapVisualElementInfo info = this.GetVisualElementInfo(viewport);
                RectangleL drawRect = info.Path.GetBounds();
                drawRect.Offset(viewport.PanOffset.Width + info.Offset.X, viewport.PanOffset.Height + info.Offset.Y);
                RectangleF textRect = new RectangleF(drawRect.X + drawRect.Width / 2f - size.Width / 2f, drawRect.Y - size.Height - space.Width / 2f, size.Width, size.Height);

                for (int i = 0; i < viewport.NumberOfWraparounds; i++)
                {
                    graphics.FillRectangle(textRect,Color.Yellow);
                    graphics.DrawString(this.DrawText, new RectangleF(textRect.Location, size), this.Font, this.ForeColor, new StringFormat(), System.Windows.Forms.Orientation.Horizontal, false);
                    textRect.Offset(mapSize, 0);
                }

                graphics.RestoreState(state);
            }

            public override void Paint(Telerik.WinControls.Paint.IGraphics graphics, IMapViewport viewport)
            {
                object state = graphics.SaveState();
                graphics.ChangeSmoothingMode(SmoothingMode.AntiAlias);
                Graphics g = graphics.UnderlayGraphics as Graphics;

                MapVisualElementInfo info = this.GetVisualElementInfo(viewport);
                GraphicsPath path = info.Path.Clone() as GraphicsPath;
			
                Matrix matrixOffset = new Matrix();
                matrixOffset.Translate(viewport.PanOffset.Width + info.Offset.X, viewport.PanOffset.Height + info.Offset.Y);
                path.Transform(matrixOffset);

                long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
                Matrix matrixWraparound = new Matrix();
                matrixWraparound.Translate(mapSize, 0);

                for (int i = 0; i < viewport.NumberOfWraparounds; i++)
                {
                    RectangleF bounds = path.GetBounds();
                    FillPrimitiveImpl fill = new FillPrimitiveImpl(this, null);
                    fill.PaintFill(graphics, path, bounds);
                    
                    BorderPrimitiveImpl border = new BorderPrimitiveImpl(this, null);
                    border.PaintBorder(graphics, null, path, bounds);

                    if (this.Image != null)
                    {
                        PointF point = new PointF(bounds.X + (bounds.Width - this.Image.Width) / 2f * (float)this.ImageScale, bounds.Y - this.Image.Width * (float)this.ImageScale);
                        int decreaseImageHeightValue = 30;
                        RectangleF imageRect = new RectangleF(point, new SizeF(this.Image.Size.Width * (float)this.ImageScale, (this.Image.Size.Height - decreaseImageHeightValue) * (float)this.ImageScale));
                        g.DrawImage(this.Image, imageRect);
                    }

                    path.Transform(matrixWraparound);
                }

                graphics.RestoreState(state);

                this.PaintText(graphics, viewport);
            }
        }



I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Ammar
Top achievements
Rank 1
commented on 20 Sep 2021, 10:14 AM

Thanks Dess,

I do not know why the MapVisualElementInfo class is not found despite the fact that I am using Telerik.WinControls.UI

do you know what assembly reference should be used to get the MapVisualElementInfo class?

 

Dess | Tech Support Engineer, Principal
Telerik team
commented on 20 Sep 2021, 10:25 AM

Hi, Ammar,

I am using the latest version of the Telerik UI for WinForms suite, R3 2021 (version 2021.3.914)

However, the MapVisualElementInfo class is available since R2 2021 (version 2021.2.511).

Feel free to use at least R2 2021 or newer version.

Ammar
Top achievements
Rank 1
commented on 20 Sep 2021, 02:08 PM

Thanks Dess 
Tags
Map
Asked by
Ammar
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or