Declined
Last Updated: 20 Mar 2020 11:37 by ADMIN
Yemo
Created on: 19 Mar 2020 09:02
Category: UI for WinForms
Type: Feature Request
0
RadMap Winforms Clusterization - MapCluster Styling

Hello,

 Is there any way to style the MapCluster Grouped Icon/image in RadMap Winforms? Currently it displays a circle with the total number of grouped items. The background Fill colour of the circle is too dark to enable easy viewing of the number in the circle.

It would be good to depending on the grouped item type, to specify an icon to be used in place of the circle also providing an option to put a label underneath to display (eg "34 Houses")

Specifying different clustered Icons based on the "element type" would provide a clearer summary of the different types of items in a specific area.

 Thanks 

1 comment
ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 20 Mar 2020 11:37
Hello, Yemo,

RadMap provides means for changing the default MapCluster elements. If you need to customize any of these elements you can use the MapVisualElementFactory class and override its CreateCluster method. you can make a derivative of MapCluster and override its Paint method where you can draw whatever you need. Here is the default painting logic for the MapCluster element:
        public RadForm1()
        {
            InitializeComponent(); new RadControlSpyForm().Show();

            RadMapElement.VisualElementFactory = new MyMapVisualElementFactory();

            OpenStreetMapProvider osmProvider = new OpenStreetMapProvider();
            MapTileDownloader tileDownloader = osmProvider.TileDownloader as MapTileDownloader;
            tileDownloader.WebHeaders.Add(System.Net.HttpRequestHeader.UserAgent, "your application name");
            osmProvider.EnableCaching = false;
            this.radMap1.MapElement.Providers.Add(osmProvider);

            MapLayer easternLayer = new MapLayer("CitiesLayer");
            this.radMap1.Layers.Add(easternLayer);

            MapPin element = new MapPin(new PointG(40.4467648, -80.01576030));
            element.Text = "Pittsburgh";
            element.BackColor = Color.Red;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(40.8130697, -74.07439790));
            element.Text = "New York";
            element.BackColor = Color.Green;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(42.3665137, -71.06160420));
            element.Text = "Boston";
            element.BackColor = Color.Blue;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(43.6434661, -79.37909890));
            element.Text = "Toronto";
            element.BackColor = Color.Yellow;
            this.radMap1.Layers["CitiesLayer"].Add(element);

            this.radMap1.Layers[0].ClusterStrategy = new DistanceClusterStrategy();
            this.radMap1.Layers["CitiesLayer"].ClusterDistance = 200;
        }

        public class CustomMapCluster : MapCluster
        {
            public override void Paint(Telerik.WinControls.Paint.IGraphics graphics, IMapViewport viewport)
            {
                Graphics g = graphics.UnderlayGraphics as Graphics;

                long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
                object state = graphics.SaveState();
                g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
                graphics.TranslateTransform(this.drawRect.X, this.drawRect.Y);

                for (int i = -1; i < viewport.NumberOfWraparounds; i++)
                {
                    Rectangle rect = new Rectangle((int)(-this.drawRect.Width / 2L + i * mapSize), 
                        (int)(-this.drawRect.Height / 2L), (int)this.drawRect.Width, (int)this.drawRect.Height);
                    GraphicsPath path = new GraphicsPath();
                    path.AddEllipse(rect);

                    FillPrimitiveImpl fill = new FillPrimitiveImpl(this, null);
                    fill.PaintFill(graphics, path, rect);

                    BorderPrimitiveImpl border = new BorderPrimitiveImpl(this, null);
                    border.PaintBorder(graphics, null, path, rect);

                    StringFormat stringformat = new StringFormat();
                    stringformat.Alignment = TelerikAlignHelper.TranslateAlignment(ContentAlignment.MiddleCenter);
                    stringformat.LineAlignment = TelerikAlignHelper.TranslateLineAlignment(ContentAlignment.MiddleCenter);
                    graphics.DrawString(
                        this.ClusteredItems.Count.ToString(),
                        rect,
                        this.Font,
                        this.ForeColor,
                        stringformat,
                        Orientation.Horizontal,
                        false);
                }

                graphics.RestoreState(state);
            }
        }

        public class MyMapVisualElementFactory : MapVisualElementFactory
        {
            public override MapCluster CreateCluster()
            {
                return new CustomMapCluster();
            }
        }
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.