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

Add Image to Map Legend

6 Answers 118 Views
Map
This is a migrated thread and some comments may be shown as answers.
Lost
Top achievements
Rank 1
Lost asked on 06 Apr 2019, 12:29 PM

Hi Every one.

I want to add images into Map Legend.

I tried a lot but i couldn't.

how can i do this?

thanks...

6 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
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.
0
Lost
Top achievements
Rank 1
answered on 13 Apr 2019, 04:31 AM

Thank you very much for your help. And that your guide helped me a lot. I did not quite understand the explanations you gave me. Do you mean that here I can not ask my questions?
Or is it that it takes a little time to answer the questions without having to ticket support?

 

Thanks....

0
Lost
Top achievements
Rank 1
answered on 13 Apr 2019, 05:29 AM

Dess | Tech Support Engineer, Sr

how can i remove these rectangles?

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 16 Apr 2019, 08:28 AM
Hello,     

In order to eliminate the border, you can simply set the MapLegendItemElement.ColorElement.DrawBorder property to false.

I hope this information helps.

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.
0
Lost
Top achievements
Rank 1
answered on 17 Apr 2019, 07:14 AM
Thanks. But this property  remove border of rectangle  not rectangle. I want to remove those rectangle s.
0
Dess | Tech Support Engineer, Principal
Telerik team
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
Top achievements
Rank 2
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
Telerik team
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
Top achievements
Rank 2
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
Top achievements
Rank 2
commented on 28 May 2022, 10:05 AM

Found it... DrawBorder and DrawBackground...
Dess | Tech Support Engineer, Principal
Telerik team
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);
            }

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