Bagian 1: membuat desain tampilan layercontrol

Di artikel sebelumnya telah dijelaskan. Disini akan dijelaskan cara membuat desain layercontrol mapxtreem sesuai dengan tampilan layercontrol di aplikasi SISN.

Layercontrol untuk MapXtreme kita buat menggunakan gridview. Kolom pertama merupakan nama-nama layer, kolom kedua menunjukkan visibility, kolom ketiga menunjukkan label layer. Daftar nama layer bisa ditulis secara manual di gridview atau disimpan di database. Tidak semua layer di MWS dimasukkan ke database, layer yang disimpan di database hanya layer yang akan ditampilkan di layer kontrol. Menggunakan database lebih memudahkan pengkodean dan editing, apabila ada layer yang ditambahkan atau dihapus.

Sekarang tambahkan GridView Control dan sebuah button di file aspx.

<asp:GridView ID="GvLayer" runat="server" BackColor="White" BorderColor="#999999"
BorderStyle="Solid" BorderWidth="1px" CaptionAlign="Left"
CellPadding="3" Font-Names="Arial"
Font-Size="11px" Font-Strikeout="False" ForeColor="Black"
GridLines="Vertical"
HorizontalAlign="Left" Width="100%" DataSourceID="XmlDataSource1"
AutoGenerateColumns="False" >
<Columns>
<asp:BoundField DataField="layeralias" HeaderText="Layer"
 SortExpression="layeralias" />
<asp:TemplateField HeaderImageUrl="~/MapXtremeWebResources/Visible.gif">
  <ItemTemplate>
       <asp:CheckBox ID="cbVis" runat="server" />
  </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderImageUrl="~/MapXtremeWebResources/lclabel.bmp" >
  <ItemTemplate>
       <asp:CheckBox ID="cbLbl" runat="server" />
  </ItemTemplate>
</asp:TemplateField>
<asp:ImageField DataImageUrlField="imgsrc"/>
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<RowStyle HorizontalAlign="Left" BackColor="White" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True"
ForeColor="White" HorizontalAlign="Left" />
<PagerStyle BackColor="DimGray" ForeColor="Black"
HorizontalAlign="Center" />
<HeaderStyle BackColor="DarkGray" Font-Bold="True" ForeColor="White" />
<EditRowStyle HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView>

<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/App_Data/layer.xml"/>

<asp:Button ID="btApply" runat="server" Text="Set Layer"/>

Untuk database layer, sebagai contoh saya menggunakan XML file.

<?xml version="1.0" encoding="utf-8" ?>
<layerlist>
   <layer layeralias="Posisi Strategis" layername="POSISI_STRATEGIS" imgsrc=”/Images/LayerControl/posisi.jpg”/>
   <layer layeralias="Kota" layername ="INDONESIA_CITY_KABUPATEN" imgsrc=”/Images/LayerControl/kota.jpg”/>
   <layer layeralias="Jalan" layername ="INDONESIA_STREET" imgsrc=”/Images/LayerControl/jalan.jpg”/>
   <layer layeralias="Jalur Kereta Api" layername="INDONESIA_RAILWAY" imgsrc=”/Images/LayerControl/rel.jpg”/>
   <layer layeralias="Sungai" layername="INDONESIA_RIVERLAKE" imgsrc=”/Images/LayerControl/sungai.jpg”/>
   <layer layeralias="Batas Kelurahan" layername="INDONESIA_DESA" imgsrc=”/Images/LayerControl/desa.jpg”/>
   <layer layeralias="Batas Kelurahan" layername="INDONESIA_DESA" imgsrc=”/Images/LayerControl/desa.jpg”/>
   <layer layeralias="Batas Kecamatan" layername="INDONESIA_KECAMATAN" imgsrc=”/Images/LayerControl/kecamatan.jpg”/>
   <layer layeralias="Batas Kabupaten" layername="INDONESIA_KABUPATEN" imgsrc=”/Images/LayerControl/kabupaten.jpg”/>
   <layer layeralias="Batas Provinsi" layername="INDONESIA_PROVINSI" imgsrc=”/Images/LayerControl/propinsi.jpg”/>
</layerlist>

Untuk proses layercontrol mempengaruhi mapcontrol akan dibahas di bagian kedua.

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 7 September 2009, in MapXtreme, Web GIS and tagged , , . Bookmark the permalink. 2 Komentar.

  1. kok contoh codingnya jadi aneh tulisannya??

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: