Membuat Tool Untuk Mendapatkan Koordinat Lokasi

Di artikel sebelumnya telah dibahas bagaimana membuat tool sendiri di mapxtreme sesuai kebutuhan. Tool default dari mapxtreme, diubah fungsi dan cara kerjanya. Untuk membuat tool yang berfungsi mendapatkan koordinat lokasi yang di klik pada peta, digunakan centertool atau pointselectiontool.

Seperti diketahui, peta yang ditampilkan mapxtreme berbentuk image (png, gif). Ketika melakukan klik di peta, yang diperoleh adalah koordinat image. Kemudian koordinat image ini di konversi menjadi koordinat geografis. Semua proses ini terjadi di server,  dan didefiniskan di class. Setelah semua proses selesai, class akan mengirim informasi ke client.

Proses di client dijabarkan menggunakan code javascript. Bagaimana infomasi akan ditampilkan di browser, semuanya dibuat menggunakan javascript.

Pertama buat class dengan nama ClsCoordinat.vb (pake VB.net)

Imports MapInfo
Imports MapInfo.Mapping
Imports MapInfo.WebControls

    ' Mendapatkan koordinat peta
    <Serializable()> Public Class ClsCoordinat

        Inherits MapInfo.WebControls.MapBaseCommand

        Public Sub New()
            MyBase.Name = "ClsCoordinat"
        End Sub

        Public Overrides Sub Process()

            Dim klikPoint As System.Drawing.Point() = Me.ExtractPoints(MyBase.DataString)
            Dim model As MapControlModel = MapControlModel.GetModelFromSession()
            Dim peta As Map = model.GetMapObj(MyBase.MapAlias)

            If peta Is Nothing Then Return

            model.SetMapSize(Me.MapAlias, Me.MapWidth, Me.MapHeight)

            'konversi koordinat image ke koordinat geografis
            Dim dp As MapInfo.Geometry.DPoint

            peta.DisplayTransform.FromDisplay(klikPoint(0), dp)
            Dim koordinat As String = CStr(Math.Round(dp.x, 3)) & " ; " & CStr(Math.Round(dp.y, 3))

            'kirim infomasi koordinat ke client
            HttpContext.Current.Response.Output.Write(koordinat)
        End Sub
    End Class

Buka codebehind dari page tempat tool akan dibuat, tambahkan kode berikut di event Page_Load

If Session.IsNewSession Then
  Dim controlmodel As MapInfo.WebControls.MapControlModel = MapControlModel.SetDefaultModelInSession()
  controlmodel.Commands.Add(New ClsCoordinat)
End If

Buat file javascript (Coordinat.js) untuk menampilkan informasi yang dikirim oleh class diatas.

// JScript File
// script untuk nampilin koordinat titik yang diklik
// Modified by: Mas Dodo & Wida
function getKoordinat(name, interaction)
{
      if (arguments.length > 0) {
           this.Init(name, interaction);
      }
}

getKoordinat.prototype = new MapCommand();
getKoordinat.prototype.constructor = getKoordinat;
getKoordinat.superclass = MapCommand.prototype;
getKoordinat.prototype.Execute = function()
{
      this.CreateUrl();
      this.AddParamToUrl("PixelTolerance", this.pixelTolerance);
      //create an XMLHttp obj to send request to server
      var xmlHttp = CreateXMLHttp();
      xmlHttp.open("GET", this.url, false);
      xmlHttp.send(null);

      //get response back
      this.result = xmlHttp.responseText;
      posisi(event,"Koordinat : " + this.result)
};

//---fungsi untuk menampilkan info koordinat di div----
function posisi(event,tip)
{
posisix= event.clientX + 2;
posisiy= event.clientY + 2;
crot = '<table cellpadding=0 cellspacing=0 border=1><tr><td bgcolor=white width=135 align=center><font size=1><b>' + tip +'</b></font><td bgcolor=gray width=10 align=center><a onclick=notip() class=kursor><b>X</b></a></tr></table>';
document.getElementById("coordinat").style.display = 'block';
document.getElementById("coordinat").style.position='absolute';
document.getElementById("coordinat").style.left= posisix + 'px';
document.getElementById("coordinat").style.top= posisiy + 'px';
document.getElementById("coordinat").style.zIndex = 1;
document.getElementById("coordinat").innerHTML = crot;
};

function notip()
{
document.getElementById("coordinat").style.display = 'none';
};

Buka file ASPX tambahkan kode berikut setelah tag <form>

<script src="Coordinat.js" type="text/javascript"></script>
<div id="coordinat">
</div>

Tambahkan PointSelectionTool atau CenterTool dan ubah propertinya, seperti gambar di bawah

property tool

Ubah 3 property yang di kotak merah

Property ClientCommand isi dengan fungsi javascript yang dibuat sebelumnya getKoordinat
Property Command isi dengan nama class yang dibuat sebelumnya ClsCoordinat
ClientInteraction pilih ClickInteraction.
Sekarang tool baru siap digunakan, Klik tool kemudian klik di peta, maka informasi koordinat lokasi klik akan muncul.

Happy coding

Download Sample

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 12 September 2009, in MapXtreme, Web GIS and tagged , , . Bookmark the permalink. 1 Komentar.

  1. waaa keren sekali programnya, ada sample buat c# sama mapinfo gak pak??? hohoho saya coba utak-atik dulu ah.. terima kasih sudah sharing

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: