Category Archives: Web GIS

Menampilkan Virtual Earth di ASP.net

Windows Live merupakan kumpulan servis dan software dari Microsoft terutama untuk aplikasi web. Untuk menambahkan dan menggunakan Windows Live ke aplikasi ASP.NET bisa digunakan Windows Live™ Tools for Microsoft® Visual Studio® 2008. Salah satu kontrol yang tersedia di Windows Live tools adalah Virtual Earth tool. Kontrol ini memungkinkan programer ASP.NET menambahkan peta dari Virtual Earth tanpa menggunakan javascript sedikitpun. Dan peta yang dihasilkan tetap dapat berinteraksi di client berkat dukungan AJAX.

Read the rest of this entry

Bagian 3: Proses dari mapcontrol ke layercontrol

Ini merupakan artikel ketiga tentang pembuatan layercontrol di MapXtreme.

  1. artikel pertama membahas pembuatan desain layercontrol
  2. artikel kedua membahas tentang proses dari layercontrol ke mapcontrol.

Untuk artikel ketiga ini akan dibahas mengenai proses yang terjadi dari mapcontrol ke layercontrol. Ketika mapcontrol mengalami perubahan, misal akibat zoom in/out, layer-layer tertentu mungkin akan berubah visibilitynya. Ketika terjadi perubahan tersebut maka secara otomatis layercontrol harus merubah informasi layer di dalamnya.

Read the rest of this entry

Bagian 2: Proses dari layercontrol ke mapcontrol

Seri kedua artikel yang membahas pembuatan layer kontrol di mapxtreme.

Di artikel sebelumnya, dibahas bagaimana membuat tampilan layercontrol menggunakan gridview dan sebuah button. Dibagian kedua ini, dibahas bagaimana proses yang terjadi ketika button di klik, bagaimana melakukan perubahan di mapcontrol sesuai dengan perubahan di layercontrol.

Read the rest of this entry

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.

Read the rest of this entry

MapXtreme: Membuat LayerControl

Layercontrol merupakan salah satu tool yang tersedia di MapXtreme web. Tetapi desainnya yang tidak menarik dan kemampuannya menampilkan seluruh layer yang ada di MWS menjadikan layercontrol jarang dipakai.

Layer kontrol mapXtreme

Tampilan LayerControl bawaan MapXtreme

Terinspirasi dari website SISN Bakosurtanal yang menggunakan MapXtreme, saya mencoba membuat layercontrol seperti yang ada di SISN.

LayerControl SISN

LayerControl SISN

Karena kode untuk membuat layercontrol cukup panjang, artikel di pecah menjadi 3 bagian

Bagian 1: membuat desain tampilan layercontrol

Bagian 2: Proses dari layercontrol ke mapcontrol

Bagian 3: Proses dari mapcontrol ke layercontrol

Happy coding

Menambahkan Google Map ke Aplikasi Web ASP.NET

Peta Google sekarang ini seperti sudah menjadi acuan dalam pembuatan aplikasi GIS. Dalam setiap kesempatan, sering ditanyakan, apakah aplikasi yang dibangun bisa terintegrasi dengan peta Google? Apakah tampilan petanya seperti tampilan peta Google? Bisakah memplot data yang ada di aplikasi kita ke peta Google?.

Menambahkan peta Google ke aplikasi web GIS sebenarnya bisa dikatakan ‘gampang-gampang susah’. Susahnya (baca: merepotkan) adalah penggunaan Google Map API. API ini adalah kode yang diberikan Google sesuai dengan domain yang kita daftarkan. Biasanya domain yang kita dafarkan adalah domain server dimana aplikasi akan di publish. Sedangkan pada masa pengembangan (pembuatan) aplikasi sering kita menggunakan komputer lokal atau laptop bukan di server. Akibatnya ada kendala pada saat ingin mencoba kode yang kita buat. Peta Google tidak akan muncul jika kode API tidak sesuai . Jadi harus bolak-balik ke server.

Untuk menambahkan peta Google bisa menggunakan beberapa cara, salah satunya adalah kode javascript yang cukup panjang. Yang menjadi masalah ketika menggunakan kode javascript adalah jika ingin menggabungkan data dengan kode javascript. Seperti diketahui aplikasi ASP.NET berjalan di server sedangkan javascript berjalan di client. Salah satu cara mengatasi hal ini adalah menuliskan kode javascript di
code behind yang berjalan di server.

Contoh berikut adalah potongan program untuk menambahkan peta Google ke aplikasi ASP.NET menggunakan javascript yang ditulis di codebehind:

Dim builder As New StringBuilder()
builder.Append("<script type='text/javascript'>" & vbCr)
builder.Append("//<![CDATA[" & vbCr)
builder.Append(vbCr)
builder.Append("function load() {" & vbCr)
builder.Append("if (GBrowserIsCompatible()) {" & vbCr)
builder.Append("var map = new GMap2(document.getElementById('map'));" & vbCr)
builder.Append("map.addControl(new GLargeMapControl());" & vbCr)
builder.Append("map.addControl(new GMapTypeControl());" & vbCr)
builder.Append("map.addControl(new GScaleControl());" & vbCr)
builder.Append("map.setCenter(new GLatLng(" & yy & "," & xx & "), 13, G_NORMAL_MAP);" & vbCr)
builder.Append(vbCr)
builder.Append("var point = new GLatLng(" & yy & "," & xx & ");" & vbCr)
builder.Append("var marker = createMarker(point,'gajah 22');" & vbCr)
builder.Append("map.addOverlay(marker);" & vbCr)
builder.Append("}" & vbCr)
builder.Append("}" & vbCr)
builder.Append(vbCr)
'Buat tanda di peta Google
builder.Append("function createMarker(point,number)" & vbCr)
builder.Append("{" & vbCr)
builder.Append("var marker = new GMarker(point);" & vbCr)
builder.Append("var html = number;" & vbCr)
builder.Append("GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(html);});" & vbCr)
builder.Append("return marker;" & vbCr)
builder.Append("};" & vbCr)
builder.Append(vbCr)
builder.Append("//]]>" & vbCr & "</script>" & vbCr)
builder.Append(vbCr)

yy dan xx di baris pertengahan adalah variabel untuk memasukkan nilai koordinat latitude dan longitude yang akan di plotkan ke peta Google.

Cara kedua untuk menambahkan peta Google ke aplikasi web ASP.NET adalah menggunakan tool atau dll dari pihak ketiga. Cara ini lebih mudah daripada cara pertama.

  • Download SubGurim wrapper dll disini http://en.googlemaps.subgurim.net/descargar.aspx
  • Unzip dan masukkan file Gmaps.dll ke folder Bin di aplikasi ASP.NET
  • Tambahkan di toolbox, pilih menu Tools – Choose Toolbox Items. Browse ke file Gmaps.dll yang ada di folder Bin. Di tool box akan tampak seperti ini

Google map toolbar

  • Buat web page baru dan drag GMap dari toolbox ke page, Gmap control muncul di page.
  • Dapatkan Google Map API disini, http://www.google.com/apis/maps/ .
  • Buka web config, masukkan key API di kode berikut
<appSettings>
 <add key= "googlemaps.subgurim.net" value= " CopyKodeAPIdiSini " />
</appSettings>
  • Tambahkan contoh kode berikut di event Page Load
Dim alamat As String
Dim keyAPI As String = ConfigurationManager.AppSettings("googlemaps.subgurim.net")
Dim GeoCode As Subgurim.Controles.GeoCode

alamat = "Jalan Ciputat Raya. Jakarta. Indonesia"
GeoCode = Subgurim.Controles.GMap.geoCodeRequest(alamat, keyAPI)
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, _
GeoCode.Placemark.coordinates.lng)

GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
Dim oMarker As New Subgurim.Controles.GMarker(gLatLng)
GMap1.addGMarker(oMarker)
  • Tekan F5 untuk menjalankan aplikasinya. Hasilnya seperti ini

Hasil

Jika ingin menampilkan lokasi tertentu berdasarkan koordinat lat dan long, seperti contoh javascript diatas, ganti variabel gLatLng menjadi seperti ini

Dim gLatLng As New Subgurim.Controles.GLatLng(-6.93395,107.620857)

Happy Coding…
Jika ada pertanyaan atau yang lainnya silahkan tulis di komentar.

Contoh kode cara kedua selengkapnya dapat di download di sini

Membangun aplikasi Web GIS Menggunakan MapXtreme tanpa template

Template yang disediakan mapXtreme pada kenyataannya sering tidak sesuai dengan desain web kita. Karena itu kita perlu membuat desain sendiri tanpa menggunakan template yang disediakan.

Berikut ini kita akan membuat aplikasi web gis mapXtreme sederhana tanpa menggunakan template yang tersedia.
Untuk membuatnya sama seperti membuat aplikasi web ASP.net pada umumnya.

  1. Dari Visual Studio pilih menu File – New Web Site
  2. Di window template pilih ASP.NET web site.
  3. Dari toolbox drag tool MapControl, ZoomInTool dan ZoomOutTool.
  4. Perhatikan di Solution explorer, ada tambahan satu folder baru MapXtremeWebResources. Semua file pendukung dari mapXtreme tersimpan di folder ini. Jika ingin mengganti image dari tool dapat diubah disini.

    Panel solution explorer

  5. Klik MapControl dan ubah property MapAlias

    Panel MapControl properties

  6. Klik pada ZoomIn dan ZoomOut tool dan ubah property MapControlID, isi dengan MapControl1. MapControl1 adalah ID dari MapControl.

    ZoomIn tool properties

  7. Buka file Web.Config. Didalam tab AppConfig tambahkan kode berikut:
    <key="MapInfo.Engine.Session.Pooled" value="False"/>
    <key="MapInfo.Engine.Session.State" value="HttpSessionState"/>
    <key="MapInfo.Engine.Session.Workspace" value="C:\Program Files\MapInfo\MapXtreme\6.8.0\Samples\Data\world.mws"/>

    dan juga ubah tag dibawah, ganti mode=StateServer menjadi InProc.

    <mode="InProc" stateconnectionstring="tcpip=127.0.0.1:42424" sqlconnectionstring="data source=127.0.0.1;user id=sa;password=" cookieless="false" timeout="20">
  8. Pilih menu Debug — Start Debuging,
    Aplikasi web gis sederhana menggunakan mapXtreme berhasil dibuat.

    Hasil... setelah di running

Pada contoh ini, aplikasi dibuat menggunakan metode automatic/InProc sehingga tidak memerlukan code yang pajang.