MapXtreme: Membuat LayerControl Ver.2.0

Sebelumnya, saya telah menulis bagaimana membuat layercontrol di MXT. Versi 2 ini merupakan versi revisi dari versi 1 yang pernah saya tulis sebelumnya. Saya banyak mengalami kesulitan ketika menerapkan v.1. Karena itu saya memutuskan untuk melakukan perubahan kodenya. Apa yang saya catat disini, hanya bagian yang di ubah. Untuk membuat layercontrol secara lengkap, silahkan baca tulisan sebelumnya.

Kesulitan dari LayerControl v.1

  • Daftar layer tergantung pada data yang disiapkan di database. Baca Bagian 1. Sehingga ketika ada layer peta yang ditambahkan di Workspace manager, layer baru ini tidak secara otomatis ditambahkan ke LayerControl.
  • Di client (javascript), proses dari MapControl ke LayerControl (Baca Bagian 3), checkbox yang ada di layercontrol didefinisikan satu persatu, kita perlu tahu ClientID dari masing-masing checkbox. Jika layer peta ditambahkan di workspace manager, susunan layer akan berubah dan ini berarti harus merubah kode javascript secara manual.

Berdasarkan 2 hal di atas, saya membuat perubahan

  • Daftar layer tidak mengacu pada database yang telah disiapkan sebelumnya, tetapi langsung mengacu pada file MWS. Sehingga, jika ada layer baru ditambahkan di workspace manager, secara otomatis layer baru tersebut akan masuk di layercontrol.
  • Kode javascript untuk proses dari mapcontrol ke layercontrol tidak lagi secara manual. Kita tidak perlu tahu ClientID dari masing-masing checkbox, Javascript akan melakukan looping ke tiap baris di layercontrol dan akan menandai chekbox yang sesuai sesuai kondisi layer yang ada.

Mendapatkan Daftar Layer dari MWS
Sebelum mendapatkan daftar layer dari MWS, saya menyiapkan Class objek layer yang berisi informasi-informasi yang akan ditampilkan pada Gridview layercontrol. Class ini tidak wajib, anda bisa menggunakan DataTable atau DataSet. Saya hanya lebih suka menggunakan StrongType daripada DataSet.

Public Class MapLayer
    Private _layername As String
    Private _layeralias As String
    Private _view As Boolean
    Private _label As Boolean
    Private _labelenable As Boolean
    Private _viewenable As Boolean

    ' nama layer
    Public Property LayerName() As String
        Get
            Return _layername
        End Get
        Set(ByVal value As String)
            _layername = value
        End Set
    End Property

    'nama layer alias (nama asli file tab)
    Public Property LayerAlias() As String
        Get
            Return _layeralias
        End Get
        Set(ByVal value As String)
            _layeralias = value
        End Set
    End Property

    'Apakah layer muncul/kelihatan? 
    Public Property View() As Boolean
        Get
            Return _view
        End Get
        Set(ByVal value As Boolean)
            _view = value
        End Set
    End Property

    Public Property ViewEnable() As Boolean
        Get
            Return _viewenable
        End Get
        Set(ByVal value As Boolean)
            _viewenable = value
        End Set
    End Property

    'Apakah label dari layer terlihat?
    Public Property Label() As Boolean
        Get
            Return _label
        End Get
        Set(ByVal value As Boolean)
            _label = value
        End Set
    End Property

    'Apa label tersedia untuk layer?
    Public Property LabelEnable() As Boolean
        Get
            Return _labelenable
        End Get
        Set(ByVal value As Boolean)
            _labelenable = value
        End Set
    End Property
End Class

Public Class LayerCollection
    Inherits CollectionBase

    Default Public Property item(ByVal index As Integer) As MapLayer
        Get
            Return CType(List(index), MapLayer)
        End Get
        Set(ByVal value As MapLayer)
            List(index) = value
        End Set
    End Property

    Public Function Add(ByVal value As MapLayer) As Integer
        Return (List.Add(value))
    End Function

    Public Function IndexOf(ByVal value As MapLayer) As Integer
        Return (List.IndexOf(value))
    End Function

    Public Sub Insert(ByVal index As Integer, ByVal value As MapLayer)
        List.Insert(index, value)
    End Sub

    Public Sub Remove(ByVal value As MapLayer)
        List.Remove(value)
    End Sub

    Public Function Contains(ByVal value As MapLayer) As Boolean
        Return List.Contains(value)
    End Function
End Class

Class MapLayer berisi informasi yang akan di tampilkan di layercontrol. Sedangkan LayerCollection adalah kumpulan dari MapLayer. Anda juga bisa menggunakan generic List(Of MapLayer), daripada Class LayerCollection. Kemudian buat method untuk mendapatkan daftar layer dari MWS.

Public Function GetlayerList(ByVal _peta as Map) As LayerCollection
        Dim lc As New LayerCollection
        Dim layerpeta As MapLayer

        For Each lyr As IMapLayer In _peta.Layers
            If lyr.Type = LayerType.Normal Then
                layerpeta = New MapLayer()
                layerpeta.LayerName = lyr.Name
                layerpeta.LayerAlias = lyr.Alias
                layerpeta.ViewEnable = lyr.Enabled

                If lyr.Enabled Then
                    If (_peta.Zoom.Value > lyr.VisibleRange.RangeEnd) And _
                    (lyr.VisibleRangeEnabled = True) Then
                        layerpeta.View = False
                    Else
                        layerpeta.View = True
                    End If
                    layerpeta.ViewEnable = True
                Else
                    layerpeta.ViewEnable = False
                End If
                lc.Add(layerpeta)
            End If
        Next

        Dim ll As MapInfo.Mapping.LabelLayer = GetLabelLayer(Peta)
        For Each layerpeta In lc
            Try
                layerpeta.LabelEnable = ll.Sources.Item(layerpeta.LayerAlias).Enabled
                If ll.Sources.Item(layerpeta.LayerAlias).Enabled Then
                    If (_peta.Zoom.Value > ll.Sources.Item(layerpeta.LayerAlias).VisibleRange.RangeEnd) And _
                    (ll.Sources.Item(layerpeta.LayerAlias).VisibleRangeEnabled = True) Then
                        layerpeta.Label = False
                    Else
                        layerpeta.Label = True
                    End If
                    layerpeta.LabelEnable = True
                Else
                    layerpeta.LabelEnable = False
                End If
            Catch ex As Exception
                layerpeta.LabelEnable = False
                layerpeta.Label = False
            End Try
        Next
        Return lc
    End Function

Untuk mendapatkan LabelLayer, ada method GetLabelLayer. Kode untuk method ini adalah

Public Shared Function GetLabelLayer(ByVal _peta As Map) As MapInfo.Mapping.LabelLayer
    Dim ll As MapInfo.Mapping.LabelLayer = Nothing
    Dim mle As MapLayerEnumerator = _peta.Layers.GetMapLayerEnumerator(MapLayerFilterFactory.FilterByType(GetType(MapInfo.Mapping.LabelLayer)))
    While mle.MoveNext()
        ll = CType(mle.Current, MapInfo.Mapping.LabelLayer)
    End While
    Return ll
End Function

Setelah didapatkan, daftar layer, dimasukkan ke layerControl. Sama seperti versi sebelumnya, Layercontrol dibuat menggunakan Gridview, dengan sedikit modifikasi. Tambahkan gridview di page, dan setting item kolomnya

<asp:GridView ID="gvLayerCtrl" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:BoundField DataField="LayerName" HeaderText="Nama Layer"  />
    <asp:TemplateField HeaderImageUrl="~/MapXtremeWebResources/Visible.gif">
        <ItemTemplate>
            <asp:CheckBox ID="cbVis" Checked='<%#Bind("View") %>' runat="server" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderImageUrl="~/MapXtremeWebResources/lclabel.bmp">
        <ItemTemplate>
            <asp:CheckBox ID="cbLbl" Enabled='<%#Bind("LabelEnable") %>' Checked='<%#Bind("Label") %>' runat="server"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

Setelah layercontrol siap, tambahkan kode berikut di codebehind di dalam event Page_load

If Not Page.IsPostBack Then
     'lc adalah layercollection. Anggap lc sudah didapatkan dari method GetLayerList
     gvLayerCtrl.DataSource = lc
     gvLayerCtrl.DataBind()
End If

Dengan kode diatas, Daftar layer yang di bind ke gridview diambil langsung dari MWS, sehingga jika ada perubahan layer, layer peta secara otomatis akan merubah daftar di LayerControl.

Kode Javascript Untuk Proses dari MapControl ke LayerControl
Proses dari Mapcontrol ke LayerControl masih sama seperti versi sebelumnya. Saya hanya merubah kode javascript, agar javascript bisa menandai checkbox yang sesuai, tanpa harus mengetahui ClientID dari masing-masing checkbox.

function setLyrControl(dtlyr) {
    lyrstr = new String(dtlyr);

    // dapetin layer controlnya, 'gvLayerCtrl' adalah nama layer controlnya
    var lyrcontrol = document.getElementById('gvLayerCtrl');
    var layer;
    var i;
    var cbshow;
    var cblbl;

    for (i = 1; i < lyrcontrol.rows.length; i++) {
        //layer = lyrcontrol.rows[i].cells[0].childNodes[0].innerText;
        layer = lyrcontrol.rows[i].cells[0].childNodes[0].nodeValue;
        cbshow = lyrcontrol.rows[i].cells[1].childNodes[0]; //checkbox visibility

        if (lyrstr.search(layer.toLowerCase()) >= 0) {
            if (lyrstr.indexOf(layer.toLowerCase() + '0', 0) >= 0) {
               cbshow.disabled = false;
               cbshow.style.backgroundColor = '#ffffff';
               cbshow.checked = true;
            }
            else {
                if (lyrstr.indexOf(layer.toLowerCase() + '1', 0) >= 0) {
                    cbshow.checked = false;
                    cbshow.disabled = true;
                    cbshow.style.backgroundColor = '#ff66cc';
                }
            } 
        }
        cblbl = lyrcontrol.rows[i].cells[2].childNodes[0];  //checkbox label
        if (lyrstr.search(layer.toUpperCase()) >= 0) {
            if (lyrstr.indexOf(layer.toUpperCase() + '0', 0) >= 0) {
                cblbl.disabled = false;
                cblbl.checked = true;
                cblbl.style.backgroundColor = '#ffffff';
            }
            else {
                if (lyrstr.indexOf(layer.toUpperCase() + '1', 0) >= 0) {
                    cblbl.disabled = true;
                    cblbl.checked = false;
                    cblbl.style.backgroundColor = '#ff66cc';
                }
            } 
        }
    }
};


//---- setting untuk layer control di client ----
// -- di versi sebelumnya saya menamakan method ini dengan nama "function getLayerControl()"
function LayerControlClient() {
    var url = "MapController.ashx?Command=LyrControlCommand&Ran=" + Math.random();
    var mapImage = document.getElementById("MapControl1_Image");
    if (mapImage.mapAlias)
        url += "&MapAlias=" + mapImage.mapAlias;

    var xmlHttp = CreateXMLHttp();
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);
    var result = xmlHttp.responseText;

    setLyrControl(result);  
};

Meskipun kemampuan javascript saya sangat buruk. Tapi dibandingkan dengan kode javascript versi sebelumnya, ini jauh lebih sederhana dan aman. Saya tidak perlu merubah clientId dari checkbox, sekali kode ini sukses, perubahan apapun di workspace manager tidak akan menjadi masalah.

Happy Coding.
Contoh kode sample dapat di download disini.

Dibuat menggunakan: MXT 7.0

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 4 Juli 2011, in MapXtreme and tagged , . Bookmark the permalink. Tinggalkan komentar.

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: