Measuring Distance & Area

TatukGIS Internet Server Samples


Source code

This TatukGIS Internet Server sample demonstrates how to create a tool to perform the on-line measurement of distances and areas. The WKT format is used to remember the shapes.

The measurement line or polygon drawn by the on-line user can be complex, drawn from an unlimited number of vertices.

Zoom in a bit on is map sample and try drawing a polygon to measure an area or a line to measure a distance.

measure.aspx    Top 

                            
                            
<%@ Page Language="VB" Debug="True" %>
<%@ Register TagPrefix="ttkGIS" Namespace="TatukGIS.IS" Assembly="TatukGIS.IS" %>
<script runat="server">

    Dim GisUtils As API.XGIS_Utils

    Sub GIS_FullExtent_Click(sender As Object, e As ImageClickEventArgs)
        GIS.FullExtent
    End Sub

    Sub GIS_ZoomIn_Click(sender As Object, e As ImageClickEventArgs)
        GIS.ZoomIn
    End Sub

    Sub GIS_ZoomOut_Click(sender As Object, e As ImageClickEventArgs)
        GIS.ZoomOut
    End Sub

    Sub GIS_Smaller_Click(sender As Object, e As ImageClickEventArgs)
        GIS.Width  = Unit.Pixel( GIS.Width.Value  - 54 )
        GIS.Height = Unit.Pixel( GIS.Height.Value - 40 )
    End Sub

    Sub GIS_Larger_Click(sender As Object, e As ImageClickEventArgs)
        GIS.Width  = Unit.Pixel( GIS.Width.Value  + 54 )
        GIS.Height = Unit.Pixel( GIS.Height.Value + 40 )
    End Sub


    Sub GIS_Load(sender As Object, e As EventArgs)
        GisUtils = New API.XGIS_Utils

        Dim ll As API.XGIS_LayerSHP

       'add new layers
        ll = New API.XGIS_LayerSHP
        ll.OutCodePage = 1250
        ll.Path = GisUtils.GisSamplesDataDir + "states.shp"
        ll.Name = "states"
        ll.UseConfig = False
        ll.Params.Area.OutlineWidth = 2
        ll.Params.Area.OutlineColor = RGB(100, 100, 100)
        ll.Params.Area.Color = RGB(180, 220, 180)
        GIS.API.Add(ll)

       'add new layers
        ll = New API.XGIS_LayerSHP
        ll.Path = GisUtils.GisSamplesDataDir + "rivers.shp"
        ll.Name = "rivers"
        ll.UseConfig = False
        ll.Params.Line.Color=RGB(70,150,190)
        ll.Params.Line.Width=-2
        GIS.API.Add(ll)

       'set full extent
        GIS.FullExtent()
        GIS.Zoom = GIS.Zoom * 2
        GIS.ImageType = XgisImageType.PNG24

    End Sub


    Sub GIS_Paint(sender As Object, e As PaintEventArgs)
        if Page.IsPostBack then
           'draw a line if necessary
            Draw_WKTLine()
           'draw a polygon if necessary
            Draw_WKTPoly()
        else
            Unselect_All()
        end if
        GIS.Draw()
    End Sub

    Sub GIS_Click(sender As Object, e As ImageClickEventArgs)
        Select Case GIS_Options.SelectedItem.Value
            Case 1
                GIS.Center(e.X, e.Y)
                GIS.ZoomIn
            Case 2
                Table_Dist.Visible = True
                Lbl_Desc.Visible = True
                Lbl_Distance.Visible = True
                GIS_Distance(sender, e)
            Case 3
                Table_Dist.Visible = True
                Lbl_Desc.Visible = True
                Lbl_Distance.Visible = True
                Lbl_Area.Visible = True
                GIS_Area(sender, e)
            Case Else
                GIS.ZoomOut
        End select
    End Sub



    Sub GIS_Options_SelectedIndexChanged(sender As Object, e As EventArgs)
        Unselect_All()
        Select Case GIS_Options.SelectedItem.Value
        Case 2
            Table_Dist.Visible = True
            Lbl_Desc.Visible = True
            Lbl_Distance.Visible = True
            Lbl_Desc.Text = "Measuring Distance:"
            Lbl_Distance.Text = "Click first Point"
        Case 3
            Table_Dist.Visible = True
            Lbl_Desc.Visible = True
            Lbl_Distance.Visible = True
            Lbl_Area.Visible = True
            Lbl_Desc.Text = "Measuring area:"
            Lbl_Distance.Text = "Click first Point"
        End select
    End Sub

    Sub Unselect_All()
        session("wkt_point") = ""
        session("wkt_line") = ""
        session("wkt_poly") = ""
        Table_Dist.Visible = False
        Lbl_Desc.Visible = False
        Lbl_Distance.Visible = False
        Lbl_Area.Visible = False
        Lbl_Desc.Text = ""
        Lbl_Distance.Text = ""
        Lbl_Area.Text = ""
    End Sub


    Sub GIS_Distance(sender As Object, e As ImageClickEventArgs)
        dim p As API.XPoint
        dim p_gis As API.XGIS_Point
        Dim ll as new API.XGIS_LayerVector
        Dim shp as API.XGIS_Shape
        Dim shp2 as API.XGIS_Shape

       'Add a layer to Viewer
        GIS.API.Add( ll )

        dim wkt_line as string
        wkt_line =  session("wkt_line")
        if wkt_line <> "" then
           'create a line from WKT
            shp = GisUtils.GisCreateShapeFromWKT( wkt_line )
            shp = ll.AddShape ( shp )
        else
           'create shapes from first point as point and line
            Lbl_Distance.Text = "Click second point"
            shp = ll.CreateShape(  API.XGIS_ShapeType.XgisShapeTypeArc )
            shp.Lock(2)
            shp.AddPart()
            shp.Unlock()
            shp2 = ll.CreateShape(  API.XGIS_ShapeType.XgisShapeTypePoint )
            shp2.Lock(2)
            shp2.AddPart()
            p = GisUtils.Point(e.X, e.Y )
            p_gis = GIS.API.ScreenToMap(p)
            shp2.AddPoint( GisUtils.GisPoint( p_gis.X, p_gis.Y ) )
            shp2.Unlock()
           'save a point as WKT
            session("wkt_point") = shp2.ExportToWKT()
            shp2.Delete()
        end if

       'add point to line
        p = GisUtils.Point(e.X, e.Y )
        p_gis = GIS.API.ScreenToMap(p)
        shp.Lock(2)
        shp.AddPoint( GisUtils.GisPoint( p_gis.X, p_gis.Y ) )
        shp.Unlock()
       'save a line as WKT
        session("wkt_line") = shp.ExportToWKT()
        shp.Delete()

    End sub

    Sub GIS_Area(sender As Object, e As ImageClickEventArgs)
        Dim shp as API.XGIS_Shape
        Dim shp2 as API.XGIS_Shape
        dim p As API.XPoint
        dim p_gis As API.XGIS_Point
        Dim ll as new API.XGIS_LayerVector


       'Add a layer to Viewer
        GIS.API.Add( ll )

        dim wkt_poly as string
        wkt_poly =  session("wkt_poly")

        if wkt_poly <> "" then
           'Create a shape from WKT
            shp = GisUtils.GisCreateShapeFromWKT( wkt_poly )
            shp = ll.AddShape ( shp )
        else
           'create shapes from first point as point and poly
            Lbl_Distance.Text = "Click second point"
            shp = ll.CreateShape(  API.XGIS_ShapeType.XgisShapeTypePolygon )
            shp.Lock(2)
            shp.AddPart()
            shp.Unlock()
            shp2 = ll.CreateShape(  API.XGIS_ShapeType.XgisShapeTypePoint )
            shp2.Lock(2)
            shp2.AddPart()
            p = GisUtils.Point(e.X, e.Y )
            p_gis = GIS.API.ScreenToMap(p)
            shp2.AddPoint( GisUtils.GisPoint( p_gis.X, p_gis.Y ) )
            shp2.Unlock()
           'save a point as WKT
            session("wkt_point") = shp2.ExportToWKT()
            shp2.Delete()
        end if

       'add point to poly
        p = GisUtils.Point(e.X, e.Y )
        p_gis = GIS.API.ScreenToMap(p)
        shp.Lock(2)
        shp.AddPoint( GisUtils.GisPoint( p_gis.X, p_gis.Y ) )
        shp.Unlock()
       'save a poly as WKT
        session("wkt_poly") = shp.ExportToWKT()
        shp.Delete()

    End sub

    Sub Draw_WKTPoint()
        Dim shp as API.XGIS_Shape
        dim ll as new API.XGIS_LayerVector
        dim wkt_point as string

        wkt_point =  session("wkt_point")
       'draw first point of line or area
        if (wkt_point <> "") then
            shp = GisUtils.GisCreateShapeFromWKT( wkt_point )
            shp = ll.AddShape ( shp )

           'Add color to point
            ll.Params.Marker.Color=RGB(36,17,143)
            ll.Params.Marker.Style = API.XGIS_MarkerStyle.XgisMarkerStyleCircle
            ll.Params.Marker.Size = -7
            ll.Params.Marker.OutlineColor=RGB(36,17,143)
            ll.Params.Marker.OutlineWidth=-1

           'Add layer to viewer
            GIS.API.Add( ll )
        end if
    End sub

    Sub Draw_WKTLine()
        Dim shp as API.XGIS_Shape
        dim ll as new API.XGIS_LayerVector
        dim wkt_line as string

        wkt_line =  session("wkt_line")
        if wkt_line <> "" then
            shp = GisUtils.GisCreateShapeFromWKT( wkt_line )
            shp = ll.AddShape ( shp )

           'draw a line if lenth isn't 0
            if shp.Length() > 0 then
               'Add color to line
                ll.Params.Line.Color=RGB(36,17,143)
                ll.Params.Line.Width=-3

               'Add layer to viewer
                GIS.API.Add( ll )
                Lbl_Distance.Text = "Distance = " &FormatNumber(shp.Length(),2) & " m"
                session("wkt_point") = ""
            else
                Draw_WKTPoint()
            end if
        end if
    End sub

    Sub Draw_WKTPoly()
        Dim shp as API.XGIS_Shape
        dim ll as new API.XGIS_LayerVector
        dim wkt_poly as string

        wkt_poly =  session("wkt_poly")
        if wkt_poly <> "" then
            shp = GisUtils.GisCreateShapeFromWKT( wkt_poly )
            shp = ll.AddShape ( shp )

           'draw a poly if lenth isn't 0
            if shp.Length > 0 then
               'Add color to poly
                ll.Params.Area.Pattern=4
                ll.Params.Area.Color=RGB(36,17,143)
                ll.Params.Area.OutlineColor=RGB(36,17,143)
                ll.Params.Area.OutlineWidth=-3

               'Add a layer to Viewer
                GIS.API.Add( ll )

                Lbl_Distance.Text = "Perimeter = " &FormatNumber(shp.Length(),2) & " m"
                Lbl_Area.Text = "Area = " &FormatNumber(shp.Area()/10000,2) & " ha"
                session("wkt_point") = ""
            else
                Draw_WktPoint()
            end if
        end if
    End sub

</script>
<html>
<head>
    <title>TatukGIS IS Sample</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <a name="top">
    <h1>Measuring
    </h1>
    <h2 class="comment"><a href="../../samplesAPI.htm">TatukGIS Internet Server Samples</a>
    </h2>
    <form runat="server">
        <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td width="25%">
                        <asp:ImageButton id="GIS_FullExtent" onclick="GIS_FullExtent_Click" runat="server" ImageUrl="/TatukGIS_IS8/img/fullextent.gif"></asp:ImageButton>
                        <asp:ImageButton id="GIS_ZoomIn" onclick="GIS_ZoomIn_Click" runat="server" ImageUrl="/TatukGIS_IS8/img/zoomin.gif"></asp:ImageButton>
                        <asp:ImageButton id="GIS_ZoomOut" onclick="GIS_ZoomOut_Click" runat="server" ImageUrl="/TatukGIS_IS8/img/zoomout.gif"></asp:ImageButton>
                    </td>
                    <td width="60%">
                        <asp:RadioButtonList id="GIS_Options" runat="server" AutoPostBack="True" OnSelectedIndexChanged="GIS_Options_SelectedIndexChanged" RepeatDirection="Horizontal" Width="160px">
                            <asp:ListItem Value="1" Selected="True">Zoom</asp:ListItem>
                            <asp:ListItem Value="2">Distance</asp:ListItem>
                            <asp:ListItem Value="3">Area</asp:ListItem>
                        </asp:RadioButtonList>
                    </td>
                    <td align="right" width="15%">
                        <asp:ImageButton id="GIS_Smaller" onclick="GIS_Smaller_Click" runat="server" ImageUrl="/TatukGIS_IS8/img/smaller.gif"></asp:ImageButton>
                        <asp:ImageButton id="GIS_Larger" onclick="GIS_Larger_Click" runat="server" ImageUrl="/TatukGIS_IS8/img/larger.gif"></asp:ImageButton>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <ttkGIS:XGIS_VIEWERIS id="GIS" onclick="GIS_Click" runat="server" Width="360px" OnPaint="GIS_Paint" Height="280px" OnLoad="GIS_Load" BorderColor="CornflowerBlue" BorderWidth="1px"></ttkGIS:XGIS_VIEWERIS>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>
            <br />
        </p>
        <asp:Table id="Table_Dist" runat="server" Width="364px" BorderColor="Navy" BorderWidth="2px" Visible="False" BackColor="LightBlue">
            <asp:TableRow>
                <asp:TableCell>
                    <asp:Label runat="server" id="Lbl_Desc" font-bold="True"></asp:Label>
                    <br />
                    <asp:Label runat="server" id="Lbl_Distance" visible="False"></asp:Label>
                    <br />
                    <asp:Label runat="server" id="Lbl_Area" visible="False"></asp:Label>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
        <p>
            <table cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td align="left" width="510">
                            <a href="#code">Source code</a>
                            <p>
                                This sample shows the use of the TatukGIS Internet Server to measure distance and
                                area. We use in this sample WKT format to remember shapes.
                                <hr />
                            </p>
                            <p>
                            </p>
                            <p>
                            </p>
                            <p>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a name="code">
                            <h2>measure.aspx    <font size="-3"><a href="#top">Top</a></font>
                            </h2>
                            <pre>
                            <!--#include file="code.txt" -->
                            </pre>
                            </a></td>
                    </tr>
                </tbody>
            </table>
        </p>
    </form>
    </a>
</body>
</html>