Presentation of Raster Image Transparency

TatukGIS Internet Server LITE Samples

Choose transparency level:

Source code    Project files

This TatukGIS Internet Server LITE sample is designed to show how different raster data sources can be combined in the same project, using partial transparency levels. The semi-transparent overlay of a DOQQ aerial photograph layer is presented against the corresponding segment of a 1861 topographical map. (Select the desired transparency level.) In this fashion, one can see changes that have occurred in the subject area between the 1861 date of the historical map and the date of the DOQQ photographs (late 1990's).

A transparency factor can be applied to both raster and vector layers.

The TatukGIS Aerial Imagery Corrector was used to reference the image data presented in this sample to the same geographic coordinate system.

transparency.aspx    Top 

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

    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)
       GIS.Open( Page.MapPath( "data/photos.ttkgp" ) )
    End Sub
    
    Sub GIS_BeforePaint(sender As Object, e As PaintEventArgs)
       GIS.SetLayerActive("photo_0", False)
       GIS.SetLayerActive("photo_20", False)
       GIS.SetLayerActive("photo_40", False)
       GIS.SetLayerActive("photo_60", False)
       GIS.SetLayerActive("photo_80", False)
       GIS.SetLayerActive("photo_100", False)
       Select Case DropDownListTransparency.SelectedIndex
            Case "0"
                GIS.SetLayerActive("photo_0", True)
            Case "1"
                GIS.SetLayerActive("photo_20", True)
            Case "2"
                GIS.SetLayerActive("photo_40", True)
            Case "3"
                GIS.SetLayerActive("photo_60", True)
            Case "4"
                GIS.SetLayerActive("photo_80", True)
            Case "5"
                GIS.SetLayerActive("photo_100", True)
            Case Else
                GIS.SetLayerActive("photo_0", True)
        End Select
    End Sub

</script>
<html>
<head>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <a name="top">
    <h1>Presentation of Raster Image Transparency
    </h1>
    <h2 class="comment">TatukGIS IS LITE Sample
    </h2>
    <form runat="server">
        <p>
            <asp:Table id="Table1" runat="server" Width="360px" BackColor="#E9E9E9">
                <asp:TableRow>
                    <asp:TableCell>
                        <asp:Label runat="server" id="Label1" cssclass="bold">Choose transparency level: </asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:DropDownList runat="server" AutoPostBack="True" ID="DropDownListTransparency">
                            <asp:ListItem Value="0%">0%</asp:ListItem>
                            <asp:ListItem Value="20%">20%</asp:ListItem>
                            <asp:ListItem Value="40%">40%</asp:ListItem>
                            <asp:ListItem Value="60%">60%</asp:ListItem>
                            <asp:ListItem Value="80%">80%</asp:ListItem>
                            <asp:ListItem Value="100%" Selected="True">100%</asp:ListItem>
                        </asp:DropDownList>
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </p>
        <p>
        </p>
        <table cellspacing="0" cellpadding="0" border="0">
             <tbody>
                 <tr>
                     <td>
                         <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 align="right">
                         <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="2">
                         <p>
                             <ttkGIS:XGIS_VIEWERIS id="GIS" onclick="GIS_Click" runat="server" OnAfterPaint="GIS_AfterPaint" Height="360px" BorderColor="CornflowerBlue" BorderWidth="1px" OnLoad="GIS_Load" Width="460px"></ttkGIS:XGIS_VIEWERIS>
                         </p>
                     </td>
                 </tr>
             </tbody>
         </table>
    </form>
    </a>
</body>
</html>

photos.ttkgp    Top 

                    
                    
                    
[TatukGIS]

[TatukGIS Layer1]
Path=photo_old.jpg
Visible=true

[TatukGIS Layer2]
Path=photo_new.jpg
Name=photo_0
Transparency=0
Visible=True

[TatukGIS Layer3]
Path=photo_new.jpg
Name=photo_20
Transparency=20
Visible=True

[TatukGIS Layer4]
Path=photo_new.jpg
Name=photo_40
Transparency=40
Visible=True

[TatukGIS Layer5]
Path=photo_new.jpg
Name=photo_60
Transparency=60
Visible=True

[TatukGIS Layer6]
Path=photo_new.jpg
Name=photo_80
Transparency=80
Visible=True

[TatukGIS Layer7]
Path=photo_new.jpg
Name=photo_100
Transparency=100
Visible=True