Maps for ASP.NET Web Forms
Add a Polygon
Features > Vector Layer > Add a Polygon

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.