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

Add Image to Map Legend

6 Answers 126 Views

Map

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

6 Answers, 1 is accepted

Accepted

answered on 09 Apr 2019, 09:42 AM

Hello,

In order to display images next to the legend items, you can refer to the following code snippet which result is illustrated in the below screenshot:

public RadForm1()

{

InitializeComponent();

new RadControlSpyForm().Show();

string cacheFolder = @"..\..\cache";

BingRestMapProvider bingProvider = new Telerik.WinControls.UI.BingRestMapProvider();

bingProvider.UseSession = true;

bingProvider.BingKey = bingKey;

LocalFileCacheProvider cache = new LocalFileCacheProvider(cacheFolder);

bingProvider.CacheProvider = cache;

this.radMap1.Providers.Add(bingProvider);

this.radMap1.ShowLegend = true;

this.radMap1.MapElement.LegendElement.TitleElement.Text = "Legend";

MapLegendItemElement legendElement = new MapLegendItemElement("10", Color.FromArgb(227, 242, 253));

legendElement.TextElement.Image = Properties.Resources.blue_london;

legendElement.TextElement.DrawImage = true;

legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;

this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);

legendElement = new MapLegendItemElement("100", Color.FromArgb(144, 202, 249));

legendElement.TextElement.Image = Properties.Resources.blue_paris;

legendElement.TextElement.DrawImage = true;

legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;

this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);

legendElement = new MapLegendItemElement("1000", Color.FromArgb(66, 165, 245));

legendElement.TextElement.Image = Properties.Resources.blue_vienna;

legendElement.TextElement.DrawImage = true;

legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;

this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);

}

Note that most of the forum threads are reviewed by Telerik representatives and sometimes we address the questions asked by our customers in the forums as well. However, a post in the forum doesn't guarantee you a response from the Telerik support team. Moreover, threads are handled according to license and time of posting, so if it is an urgent problem, we suggest you use a support ticket, which would be handled before a forum thread. Thank you for your understanding.

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

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 17 Apr 2019, 08:21 AM

Hello,

Indeed, the provided code snippet hides the border. But it was not clear to me what exactly needs to be eliminated. In order to hide the rectangle itself, you can set the MapLegendItemElement.ColorElement.Visibility property to Collapsed.

If you have any further questions, please note that most of the forum threads are reviewed by Telerik representatives and sometimes we address the questions asked by our customers in the forums as well. However, a post in the forum doesn't guarantee you a response from the Telerik support team. Moreover, threads are handled according to license and time of posting, so if it is an urgent problem, we suggest you use a support ticket.

Thank you for your understanding.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Victor

commented on 23 May 2022, 03:08 PM

Hi Dess,

I have read this thread and I have a followup question :

Would it be possible to change the maplegend so that is has 2 (or more) columns :

This would be the desired result

Dess | Tech Support Engineer, Principal

commented on 25 May 2022, 12:44 PM

Hello, Victor,

The default MapLegendItemElement internally contains a MapLegendItemColorElement and a MapLegendItemTextElement which are derivatives of LightVisualElement. If you want to extend the MapLegendItemColorElement, feel free to add more LightVisualElements. I have prepared a sample code snippet for your reference which result is illustrated in the below screenshot:

        public RadForm1()
        {
            InitializeComponent();
             
            BingRestMapProvider bingProvider = new Telerik.WinControls.UI.BingRestMapProvider();
            bingProvider.UseSession = true;
            bingProvider.BingKey = bingKey; 
            bingProvider.EnableCaching = false;
            this.radMap1.Providers.Add(bingProvider);
 
            this.radMap1.ShowLegend = true;
 
            this.radMap1.MapElement.LegendElement.TitleElement.Text = "Legend";
            CustomMapLegendItemElement legendElement = new CustomMapLegendItemElement("10", Color.FromArgb(227, 242, 253));
            legendElement.Product = "London";
            legendElement.Liters = "2000";
            legendElement.TextElement.Image = Properties.Resources.blue_london;
            legendElement.TextElement.DrawImage = true;
            legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;         
            this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);
 
            legendElement = new CustomMapLegendItemElement("100", Color.FromArgb(144, 202, 249));
            legendElement.Product = "Paris";
            legendElement.Liters = "1300";
            legendElement.TextElement.Image = Properties.Resources.blue_paris;
            legendElement.TextElement.DrawImage = true;
            legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;           
            this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);
 
            legendElement = new CustomMapLegendItemElement("1000", Color.FromArgb(66, 165, 245));
            legendElement.Product = "Vienna";
            legendElement.Liters = "2300";
            legendElement.TextElement.Image = Properties.Resources.blue_vienna;
            legendElement.TextElement.DrawImage = true;
            legendElement.TextElement.TextImageRelation = TextImageRelation.ImageBeforeText;
            this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(legendElement);
        }

        public class CustomMapLegendItemElement : MapLegendItemElement
        {
            LightVisualElement litersElement;
            LightVisualElement productElement;

            public CustomMapLegendItemElement(string text, Color color) : base(text, color)
            {
            }

            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                litersElement = new LightVisualElement() { Text = "test" };
                productElement = new LightVisualElement() { Text = "eho" };
                this.Children.Add(litersElement);
                this.Children.Add(productElement);
            }

            public string Product
            {
                get
                {
                    return this.productElement.Text;
                }
                set
                {
                    this.productElement.Text = value;
                }
            }

            public string Liters
            {
                get
                {
                    return this.litersElement.Text;
                }
                set
                {
                    this.litersElement.Text = value;
                }
            }

            protected override SizeF MeasureOverride(SizeF availableSize)
            {
                base.MeasureOverride(availableSize);
                SizeF result;

                if (this.Orientation == Orientation.Vertical)
                {
                    result = new SizeF(this.ColorElement.DesiredSize.Width, this.TextElement.DesiredSize.Height + this.ColorElement.DesiredSize.Height + litersElement.DesiredSize.Height + productElement.DesiredSize.Height);
                }
                else
                {
                    result = new SizeF(this.ColorElement.DesiredSize.Width + this.TextElement.DesiredSize.Width + litersElement.DesiredSize.Width + productElement.DesiredSize.Width, Math.Max(this.TextElement.DesiredSize.Height, this.ColorElement.DesiredSize.Height));
                }

                return result;
            }

            protected override SizeF ArrangeOverride(SizeF finalSize)
            {
                SizeF size = base.ArrangeOverride(finalSize);
                RectangleF clientRect = this.GetClientRectangle(finalSize);

                if (this.Orientation == Orientation.Vertical)
                {
                    this.TextElement.Arrange(new RectangleF(clientRect.Location, this.TextElement.DesiredSize));
                    this.ColorElement.Arrange(new RectangleF(clientRect.X, clientRect.Y + this.TextElement.DesiredSize.Height, clientRect.Width, this.ColorElement.DesiredSize.Height));
                    this.litersElement.Arrange(new RectangleF(clientRect.X, clientRect.Y + this.TextElement.DesiredSize.Height + this.ColorElement.DesiredSize.Height, clientRect.Width, this.litersElement.DesiredSize.Height));
                    this.productElement.Arrange(new RectangleF(clientRect.X, clientRect.Y + this.TextElement.DesiredSize.Height + this.ColorElement.DesiredSize.Height + this.litersElement.DesiredSize.Height,
                        clientRect.Width, this.productElement.DesiredSize.Height));
                }
                else
                {
                    this.ColorElement.Arrange(new RectangleF(clientRect.Location, this.ColorElement.DesiredSize));
                    this.TextElement.Arrange(new RectangleF(clientRect.X + this.ColorElement.DesiredSize.Width, clientRect.Y, this.TextElement.DesiredSize.Width, this.TextElement.DesiredSize.Height));
                    this.litersElement.Arrange(new RectangleF(clientRect.X + this.ColorElement.DesiredSize.Width + this.TextElement.DesiredSize.Width, clientRect.Y, this.litersElement.DesiredSize.Width, this.litersElement.DesiredSize.Height));
                    this.productElement.Arrange(new RectangleF(clientRect.X + this.ColorElement.DesiredSize.Width + this.TextElement.DesiredSize.Width + this.litersElement.DesiredSize.Width,
                        clientRect.Y, this.productElement.DesiredSize.Width, this.productElement.DesiredSize.Height));
                }

                return size;
            }
        }

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best.

Victor

commented on 28 May 2022, 09:44 AM

Hello Dess,

Your answer is highly appriciated. I have a few followup questions though : I have succeeded in changind the alignment of the literselement, but when trying to change backgroundcolor or border, nothing happens. Do I forget something?

Kind Regards

This is my result.

protected override void CreateChildElements()
{
base.CreateChildElements();
litersElement = new LightVisualElement() { Text = "test" };
litersElement.AutoSize = false;
Size s = new Size(100, 20);
litersElement.Size = s;
litersElement.TextAlignment = ContentAlignment.MiddleRight;
litersElement.BackColor = Color.Red;
litersElement.BorderBottomColor = Color.Black;
productElement = new LightVisualElement() { Text = "eho" };
this.Children.Add(productElement);
this.Children.Add(litersElement);

}

I am trying to get the literselement changed (Aligned right and a different backgroundcolor)

Victor

commented on 28 May 2022, 10:05 AM

Found it... DrawBorder and DrawBackground...

Dess | Tech Support Engineer, Principal

commented on 30 May 2022, 12:31 PM

Hi, Victor,

I am glad that you have found a suitable solution for your case. However, please have in mind that there are other properties as well that may affect the border or fill color according to the currently applied theme:

            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                litersElement = new LightVisualElement() { Text = "test", 
                    BackColor= Color.Yellow, 
                    GradientStyle= GradientStyles.Solid, 
                    DrawFill=true, 
                    BorderColor= Color.Red, 
                    BorderBoxStyle = BorderBoxStyle.SingleBorder, 
                    BorderGradientStyle = GradientStyles.Solid,
                    DrawBorder=true };
                productElement = new LightVisualElement() { Text = "eho" };
                this.Children.Add(litersElement);
                this.Children.Add(productElement);
            }

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Add Image to Map Legend

6 Answers, 1 is accepted