Designing the tutorial user interface (c# mapscript tutorial, part 4)

Create an ASP .NET C# Project

Open Visual Studio, create a new ASP .NET C# Project called TutorialMapServer:

Insert application key value in web.config

Open web.config and add the following appSettings section under configuration section:

<configuration>
  <appSettings>
    <!--  Path to MapFile -->
    <add key="mapFilePath" 
         value = " C:\training\mapServerTutorial\data\csharptutorial.map"
    />
  </appSettings> 
  <!--  ........ -->
</configuration>

For the key mapFilePath be sure to put the right path to the map file (also a relative path is valid).

Create the main web form

Add a WebForm called Default.aspx:

On Default.aspx page add the following controls, like in the picture (use a table and flowlayout):

a button named butRefresh;
a button named butFullExtent;
a button named butClear;
a imageButton named ibMap;
a checkBoxList named cblLayers;
a dropdownlist named ddlLayers;
a label named lblInfo;
a literal named litIdentifyResult;

item with value 0, text “Zoom In”Â and selected true;
item with value 1, text “Zoom Out”Â
item with value 2, text “Identify”
item with value 3, text “Add Point”

For doing so you can copy and paste this HTML code in the HTML View of Default.aspx page in Visual Studio:

	<body>
		<form id="Form1" method="post" runat="server">
			<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="500" border="0">
				<TR>
					<TD colSpan="3">
						<P align="center"><STRONG>C# <STRONG>MapServer </STRONG>Tutorial, by Paolo Corti 
								(26/07/2006)</STRONG></P>
					</TD>
				</TR>
				<TR>
					<TD colSpan="3">
						<P align="center">User:
							<asp:TextBox id="txtUser" runat="server">Paolo</asp:TextBox></P>
					</TD>
				</TR>
				<TR>
					<TD style="HEIGHT: 186px">Layer's visibility (check to make it visible)
						<asp:checkboxlist id="cblLayers" runat="server"></asp:checkboxlist><asp:button id="butRefresh" runat="server" Text="Refresh Map"></asp:button></TD>
					<TD style="HEIGHT: 186px"><asp:imagebutton id="ibMap" runat="server" BorderWidth="1px"></asp:imagebutton></TD>
					<TD style="HEIGHT: 186px">Select a GIS action to perform on the Map:
						<asp:radiobuttonlist id="rblGisTools" runat="server" Width="93px">
							<asp:ListItem Value="0" Selected="True">Zoom In</asp:ListItem>
							<asp:ListItem Value="1">Zoom Out</asp:ListItem>
							<asp:ListItem Value="2">Identify</asp:ListItem>
							<asp:ListItem Value="3">Add Point</asp:ListItem>
						</asp:radiobuttonlist>
						<asp:button id="butFullExtent" runat="server" Text="Full Extent"></asp:button><br>
						<asp:Button id="butClear" runat="server" Text="Clear Active Point Layer"></asp:Button></TD>
				</TR>
				<TR>
					<TD colSpan="3">Select the active layer (to identify):
						<asp:dropdownlist id="ddlLayers" runat="server"></asp:dropdownlist></TD>
				</TR>
				<TR>
					<TD colSpan="3"><asp:label id="lblInfo" runat="server" Font-Bold="True" ForeColor="Red"></asp:label></TD>
				</TR>
				<TR>
					<TD colSpan="3">
						<asp:Literal id="litIdentifyResult" runat="server"></asp:Literal></TD>
				</TR>
			</TABLE>
		</form>
	</body>

Create the MapStream web form

Add a second web form called MapStream.aspx (we will not use controls on this page, we will use it to send an image stream to ibMap, with the map produced by MapServer)

Share and Enjoy: