How to paint different polygons with different colors (at the same InformationLayer)?

8 posts, 0 answers
  1. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 15 Nov 2011 Link to this post

    Hi,

    I have this project where I should draw several polygons in the Information Layer, and should have the ability to paint them on different colors. I tried the following approach (that draws two objects), but it is painting ALL the polygons in the IL with the same color, actually the latest color.

    Seems to me that the colors are being applyed onto the IL and not the polygons. There is a way to use different colors for the different polygons in the same IL, or should I use different IL (one for each polygon)?

    This is my MainPage.xaml.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Threading;
    using System.Windows.Browser;
    using System.Configuration;
    using Telerik.Windows.Controls.Map;
    using System.Collections.ObjectModel;
    using System.Xml.Linq;
     
    namespace YV_GIS
    {
        public partial class MainPage : UserControl
        {
            double _LATITUDE;
            double _LONGITUDE;
     
            private Collection<GeoType> _GeoShapes;
     
            public Collection<GeoType> GeoShapes
            {
                get
                {
                    return this._GeoShapes;
                }
                set
                {
                    this._GeoShapes = value;
                }
            }
     
            public MainPage()
            {
                GeoShapes = new Collection<GeoType>();
                InitializeComponent();
     
                // Initialize Bing map provider
                this.radMap.Provider = new BingMapProvider(MapMode.Aerial, true, "mytoken");
                this.radMap.InitializeCompleted += new EventHandler(radMap_InitializeCompleted);
     
                DrawPolygon(Colors.Gray,Colors.Green, 1,"POLYGON ((-94.264725 45.56285, -94.26535 45.562862, -94.26879 45.56287, -94.26881 45.56248, -94.26838 45.562424, -94.26808 45.56223, -94.26748 45.562176, -94.266174 45.562145, -94.26584 45.562073, -94.26506 45.562, -94.26496 45.56204, -94.26497 45.562084, -94.26473 45.56217))");
                DrawPolygon(Colors.Gray,Colors.Red, 2,"POLYGON ((-94.264725 45.56285, -94.26535 45.562862, -94.26879 45.56287, -94.26473 45.56217))");
            }
     
            private void radMap_InitializeCompleted(object sender, EventArgs e)
            {
                Navigate(CoordToDec(45, 34, 02,"N"), CoordToDec(94, 16, 04,"W"));
                Zoom(5); // 100m
            }
     
            private void DrawPolygon(Color fill, Color stroke, int thick, String coordinates)
            {
                GeoType Poly = new GeoType();
                Poly.Fill = fill;
                Poly.Stroke = stroke;
                Poly.Thick = thick;
                Poly.Geometry = coordinates;
                GeoShapes.Add(Poly);
     
                MySQLReader.Source = GeoShapes;
                MySQLReader.GeospatialPropertyName = "Geometry";
                MyShapeFill.Fill = new SolidColorBrush(fill);
                MyShapeFill.Stroke = new SolidColorBrush(stroke);
                MyShapeFill.StrokeThickness = thick;
            }
     
            private void Navigate(double latitude,double longitude)
            {
                // set current location
                _LATITUDE = latitude;
                _LONGITUDE = longitude;
     
                // pan map
                Location MyLocation = new Location();
                MyLocation.Latitude = _LATITUDE;
                MyLocation.Longitude = _LONGITUDE;
                this.radMap.Center = MyLocation;
            }
     
            private void Zoom(int zoom)
            {
                this.radMap.ZoomLevel = zoom;
            }
     
            // converts full cordinate in degrees,minutes,seconds to decimal value
            private float CoordToDec(int degrees,float minutes,float seconds,string direction)
            {
                int factor = 1;
                if ((direction == "S") || (direction == "W"))
                    factor = -1;
                return (degrees + (minutes / 60) + (seconds / 3600))*factor;
            }
        }
     
        public class GeoType
        {
            private string _geometry;
     
            public string Geometry
            {
                get
                {
                    return this._geometry;
                }
                set
                {
                    this._geometry = value;
                }
            }
        }
    }

    And this is my MainPage.xaml:

    <UserControl x:Class="YV_GIS.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="600" d:DesignWidth="1000"
        xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
     
        <Grid x:Name="LayoutRoot" Background="White" Height="600" Width="1000">
            <telerik:RadMap x:Name="radMap" Width="1000" Height="600">
     
                <telerik:InformationLayer Name="MyInformationLayer">
                     
                    <telerik:InformationLayer.Reader>
                        <telerik:SqlGeospatialDataReader x:Name="MySQLReader" />
                    </telerik:InformationLayer.Reader>
                     
                    <telerik:InformationLayer.ShapeFill>
                        <telerik:MapShapeFill x:Name="MyShapeFill" />
                    </telerik:InformationLayer.ShapeFill>
                     
                </telerik:InformationLayer>
            </telerik:RadMap>
        </Grid>
     
    </UserControl>

    Thanks!
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Nov 2011 Link to this post

    Hello Yan Moura,

    Yes the InformationLayer.ShapeFill property is applied to all objects of information layer. So, you can't use it this way.

    When you use the SqlGeospatialDataReader to read objects to information layer then I recommend to use the PreviewReadCompleted event to set color to the polygons. The SqlGeospatialDataReader exposes all public properties of class which represents the item to the ExtendedData property of the map shape. So, you can get colors using the ExtendedData.GetValue method.
    The sample code is below.
    <telerik:InformationLayer Name="MyInformationLayer">
        <telerik:InformationLayer.Reader>
            <telerik:SqlGeospatialDataReader x:Name="MySQLReader" PreviewReadCompleted="Reader_PreviewReadCompleted" />
        </telerik:InformationLayer.Reader>
    </telerik:InformationLayer>

    private void Reader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
    {
        if (eventArgs.Error == null)
        {
            foreach (MapShape shape in eventArgs.Items)
            {
                ExtendedData extendedData = shape.ExtendedData;
                if (extendedData != null)
                {  
                    Color fill  = (Color)shape.ExtendedData.GetValue("Fill");
                    shape.Fill = new SolidColorBrush(fill);
     
                    Color stroke  = (Color)shape.ExtendedData.GetValue("Stroke");
                    shape.Stroke = new SolidColorBrush(stroke);
     
                    double strokeThickness  = (double)shape.ExtendedData.GetValue("StrokeThickness");
                    shape.StrokeThickness = strokeThickness;
                }
            }
        }
    }

    Greetings,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 18 Nov 2011 Link to this post

    Hi Andrey,

    Thanks for replying. I will surely save this solution!

    However in the meantime I have found a different approach by creating a different layer information for each object, then I can control them more effectively.

    Yan
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 22 Nov 2011 Link to this post

    Hi Yan Moura,

    It is not a good idea to create a separate information layer for every element on the map. When map contains many elements this approach dramatically decreases the panning and zooming speed.

    Kind regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 22 Nov 2011 Link to this post

    Andrey,

    Well, I HAVE to have control over each polygon color and If I cannot have different polygons with different colors within the same information layer, the only way to go is to have a different Information Layer for each polygon. Agree? Or am I missing something here?

    Thanks,

    Yan
  7. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 25 Nov 2011 Link to this post

    Hello Yan Moura,

    I should say that I completely disagree with this. You definitely can have polygons with different colors on the same information layer. Check again my post from November 18, 2011  where I provided you with the code that can be used to set different colors for different polygons on the same information layer.

    Greetings,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 07 Dec 2011 Link to this post

    Hi Andrey,

    Thanks for the example.

    I have changed completely the approach of my app, and now I am using PreviewReaderComplete. However, I just bumped to another obstacle. I have tried several different ways, but I cannot achieve how to set the ExtendedData.

    I understood that the ExtededData will carry the colors (and other stuff) for each polygon, and once the reading is complete, it will update these values into each respective polygon, and this is really cool.

    For the polygons coordinates, I can just pass a collection as a source from where they will be read. In the same way, if I have a collection of colors (one color for each polygon), how can I pass each one of these colors to the proper polygon extended property?

    I searched for some example in the Telerik documentation DB but couldn't find anything that could help me with this.

    Here an example of what I have so far:

    ExtendedProperty FillProp = new ExtendedProperty("Fill", "Fill", typeof(Color), Colors.Yellow);
    ExtendedProperty StrokeProp = new ExtendedProperty("Stroke", "Stroke", typeof(Color), Colors.Purple);
    ExtendedPropertySet mypropset = new ExtendedPropertySet();
    ExtendedData mydata = new ExtendedData(mypropset);
    mypropset.Add("Fill", FillProp);
    mypropset.Add("Stroke", StrokeProp);
    SQLR.ExtendedPropertySet = mypropset;

    So, I can create the properties and set values to it, but they are setting the same for ALL polygons, so all of them are being painted with the same color. I would like to be able to set a different color for each one, and I believe that the way to do that would be setting a collection of colors to the collection of polygons, but cannot see how to do that...

    I hope my question does make sense!

    Thanks,

    Yan
  9. Yan Moura
    Yan Moura avatar
    33 posts
    Member since:
    Feb 2010

    Posted 07 Dec 2011 Link to this post

    Hey Andrey,

    Again, I figured this out. It turned too much more simple than I supposed. I think I was over complicating things!

    I found that this is just a matter of simply to add the necessary properties to the collection whose is pointed to SqlGeospatialDataReader.Source and load the values into the list.

    Cheers!
Back to Top
DevCraft banner