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

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

    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 C1VectorPolyline. A C1VectorPolyline 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:

    Source View
    Copy Code
    <Layers>
        <c1:C1VectorLayer> 
                <DataWijJson>
                    <Vectors>
                        <c1:C1VectorPolyline FillOpacity="0" 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:C1VectorPolyline>
                    </Vectors>
                </DataWijJson>
        </c1:C1VectorLayer>
    </Layers>
    

    In Code

    1. Add the following code to the Page_Load event:
      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 polyline and add it to the layer
      C1VectorPolyline vpl = new C1VectorPolyline();
      vl.DataWijJson.Vectors.Add(vpl);
      
      // Add points to the vector polyline
      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 stroke color and width
      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 polyline and add it to the layer
      Dim vpl As New C1VectorPolyline()
      vl.DataWijJson.Vectors.Add(vpl)
      
      ' Add points to the vector polyline
      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 stroke color and width
      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 polyline.