Categories: Spatial

Simple Sample Using Virtual Earth API

Membuat sebuah Web Application menggunakan Virtual Earth dapat dilakukan dengan menggunakan Virtual Earth API atau yang sekarang dikenal dengan nama Bing Map Control . Untuk mendapat Bing Map Control SDK dapat didownload disini.

Saya disini akan mencoba membuat sebuah Web Application sederhana, yaitu menampilkan Istana Bogor yang ada di Kota Bogor seperti gambar dibawah ini :

Scriptnya cukup sederhana seperti Script HTML dibawah ini (untuk mencobanya harus ada koneksi internet):

<!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>

    <title>Call Virtual Earth</title>

    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"

    type="text/javascript"></script>

</head>

<body onload="var map = new VEMap('divmap');

map.LoadMap(new VELatLong(-6.598086, 106.797409), 20, VEMapStyle.Hybrid, false); ">

<div id="divmap" style="position:relative"; ></div>

</body>

</html>

Saya akan coba bahas Script diatas .

pada script :

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"

    type="text/javascript"></script>

Script diatas mendeklarasikan Bing Map API yang akan kita gunakan. Saat ini versinya adalah 6.2 seperti yang tertulis pada akhir URL. Tujuan dari pendeklrasian ini adalah agar kita dapat mengakses Method-method yang disediakan Oleh Bing Map API. Pada sample sederhana ini saya hanya menggunakan dua buah method yaitu VEMap() dan LoadMap().

Method VEMap() Merupakan Method untuk membuat sebuah instance baru dari VE yang saya beri ID Divmap

<body onload="var map = new VEMap('divmap');

sehingga nantinya kita dapat memunculkan Map nya di browser dengan hanya memanggil ID nya

<div id="divmap" style="position:relative"; ></div>

Method LoadMap() merupakan method untuk menset bagaiman Map itu ditampilkan. didalamnya ada beberapa parameter yang saya isikan. Parameter VELatLong() digunakan untuk menampilkan map daerah mana yang akan di presentasikan, yaitu dengan menyebutkan posisi Latitude dan Longitude dari Istana Bogor

map.LoadMap(new VELatLong(-6.598086, 106.797409), 20, VEMapStyle.Hybrid, false); ">

Sedangkan angka 20 adalah berapa kali map tersebut akan dilakukan Zoom In. Sedangkan parameter ketiga adalah untuk mendeklarasikan Style dari Map yang akan ditampilkan. Ada beberapa pilihan dari Map Style yaitu : Round, Shaded, Aerial, Hybrid, Birdseye, Oblique, BirdeyeHybrid.

admin