ComponentOne Maps for ASP.NET Web Forms
Features / Vector Layer / Add a Polygon
In This Topic
    Add a Polygon
    In This Topic

    You can connect geographic coordinates with a polygon by adding a C1VectorPolygon to the C1VectorLayer (see Vector Layer for more information). In this topic, you create a 3-point polygon.

    In the Designer

    1. Right click the control and select Properties from the context menu to open the Properties window.
    2. Click the ellipsis button (...) next to the Layers property to open the C1Layers Collection Editor.
    3. Click the drop-down arrow on the Add button and select C1VectorLayer. A C1VectorLayer is added to the Layers collection and its properties are displayed on the right side of the C1Layers Collection Editor.
    4. Expand Data property group and set the DataType to WijJson..
    5. Click the ellipsis button (...) next to Vectors property to open the C1VectorItemBase Collection Editor.
    6. Click the drop-down arrow on the Add button and select C1VectorPolygon. A C1VectorPolygon is added to the C1VectorItemBase collection and its properties are displayed on the right side of the C1VectorItemBase Collection Editor.
    7. Set the Fill, FillOpacity, Stroke, StrokeOpacity, StrokeWidth, etc as per your choice.
    8. Click the ellipsis button (...) next to Points property to open the PointD Collection Editor.
    9. Click the Add button three times. Set the X and Y coordinates of the points as shown below:
      Point X Y
      0 -80.15 42.12
      1 -123.08 39.09
      2 -3.90 30.85
    10. Click OK to close the PointD Collection Editor.
    11. Click OK to close the C1VectorItemBase Collection Editor.
    12. Click OK to close the C1Layers Collection Editor.
    13. Press F5 to run the project.

    To know how to manipulate element visibility according to the scaling of the map, please see the Element Visibility section in the topic Vector Layer.

    In Source View

    Add the following markup between the <c1:C1Maps> </c1:C1Maps> tags,  to add a polygon over the maps control:

    Source View
    Copy Code
    <Layers>
        <c1:C1VectorLayer>
                <DataWijJson>
                    <Vectors>
                        <c1:C1VectorPolygon Fill="Snow" Stroke="Yellow" StrokeWidth="2">
                            <Points>
                                <c1:PointD X="-80.15" Y="42.12" />
                                <c1:PointD X="-123.08" Y="39.09" />
                                <c1:PointD X="-3.9" Y="30.85" />
                            </Points>
                        </c1:C1VectorPolygon>
                    </Vectors>
                </DataWijJson>
        </c1:C1VectorLayer>
    </Layers>
    

    In Code

    1. Add the following code to the Page_Load event, to add a polygon over the maps control:
      C#
      Copy Code
      // Create a layer and add it to the map
      C1VectorLayer vl = new C1VectorLayer();
      C1Maps1.Layers.Add(vl);
      
      // Set the datasource Type
      vl.DataType = DataType.WijJson;
      
      //Create a vector polygon and add it to the layer
      C1VectorPolygon vpl = new C1VectorPolygon();
      vl.DataWijJson.Vectors.Add(vpl);
      
      // Add points to the vector polygon
      vpl.Points.Add(new PointD(-80.15, 42.12));
      vpl.Points.Add(new PointD(-123.08, 39.09));
      vpl.Points.Add(new PointD(-3.90, 30.85));
      
      // set the fill, stroke color and stroke width
      vpl.Fill = System.Drawing.Color.Snow;
      vpl.Stroke = System.Drawing.Color.Yellow;
      vpl.StrokeWidth = 2;
      

      VB
      Copy Code
      ' Create a layer and add it to the map
      Dim vl As New C1VectorLayer()
      C1Maps1.Layers.Add(vl)
      
      ' Set the datasource Type
      vl.DataType = DataType.WijJson
      
      'Create a vector polygon and add it to the layer
      Dim vpl As New C1VectorPolygon()
      vl.DataWijJson.Vectors.Add(vpl)
      
      ' Add points to the vector polygon
      vpl.Points.Add(New PointD(-80.15, 42.12))
      vpl.Points.Add(New PointD(-123.08, 39.09))
      vpl.Points.Add(New PointD(-3.9, 30.85))
      
      ' set the fill, stroke color and stroke width
      vpl.Fill = System.Drawing.Color.Snow
      vpl.Stroke = System.Drawing.Color.Yellow
      vpl.StrokeWidth = 2
      
    2. Run the project.

    What You've Accomplished

    The following image depicts a C1Maps control with three geographical coordinates connected by a polygon.