Ferry Kurniawan

Every Accomplishment Start With The Decision to Try
See also: Other Geeks@INDC

April 2010 - Posts

Presenting Spatial Data Using ASPMap Part II

Pada kesempatan kedua ini, kami akan mencoba menampilkan data spatial di SQL Server 2008 dengan menggunakan ASPMap Control seperti di cotoh sebelumnya. Pada contoh di kasus ini ialah menampilkan lokasi Airport yang berada di Amerika. Berikut ini langkah-langkahnya :

1.  Download database DbUSA dan attach ke database SQL Server 2008 anda linknya disini.

2. Buat Website baru beri nama dengan USAirports.  Kemudian tambahkan control DropDownlist ke dalam Default.aspx. Beri nama control tersebut dengan nama ddlState.

ASP_1

3. Tambahkan New Folder di website anda kemudian rename menjadi MAP. Tambahkan semua  file yang berada di folder “C:\Program Files\VDS Technologies\AspMap 4.5\DATA\MAPS\USA” seperti di gambar .

ASP_3

4. Tambahkan New Folder lagi di website anda kemudian rename menjadi Icon. Tambahkan 5 file .gif  yang berada di folder “C:\Program Files\VDS Technologies\AspMap 4.5\DATA\TOOLS” seperti di gambar .

ASP_2

7. Drag n Drop 1 buah control Map kedalam web form Default.aspx

6. Drag n Drop  3 buah  control MapToolButton kedalam Default.aspx

Name ImageURL Map MapTool
zoomin ~/Icon/Zoomin.gif Map1 ZoomIn
zoomout ~/Icon/Zooout.gif Map1 Zoomout
pan ~/Icon/pan.gif Map1 Pan

ASP_4

7. Ketikkan code berikut ini (VB .Net)  kedalam Default.aspx.vb

Imports AspMap
Imports AspMap.Web
Imports System
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            LoadStates()
        End If
        LoadLayer()
    End Sub
    Protected Sub ddlState_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlState.SelectedIndexChanged
        getAirport(ddlState.SelectedValue)
    End Sub
    Sub LoadLayer()
        Dim layer As AspMap.Layer
        Dim MapDir As String = MapPath("MAP/")
 
        ' add states layer
        layer = Map1.AddLayer(MapDir & "states.shp")
        layer.LabelField = "STATE_NAME"
        layer.ShowLabels = True
        layer.LabelFont.Name = "Verdana"
        layer.LabelFont.Size = 12
        layer.LabelFont.Bold = True
        layer.LabelStyle = LabelStyle.PolygonCenter
 
        ' add roads layer
        layer = Map1.AddLayer(MapDir & "roads.shp")
 
        
    End Sub
    Sub LoadStates()
        Dim cn As New SqlConnection("Data Source=pdi-app-laptop\mobile;Initial Catalog=DbUSA;Trusted_Connection=yes;")
        cn.Open()
 
        Dim cmd As New SqlCommand("select distinct [STATE_NAME],STATE_ABBR from [STATES] order by STATE_NAME", cn)
        Dim rdr As SqlDataReader
        rdr = cmd.ExecuteReader
 
        ddlState.Items.Clear()
 
 
        While rdr.Read
            Dim li As New ListItem
            li.Text = Trim("" & rdr(0))
            li.Value = Trim("" & rdr(1))
            ddlState.Items.Add(li)
        End While
        rdr.Close()
        rdr = Nothing
        cmd = Nothing
        cn.Close()
        cn = Nothing
    End Sub
    Sub getAirport(ByVal strState As String)
        Dim cn As New SqlConnection("Data Source=pdi-app-laptop\mobile;Initial Catalog=DbUSA;Trusted_Connection=yes;")
        cn.Open()
 
        Dim cmd As New SqlCommand("select [NAME], [Location].STAsText() from [Airports] where STATE ='" & strState & "'", cn)
        Dim rdr As SqlDataReader
        rdr = cmd.ExecuteReader
 
 
        Map1.Markers.Clear()
        lblFound.Text = ""
        Dim count As Integer
        count = 0
        While rdr.Read
            Dim symbol As New MarkerSymbol("icon/marker.gif", 19, 31)
            Dim x As Double
            Dim y As Double
            Dim tmp As String
            Dim pos As Byte
 
            tmp = Left(Trim("" & rdr(1)), Len(Trim("" & rdr(1))) - 1)
            pos = InStr(tmp, "(", CompareMethod.Text)
            tmp = Right(tmp, Len(tmp) - pos)
 
            Dim arrXY() As String
            arrXY = Split(Trim(tmp), " ", , CompareMethod.Text)
 
            x = arrXY(0)
            y = arrXY(1)
 
            Dim marker As New Marker(New AspMap.Point(x, y), symbol, rdr(0))
            Map1.Markers.Add(marker)
 
            arrXY = Nothing
            count = count + 1
        End While
 
        lblFound.Text = count.ToString & " Airports Found "
 
        rdr.Close()
        rdr = Nothing
        cmd = Nothing
        cn.Close()
        cn = Nothing
    End Sub
 
    
    
End Class

Penjelasan :

- Sub LoadLayer() : untuk menampilkan layer States.shp dan Road.shp ke dalam Map.

- Sub LoadStates() : untuk menampilkan nama-nama states ke di USA ke dalam ddlState (dropdownlist)

- Sub getAirport(ByVal strState As String) : untuk menampilkan data airport sesuai dengan nama state yang dipilih. Data yang dipilih dicari ke database DbUSA tabel Airports kemudian dicari posisi koordinatnya (dengan kueri STAsText() ) lalu membuat Marker / Penanda untuk lokasi dari Airport tersebut (ditampilkan dengan icon marker.gif)

8. Jalankan Default.aspx kemudian pilih salah satu nama state nya maka akan tampil lokasi Airport di wilayah state tersebut.

ASP_5

yang berwarna merah adalah marker untuk lokasi Airport di State tsb.

ASP_6

9. Semoga Bermanfaat & Terima Kasih :)

10. Source Code dapat didownload disini.

Share this post: | | | |
Presenting Spatial Data Using ASPMap Control Part I

Beberapa hari terakhir ini saya mencoba beberapa control untuk menampilkan data spatial di SQL Server 2008. Untuk kesempatan yang pertama ini saya mencoba web mapping component ASPMap dari VDS Technologies (dapat didownload disini). Component ini didesain cukup powerfull untuk pengembangan aplikasi “data spatial”. Pada contoh yang pertama ini saya juga mencoba juga menggunakan Visual Studio 2010 :). Berikut ini langkah-langkahnya :

1. Download file .mdf untuk database DbUSA yang akan kita gunakan di contoh ini (download disini)

2. Extract file .rar tersebut kemudian attach ke database SQL Server 2008 anda. Maka database DbUSA akan siap digunakan.

DB  DB2

3. Buka Visual Studio 2010 anda kemudian buat New Website, simpan dengan nama USAMap. Buat tampilannya seperti berikut.

ASP_1

4. Tambahkan Tab Baru di ToolBox anda dengan cara Add Tab, kemudian simpan dengan nama ASP Map. Pada Tab tersebut klik kanan –> choose items. Cari file AspMapNET.dll  di Folder “C:\Program Files\VDS Technologies\AspMap 4.5\BIN” sampai tampil seperti berikut ini.

ASP_2

5. Tambahkan New Folder di website anda kemudian rename menjadi MAP. Tambahkan 3 file yang berada di folder “C:\Program Files\VDS Technologies\AspMap 4.5\DATA\MAPS\USA” seperti di gambar .

ASP_3

6. Tambahkan New Folder lagi di website anda kemudian rename menjadi Icon. Tambahkan 4 file .gif  yang berada di folder “C:\Program Files\VDS Technologies\AspMap 4.5\DATA\TOOLS” seperti di gambar .

ASP_4

7. Drag n Drop 1 buah control Map kedalam web form Default.aspx

8. Drag n Drop  3 buah  control MapToolButton kedalam Default.aspx

Name ImageURL Map MapTool
zoomin ~/Icon/Zoomin.gif Map1 ZoomIn
zoomout ~/Icon/Zooout.gif Map1 Zoomout
pan ~/Icon/pan.gif Map1 Pan

ASP_5

9. Ketikkan code berikut ini (vb.net) di dalam Default.aspx.vb. 

Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports AspMap
Imports AspMap.Web
Partial Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        LoadLayerFromShp()
        LoadLayerFromDB()
    End Sub
    Private Sub LoadLayerFromShp()
        Dim layer As AspMap.Layer
        Dim MapDir As String = MapPath("MAP/")
        layer = Map1.AddLayer(MapDir & "states.shp")
    End Sub
    Private Sub LoadLayerFromDB()
        Dim strKueri As String = "SELECT *, geom.STAsBinary() AS geomWKB FROM cities"
        Dim cnString As String = "Data Source=pdi-app-laptop\mobile;Initial Catalog=DbUSA;Trusted_Connection=yes;"
 
        Dim da As SqlDataAdapter = New SqlDataAdapter(strKueri, cnString)
        Dim dt As DataTable = New DataTable()
 
        da.Fill(dt)
        da.Dispose()
 
        Dim Layer As Layer = Map1.AddSpatialDataLayer(dt, "geomWKB")
        Layer.LabelField = "CITY_NAME"
        Layer.ShowLabels = True
        Layer.LabelFont.Name = "Verdana"
        Layer.LabelFont.Size = 10
        Layer.LabelFont.Bold = True
        Layer.LabelStyle = LabelStyle.Default
 
    End Sub
    
End Class

Penjelasan :

- Sub LoadLayerFromShp() untuk menampilkan Layer dari file .shp untuk di contoh ini ialah file states.shp

- Sub LoadLayerFromDB() untuk menampilkan layer dari Database DbUSA Tabel cities. Dengan kueri  select ………., nama.kolom.STAsBinary() from tabel  maka data spatial tsb dapat ditampilkan. untuk menampilkan label dari cities tsb dapat anda gunakan perintah layer.showlabels = true, layer.labelfield = namakolom.

10. Jalankan di browser maka tampil map states.shp dan kemudian diatasnya ada layer cities yang diambil dari Database DbUSA. Gunakan zoom in dan zoom out ataupun pan untuk memilih kotanya.

ASP_6

yang berwarna merah adalah nama kota yang diambil dari database.

ASP_7

11. Semoga bermanfaat & Terima Kasih :)

12. Source dapat didownload disini.

Share this post: | | | |
.Net Assembly untuk Mengkonversi Koordinat UTM / Geographic di SQL Server 2008

Sebelum memulai penjelasan tentang “Converter” koordinat UTM ke Geographic ataupun sebaliknya maka ada baiknya kami berikan sedikit pengertian tentang Longitude, Latitude, UTM.

  • Longitude / Garis Bujur : Menggambarkan lokasi sebuah tempat di timur  atau barat Bumi dari sebuah garis utara-selatan yang disebut Meridian Utama.  Longitude diberikan berdasarkan pengukuran sudut yang berkisar dari 0° di Meridian Utama ke +180° arah timur dan -180°  arah barat
  • Latitude / Garis Lintang : garis khayal yang digunakan untuk menentukan lokasi di Bumi terhadap garis khatulistiwa (utara atau selatan). Posisi lintang biasanya dinotasikan dengan simbol huruf Yunani f. Posisi lintang merupakan penghitungan sudut dari 0° di khatulistiwa sampai ke +90° di kutub utara dan -90° di kutub selatan.  Dalam bahasa Indonesia lintang di sebelah utara khatulistiwa diberi nama Lintang Utara (LU), demikian pula lintang di sebelah selatan khatulistiwa diberi nama Lintang Selatan (LS)

Posisi Koordinat Geographic sendiri adalah gabungan antara koordinat Longitude, Latitude misalkan letak Kota Banjarmasin berada pada Posisi Longitude : 114.4xxxx  dan Posisi Latitude : -3.2xxxx   (dapat dilihat pada gambar)

lat-lng-grid

Posisi Koordinat Universal Transverse Mercator (UTM) sendiri adalah metode menentukan posisi koordinat bumi dengan memetakannya secara 2 dimensi dimana dibagi-bagi menjadi kotak-kotak kecil (lokal). Saya contohkan disini misalkan Kota Banjarmasin berada pada Zona 50 S ( South / Selatan). (dapat dilihat pada gambar)

gc1990-utm_zones_on_worldmap

Seperti diketahui bersama bahwa SQL Server 2008  telah mendukung Data Spatial, ini berarti dapat menyimpan Data Spatial dari kedua contoh metode penentuan koordinat diatas (Geographic atau UTM). Tapi bagaimana jika yang disimpan di Database hanya salah satu metode koordinat diatas (Misal UTM), kemudian anda ingin mengkonversi ke Geographic  ataupun sebaliknya. Ikutilah langkah-langkah berikut:

1. Download .Net Assembly yang kami buat disini.  (Jika ingin lengkap dengan Source Code nya disini  dengan Bahasa VB .Net)

 

2. Buka SQL Server 2008 anda, login dan Buat Database Baru bernama SPATIAL.

3. Buatlah Kueri baru untuk membuat Assembly  dan Function di SQL Server 2008. Berikut ini Kuerinya. (Sesuaikan Path dari ClassMap.dll yang anda download diatas)

exec sp_configure 'clr enabled','1'
go
alter database SPATIAL set trustworthy on
go
CREATE ASSEMBLY [myConverter]
FROM 'D:\ClassMap.dll'  
WITH PERMISSION_SET = EXTERNAL_ACCESS;
GO 
 
 
 
 
CREATE FUNCTION [dbo].[ConvertToLonLat](@strInputan [nvarchar](max), @Zone [float], @Southemi [int])
RETURNS [nvarchar](max) WITH EXECUTE AS CALLER
AS 
EXTERNAL NAME [myConverter].[ClassMap.clsMAP].[ConvertToLonLat]
GO
 
 
CREATE FUNCTION [dbo].ConvertToUTM(@strInputan [nvarchar](max))
RETURNS [nvarchar](max) WITH EXECUTE AS CALLER
AS 
EXTERNAL NAME [myConverter].[ClassMap.clsMAP].ConvertToUTM
GO
 
CREATE FUNCTION [dbo].getZone(@strInputan [nvarchar](max))
RETURNS [nvarchar](5) WITH EXECUTE AS CALLER
AS 
EXTERNAL NAME [myConverter].[ClassMap.clsMAP].getZone
GO

Hasil dari Pembuatan Assembly tersebut (Buka TreeView Assembly dan Function di SQL Server 2008) :

Hasil

4. Buatlah Kueri baru untuk membuat Tabel ContohSpatial dan mengisi datanya seperti berikut.

create table ContohSpatial
( 
  NamaTempat varchar(50),
  Lokasi geometry
 )
  
Insert Into ContohSpatial 
Values ('Gedung S. Suriansyah Banjarmasin',
geometry::STGeomFromText('POINT(232221.715513239 9635028.93805386)',4326))
       
Insert Into ContohSpatial 
Values ('Gedung di BJM',
geometry::STGeomFromText('POLYGON ((234513.73966272507 9631784.7328673452, 
234529.49938104203 9631773.91853934, 234534.20553610422 9631780.8087223079, 
234518.43700368819 9631791.6325512715, 234513.73966272507 9631784.7328673452))',4326))

 

5. Buka Browser anda ketikkan halaman http://maps.google.com/ kemudian ketikkan Inputan disebelah Tombol Search Maps Koordinat yang sama seperti data yang kita masukkan dinomor 4 tadi yaitu posisi Gedung Sultan Suriansyah di Banjarmasin. Posisinya adalah 232221.715513239 9635028.93805386    (ketikkan kemudian tekan tombol Search Maps) maka hasilnya tidak dapat ditemukan karna posisinya masih dalam UTM seperti berikut ini.

UTM

6. Untuk mengkonversi posisi UTM tersebut ke Geographic maka gunakan function ConvertToLonLat(…., …. , ….)  yang kita buat diatas tadi seperti berikut ini :

Select 
Lokasi.STAsText() as LokasiUTM,
dbo.ConvertToLonLat(Lokasi.STAsText(),50,1) as LokasiLonLat
From ContohSpatial

Hasil Kolom Pertama adalah Posisi UTM dan Kolom Kedua adalah Posisi Geographic : Konversi ke Geographic ialah posisi : POINT (-3.29903799999901 114.590287000032)

Konversi

Catatan : Function ConvertToLonLat memiliki 3 Parameter (Posisi, Zona, isSouth)Karna Banjarmasin berada di Zona 50 S maka pemanggilannya dengan dbo.ConvertToLonLat(Lokasi.STAsText(), 50 ,1) as LokasiLonLat

1 = Selatan , 0 = Utara

Kita coba masukkan posisi  -3.29903799999901 114.590287000032 ke Google Maps maka posisi Gedung Sultan Suriansyah di Banjarmasin akan tampil sebagai berikut :

GedungSS

7. Untuk mengembalikan dari Geographic ke UTM gunakan function ConvertToUTM () dan Jika ingin mengetahui Zonanya gunakan function  getZone () seperti berikut ini :

Select dbo.ConvertToUTM('POINT (-3.29903799999901 114.590287000032)') as LokasiUTM
Select dbo.getZone('POINT (-3.29903799999901 114.590287000032)') as Zona

 

 

 

 

Hasilnya :

Hasil2

Catatan :

  • Function ConvertToUTM dan getZone memiliki 1 Parameter yaitu Text dari Posisi Longitude dan Latitude.
  • Semua function diatas menggunakan model Ellipsoid WGS 84

8. Semoga Bermanfaat dan Terima Kasih :)

Share this post: | | | |
Seminar sehari bersama MUGI Banjarmasin di Kampus STMIK Banjarbaru

Pada hari sabtu tanggal 10 April 2010 ini, Anggota MUGI Banjarmasin yaitu Suherman MVP dan saya sendiri Ferry Kurniawan bekerjasama dengan STMIK Banjarbaru  mengadakan seminar tentang Update Teknologi MICROSOFT. Acara ini bertujuan untuk memperkenalkan tentang teknologi Microsoft yaitu SQL Server 2008 dan Visual Studio .net. Acara ini dimulai dari pukul 09:00 Wita dan berakhir sekitar pukul 17:00 Wita. Yang menjadi suatu kehormatan bagi kami adalah para peserta dari seminar ini adalah para Dosen STMIK Banjarbaru. Materi yang disampaikan adalah :

  1. Spatial Data menggunakan SQL Server 2008 oleh Suherman MVP
  2. Perkenalan MUGI oleh Suherman MVP
  3. Web Application menggunakan ASP .Net oleh saya sendiri Ferry Kurniawan (Menggantikan Mas Reza Faisal yang berhalangan hadir)
  4. Windows Mobile Application oleh saya sendiri : Ferry Kurniawan.

Kami dari anggota MUGI Banjarmasin mengucapkan terima kasih sedalam-dalamnya kepada Dosen-dosen dan Seluruh Karyawan STMIK Banjarbaru yang telah menerima dan menjamu kami dengan sangat ramah. Tak lupa kami sampaikan terima kasih sebesar-besarnya kepada mas narenda dan mas ronald atas atensi, dukungan dan kiriman DVD nya :) , Terima kasih juga kepada rekan-rekan komunitas lainnya :)

Berikut ini dokumentasi dari acara tersebut :

IMGP0153  IMGP0161

IMGP0170  IMGP0164 IMGP0169

IMGP0183  IMGP0182

Share this post: | | | |
Menampilkan Data Spatial SQL Server 2008 Menggunakan “Web Mapping Services”

Pengertian Data Spatial menurut wikipedia  adalah data yang memiliki referensi ruang kebumian (georeference) dimana berbagai data atribut terletak dalam berbagai unit spasial. Sekarang ini data spasial menjadi media penting untuk perencanaan pembangunan dan pengelolaan sumber daya alam yang berkelanjutan pada cakupan wilayah continental, nasional, regional maupun lokal.  Untuk itulah Microsoft SQL Server 2008 diluncurkan untuk mendukung data spatial dengan tambahan tipe data geography dan geometry – nya. Pada kesempatan kali ini kami akan memberikan sedikit contoh untuk menampilkan data spatial dengan menggunakan “Web Mapping Service”  (Application Programming Interfaces) yang disediakan oleh Bing Maps ataupun Google Maps.

Pada kasus berikut ini kami akan mencontohkan menampilkan data spatial tentang “Lokasi Gempa yang ada di Negara USA dalam kurun waktu 7 hari terakhir” . Berikut ini langkah-langkahnya :

1. Buka Browser anda kemudian ketikkan url berikut ini : http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M1.txt     link tersebut memuat dataset berupa file text yang memberikan informasi gempa yang terjadi di USA dalam kurun waktu 7 hari terakhir.

1

2. Dari Browser anda pilih File –> Save As. Kemudian simpan di C:\gempa.txt

3. Buka SQL Server 2008 anda kemudian buat Database Baru dengan nama GEMPA.

2

4. Dari database Gempa kemudian Klik Kanan –> Task –> Import Data. Kemudian akan tampil Jendela Import and Export Wizard. Klik Next

5. Pilih Data Source ke Flat File Source. Klik tombol Browse kemudian cari File C:\gempa.txt tadi.

6.  Setting Text Qualifier menjadi tanda petik dua ().

7. Centang check box Column Names in the First Data Row.

8. Klik Option Advance Kemudian Setting masing-masing Column Properties seperti Berikut ini :   

Name DataType OutputColumnWidth
Src string [DT_STR] 2
Eqid string [DT_STR] 8
Version string [DT_STR] 1
Datetime string [DT_STR] 50
Lat double-precision float [DT_R8]  
Lon double-precision float [DT_R8]  
Magnitude float [DT_R4]  
Depth float [DT_R4]  
NST two-byte signed integer [DT_I2]
 
Region string [DT_STR] 255

9. Setelah itu klik Next, Maka akan tampil jendela Choose Destination pilih Database Gempa yang tadi kita buat kemudian tekan Next. Pilih tabel tujuan nya dengan nama gempa. Klik Finish maka data file C:\gempa.txt tadi diekspor menjadi tabel gempa di database Gempa. Kemudian tampilkan data di tabel gempa tersebut maka akan tampil seperti berikut :

3 4

catatan :

- Data gempa yang anda coba kemungkinan akan berubah-ubah terus dikarnakan data yang diinformasikan hanya dalam kurun waktu 7 hari terakhir.

- Kolom Lat & Lon adalah posisi terjadinya gempa.

10. Buka SQL Server 2008 anda kemudian ketikkan kueri untuk menambahkan kolom location yang bertipe geography. Kemudian Update kolom location tersebut dengan kueri seperti berikut :

alter table gempa
add location geography
  
update  gempa
set location = geography::Point(lat,lon,4326)
11. Buat Stored Procedure untuk menampilkan informasi terjadinya gempa seperti berikut ini.
Create PROCEDURE [dbo].LokasiGempa
@latitude float,
@longitude float
AS
BEGIN
 
DECLARE @Point geography
SET @Point = geography::Point(@latitude, @longitude, 4326)
 
DECLARE @SearchArea geography
SET @SearchArea = @Point.BufferWithTolerance(50000,1000,0)
 
SELECT
location.STGeometryType() AS GeometryType,
location.STAsText() AS WKT,
'Lokasi Gempa : ' + eqid as Title,
'Wilayah : ' + REGION + '<br/>' +
'Tanggal :' + [Datetime] + '<br/>' 
AS Description
FROM
gempa 
WHERE
location.STIntersects(@SearchArea) = 1
 
UNION ALL SELECT
@SearchArea.STGeometryType() AS GeometryType,
@SearchArea.STAsText() AS WKT,
'Lokasi Gempa ' as Title,
'Lokasi gempa yang terdekat  sejarak 50 km' AS Description
END

12. Buka Visual Studio anda kemudian buat New Website. Beri nama GempaUSA. (Disini kami menggunakan Visual Basic)

13. Tambahkan sebuah Generic Handler dengan cara Klik Kanan –> Add New Item –> Generric Handler. Simpan dengan nama Handler.ashx   di handler ini tambahkan code untuk menampilkan data Lokasi Gempa.

<%@ WebHandler Language="VB" Class="Handler" %>
Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text
Public Class Handler : Implements IHttpHandler
  Public Sub ProcessRequest(ByVal context As HttpContext) _
  Implements IHttpHandler.ProcessRequest
    'Declare the global script variables
    Dim Output As String = "" 'The JavaScript response sent back to the Map API
    Dim MapType As String = context.Request.Params("maptype") 'API to use (VE/GM)
    'Declare the variables used to create each feature
    Dim WKT As String = "" 'The WKT representation provided by the stored proc
    Dim VEGM As String = "" 'The VE/GMaps equivalent representation
    Dim Shape As String = "" 'The unique name of each shape
    Dim ShapeTitle As String = "" 'The title to display for each shape
    Dim ShapeDescription As String = "" 'The description attached to the shape
    Dim id As Integer = 0 'Shape counter
    Dim LineStyle As String = "" 'The line style
    Dim FillStyle As String = "" 'The fill style
    'Set up a connection to SQL server
        Dim myConn As SqlConnection = New SqlConnection("server=PDI-APP-LAPTOP\Mobile;" & _
          "Trusted_Connection=yes;" & _
          "database=GEMPA")
    'Open the connection
    myConn.Open()
    'Define the stored procedure to execute
        Dim myQuery As String = "dbo.LokasiGempa"
    Dim cmd As New SqlCommand(myQuery, myConn)
    cmd.CommandType = Data.CommandType.StoredProcedure
    'Send the point the user clicked on to the stored proc
    cmd.Parameters.Add("@Latitude", Data.SqlDbType.Float)
    cmd.Parameters("@Latitude").Value = context.Request.Params("lat")
    cmd.Parameters.Add("@Longitude", Data.SqlDbType.Float)
    cmd.Parameters("@Longitude").Value = context.Request.Params("long")
    'Create a reader for the result set
    Dim rdr As SqlDataReader = cmd.ExecuteReader()
    'Go through the results
    While rdr.Read()
      'Set a unique variable name for this shape
      Shape = "shape" + id.ToString
      'Set the title for the shape
      ShapeTitle = rdr("Title").ToString
      'Set the description for the shape
      ShapeDescription = rdr("Description").ToString
      'Set the appropriate styling options for each shape
      
        
            'Set the color and opacity for fills
            FillStyle = 'new VEColor(0, 0, 255, 0.5)'
            'Set the color and opacity for lines
            LineStyle = 'new VEColor(255, 255, 255, 0.7)"
 
            'Convert from WKT to the relevant API constructor for the type of geometry
            Select Case rdr("GeometryType").ToString
                Case "Point"
                    'Get the WKT representation of the object
                    WKT = rdr("WKT").ToString
                    'Replace the double brackets that surround the coordinate point pair
                    WKT = Replace(WKT, "POINT (", "")
                    'Remove the closing double brackets
                    WKT = Replace(WKT, ")", "")
                    'Build the appropriate Pushpin/GMarker object from the coordinates
                    VEGM = ""
                    Dim Coords() As String = Split(Trim(WKT), " ")
                    
                    VEGM = VEGM + "new VELatLong(" + Coords(1) + "," + Coords(0) + ")"
                    Output += "var " + Shape + _
                    "=new VEShape(VEShapeType.Pushpin, " + VEGM + ");"
                    
                    'Display descriptive airport information when mouse hovers over point
                    
                    'Set the shape title
                    Output += Shape + ".SetTitle('" + ShapeTitle + "');"
                    'Set the shape description
                    Output += Shape + ".SetDescription('" + ShapeDescription + "');"
          
                Case "Polygon"
                    'Get the WKT representation of the object
                    WKT = rdr("WKT").ToString
                    'Replace the double brackets that surround the coordinate point pairs
                    WKT = Replace(WKT, "POLYGON ((", "")
                    'Remove the closing double brackets
                    WKT = Replace(WKT, "))", "")
                    'Create an array of each point in the Polygon
                    Dim PointArray() As String = Split(WKT, ",")
                    'Build the appropriate VE/GMaps Polygon object from the coordinates
                    VEGM = ""
                    Dim i As Integer = 0
                    While i <= PointArray.Length - 1
                        Dim Coords() As String = Split(Trim(PointArray(i)), " ")
                        
                        VEGM = VEGM + "new VELatLong(" + Coords(1) + "," + Coords(0) + "),"
                        i = i + 1
                    End While
                    'Remove the last trailing comma
                    VEGM = Left(VEGM, VEGM.Length - 1)
                    'Add the constructor for the Polygon, and apply styling options
                  
                    Output += "var " + Shape + _
                    "=new VEShape(VEShapeType.Polygon, [" + VEGM + "]);"
                    Output += Shape + ".SetLineColor(" + LineStyle + ");"
                    Output += Shape + ".SetFillColor(" + FillStyle + ");"
                    Output += Shape + ".HideIcon();"
                   
            End Select
            'Add the shape to the map
           
            Output += "map.AddShape(" + Shape + ");"
           
            'Increment the shape counter
            id = id + 1
        End While
    'Close the reader
    rdr.Close()
    'Close the connection
    myConn.Close()
    'Tell the browser to handle the response as JavaScript
    context.Response.ContentType = "text/JavaScript"
    'Do not cache the results, so always load new data
    context.Response.CacheControl = "no-cache"
    'Make the response expire immediately
    context.Response.Expires = -1
    'Return the constructed JavaScript
    context.Response.Write(Output)
  End Sub
  ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
      Return False
    End Get
  End Property
End Class

 

 

 

 

 

13. Tambahkan sebuah JScript File dengan cara Klik Kanan –> Add New Item –> Jscript File. Simpan dengan nama JScript.js  di dalam JScript ini terdapat function-function yang digunakan untuk mengakses API dari Bing Maps  dan terhubung dengan Handler yang kita buat sebelumnya.

// Declare the global map object
var map = null;
 
// Set the Load callback
if (window.addEventListener) { window.addEventListener("load", getMap, false); }
else if (window.attachEvent) { window.attachEvent("onload", getMap); }
 
// Set the unLoad callback
if (window.addEventListener) { window.addEventListener("unload", disposeMap, false); }
else if (window.attachEvent) { window.attachEvent("onunload", disposeMap); }
 
// This function is called when the page has been loaded
function getMap() {
 
  // Create a new map object in the divMap container
  map = new VEMap('divMap');
 
  // Configure the initial map view  
  map.LoadMap(new VELatLong(34, -118), 8, VEMapStyle.Aerial);
  
 
 
  // Call the loadAirportData function when the user clicks the map
  map.AttachEvent("onclick", loadAirportData);
}
 
// This function creates a cross-browser AJAX object
function GetXmlHttp() {
  var xmlHttp;
  try { xmlHttp = new XMLHttpRequest(); } // Firefox, Opera 8.0+, Safari
  catch (e) {
    try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } // IE 6.0+
    catch (e) {
      try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } // Older IE
      catch (e) {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  return xmlHttp;
}
 
 
 
 
function loadAirportData(e) {
 
  // Clear the map
  map.DeleteAllShapes();
 
  // Convert the cursor location to latitude / longitude
  var pos = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
 
  //Get the appropriate XMLHTTP object for the browser
  var xmlhttp = GetXmlHttp();
 
  // If we have a valid XMLHTTP object
  if (xmlhttp) {
    // Define the url of the handler
    var url = "./Handler.ashx";
    // Build the parameters that must be passed
    var params = "lat=" + pos.Latitude + "&long=" + pos.Longitude + "&maptype=VE";
    // Open the XmlHTTP request
    xmlhttp.open("GET", url + '?' + params, true);
    // Fire this when the readyState of the request changes
    xmlhttp.onreadystatechange = function() {
      // readystate 4 indicates that the request is complete  
      if (xmlhttp.readyState == 4) {
        // Read in the JavaScript response from the handler
        var result = xmlhttp.responseText;
        // Update the status message
        window.status = 'Loading Data...';
        try {
          // Execute the dynamically created JavaScript
          eval(result);
          // Update the status message
          window.status = 'Data Loaded!';
        }
        catch (e) {
          // If the response cannot be evaluated
          window.status = 'Data could not be loaded.';
        }
      }
    }
    // Send the XMLHttp Request
    xmlhttp.send(null);
  }
}
 
// This function is called when the page is unloaded
function disposeMap() {
 
  // Release all resources assigned to the map
  map.Dispose();
 
  // Unset the map variable
  map = null;
}

14. Buka file Default.aspx kemudian klik source nya kemudian tambahkan code seperti berikut ini.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Data Spatial Lokasi Gempa di USA</title>
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/JavaScript"></script>
    <script src="JScript.js" type="text/JavaScript"></script>
</head>
<body>
    <div id="divMap" style='position:relative; width:800px; height:600px;"></div>
</body>
</html>

15.  Jalankan Defaut.aspx tersebut (harus terhubung dengan internet). Kemudian akan tampil Bing  Maps yang menampilkan peta USA. Klik di peta tersebut sampai ada tanda merah (lokasi gempa) , kemudian dekati mouse maka akan tampil Informasinya.

5

16. Dowload Source Code –nya disini.

17. Selamat Mencoba , Semoga Bermanfaat dan Terima Kasih :)

Share this post: | | | |