ComponentOne Maps for ASP.NET Web Forms
User Scenarios / Display Meridians and Parallels
In This Topic
    Display Meridians and Parallels
    In This Topic

    You can add a C1VectorLayer over the maps control and place polylines and placemarks on the vector layer, to represent meridians and parallels. Such maps can be used to determine the exact location of a place. Meridians represent degrees of longitude and shows the distance of a place from the prime meridian whereas parallels represent degrees of latitude and distance of a place from the equator.

    Complete the following steps:

    In the Designer

    1. In Visual Studio, create a new ASP.Net Web Application and add a new Web Form.
    2. Locate the C1Maps control in the toolbox and place it onto the Web Form.
    3. Right click the control and select Properties from the context menu to open the Properties window.
    4. Set the Height and Width as per the requirement.
    5. Click the ellipsis button (...) next to the Layers property to open the C1Layers Collection Editor.
    6. 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.
    7. Expand the Placemark property group and set the LabelVisibility to AutoHide.

    After completing the above steps, complete the steps given in code view.

    In Source View

    Add the following markup to the form to add a C1Maps control containing a C1VectorLayer in Source View:

    Source View
    Copy Code 
     <c1:C1Maps ID="C1Maps1" runat="server" Height="475px" Width="756px" 
    ShowTools="True" Source="BingMapsAerialSource" Zoom="2">
    <Layers>
        <c1:C1VectorLayer>
            <Placemark LabelVisibility="AutoHide" />
        </c1:C1VectorLayer>
    </Layers>
</c1:C1Maps>

    In Code

    1. Initialize the elements to draw polylines on the vector layer as shown below:
      C#
      Copy Code 
      private readonly Color _lineColor = ColorTranslator.FromHtml("#d3d3d3");
private const double StrokeOpacity = 0.6;
private const double StrokeWidth = 1;
private const string StrokeDashArray = "- ";

      VB
      Copy Code 
      Private ReadOnly _lineColor As Color = ColorTranslator.FromHtml("#d3d3d3")
Private Const StrokeOpacity As Double = 0.6
Private Const StrokeWidth As Double = 1
Private Const StrokeDashArray As String = "- "

    2. Next, define the following method to generate vectors on the vector layer.
      C#
      Copy Code 
      private IEnumerable<C1VectorItemBase> GetVectorsData()
{
    var vectors = new List<C1VectorItemBase>();
    for (var lon = -180; lon <= 180; lon += 30)
    {
        var vector = new C1VectorPolyline
        {
            Stroke = _lineColor,
            StrokeOpacity = StrokeOpacity,
            StrokeWidth = StrokeWidth,
            StrokeDashArray = StrokeDashArray
        };
        vector.Points.Add(new PointD(lon, 85));
        vector.Points.Add(new PointD(lon, -85));
        vectors.Add(vector);
        var lbl = Math.Abs(lon) + "°";
        if (lon > 0)
        {
            lbl += "E";
        }
        else if (lon < 0)
        {
            lbl += "W";
        }
        var placemark = new C1VectorPlacemark
        {
            Name = lbl,
            Point = new PointD(lon, 0)
        };
        vectors.Add(placemark);
    }
    for (var lat = -80; lat <= 80; lat += 20)
    {
        var vector = new C1VectorPolyline
        {
            Stroke = _lineColor,
            StrokeOpacity = StrokeOpacity,
            StrokeWidth = StrokeWidth,
            StrokeDashArray = StrokeDashArray
        };
        vector.Points.Add(new PointD(-180, lat));
        vector.Points.Add(new PointD(180, lat));
        vectors.Add(vector);
        var lbl = Math.Abs(lat) + "°";
        if (lat > 0)
        {
            lbl += "N";
        }
        else if (lat < 0)
        {
            lbl += "S";
        }
        var placemark = new C1VectorPlacemark
        {
            Name = lbl,
            Point = new PointD(0, lat)
        };
        vectors.Add(placemark);
    }
    return vectors;
}

      VB
      Copy Code 
      Private Function GetVectorsData() As IEnumerable(Of C1VectorItemBase)
    Dim vectors = New List(Of C1VectorItemBase)()
    For lon As Int16 = -180 To 180 Step 30
        Dim vector As New C1VectorPolyline()
        vector.Stroke = _lineColor
        vector.StrokeOpacity = StrokeOpacity
        vector.StrokeWidth = StrokeWidth
        vector.StrokeDashArray = StrokeDashArray
        vector.Points.Add(New PointD(lon, 85))
        vector.Points.Add(New PointD(lon, -85))
        vectors.Add(vector)
        Dim lbl As String
        lbl = Math.Abs(lon).ToString + "°"
        If lon > 0 Then
            lbl += "E"
        ElseIf lon < 0 Then
            lbl += "W"
        End If
        Dim placemark As New C1VectorPlacemark()
        placemark.Name = lbl
        placemark.Point = New PointD(lon, 0)
        vectors.Add(placemark)
    Next
    For lat As Int16 = -80 To 80 Step 20
        Dim vector = New C1VectorPolyline()
        vector.Stroke = _lineColor
        vector.StrokeOpacity = StrokeOpacity
        vector.StrokeWidth = StrokeWidth
        vector.StrokeDashArray = StrokeDashArray
        vector.Points.Add(New PointD(-180, lat))
        vector.Points.Add(New PointD(180, lat))
        vectors.Add(vector)
        Dim lbl As String
        lbl = Math.Abs(lat).ToString + "°"
        If lat > 0 Then
            lbl += "N"
        ElseIf lat < 0 Then
            lbl += "S"
        End If
        Dim placemark As New C1VectorPlacemark()
        placemark.Name = lbl
        placemark.Point = New PointD(0, lat)
        vectors.Add(Placemark)
    Next
    Return vectors
End Function

    3. Finally, add the following code to the Page_Load event to add vectors to the vector layer by calling the method GetVectorsData(), as shown below:
      C#
      Copy Code 
      (C1Maps1.Layers[0] as C1VectorLayer).DataWijJson.Vectors.AddRange(GetVectorsData());

      VB
      Copy Code 
      TryCast(C1Maps1.Layers(0), C1VectorLayer).DataWijJson.Vectors.AddRange(GetVectorsData())

    What You've Accomplished

    When you run the project, notice that meridians and parallel have been added onto the map.