Makale Özeti

Windows Live Virtual Earth api'lerini uygulamalarımızda nasıl kullanabileceğimizi, 2 ve 3 boyutlu haritalar üzerinde nokta, doğru gibi işaretlerin nasıl gösterilebileceğini bu makalede inceleyeceğiz.

Makale

Geliştirmiş olduğumuz uygulamalarda topladığımız veriler içerisinde koordinatlar var ise kullanıcıların bu koordinatların temsil ettiği alanı, noktayı veya doğruyu harita üzerinde görmek istemeleri kaçınılmazdır. Bunun yanısıra yazmış olduğumuz GPS takip benzeri uygulamalardan gelen koordinatlar eşliğinde bir aracın veya bir kişinin nerede olduğunun son kullanıcıya gösterilmesi gerekmektedir. İşte Virtual Earth, uygulamalarımızda bu tür işlemleri yapmamıza yardımıcı olan bir JavaScript bileşenidir. Tüm bu işlemleri bir harita üzerinde kullanabilmek için Windows Live Virtual Earth api'lerini uygulamalarımızda nasıl kullanabileceğimizi, 2 ve 3 boyutlu haritalar üzerinde nokta, doğru gibi işaretlerin nasıl gösterilebileceğini bu makalede inceleyeceğiz. Virtual Earth ile haritaları çizerken tek ihtiyaç duyacağımız şeyler ise javascript, html ve css olacak.

Virtual Earth ile yapabileceklerimizi bir projede adım adım inceleyelim.

Yeni bir web uygulaması oluşturalım ve İlk olarak Virtual Earth'ün varsayılan haritasını uygulamamızda gösterelim:

< html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">
      var map = null;
      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
      }  
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
   </body>
</html>

Kodu yazıp uygulamayı çalıştırdığımızda Amerika haritasının görüntülendiğini görürüz. Haritanın sol üst kısmında ise zoom, navigasyon, haritayı 2 veya 3 boyutlu gösterme gibi işlemleri yapmamıza olanak sağlayan toolbar vardır.



Varsayılan haritayı yüklemek yerine LoadMap metodunu kullanarak kendi belirlediğimiz özelliklerde bir harita yükleyebiliriz. LoadMap metodunun 7 tane parametresi vardır ve tamamının kullanımı opsiyoneldir:

VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch, tileBuffer);

Bu parametreleri sırasıyla inceleyecek olursak;

VELatLong: Haritanın merkezinin hangi enlem ve boylamda olacağının belirlendiği parametredir.
zoom: Harita gösterilirken ne kadar zoom yapılarak gösterileceğinin belirlendiği parametredir. 1'den 19'a kadar değer alır.
Style: Haritanın gösterim stilinin belirlendiği parametredir. Bu stiller aşağıdaki gibidir:
    * Road - Yol haritası şeklinde gösterilir.
    * Shaded - Yine yol haritası şeklinde gölgelendirilmiş şekilde yeryüzü şekilleri de gösterilir.
    * Aerial - Havadan görünümü gösterilir.
    * Hybrid - Havadan görünümü ancak bu sefer yer isimlerinin ve diğer bilgilerin de çizilerek gösterildiği şekildir.
    * Oblique - dik açı olmayan şekilde gösterilir.
    * Birdseye - kuşbakışı görünüm şeklinde görüntülenir.
Fixed: Kullanıcının harita üzerinde değişiklik yapıp yapamayacağının belirlendiği parametredir. Boolean tipinde değer alır, default değeri false'dır.
mode: Haritanın kaç boyutlu yükleneceğinin belirlendiği parametredir. HArita iki boyutlu (VEMapMode.Mode2D) veya üç boyutlu (VEMapMode.Mode3D) yüklenebilir. Default değeri VEMapMode.Mode2D'dir.
showSwitch: Haritanın üzerinde bulunan kullanıcının 2 veya 3 boyutlu görüntüleme seçmesine olanak sağlayan ayarların görüntülenip görüntülenmeyeceğinin belirlendiği boolean tipinde parametredir. Default değeri true'dur.

Bu parametreleri inceledikten sonra şimdi Load metodu ile özelliklerini kendimiz belirlediğimiz bir harita oluşturalım.
Türkiye yol haritasını çizelim:
 

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">
         var map = null;
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 6, 'r', false);
         }     
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:950px; height:500px;"></div>
   </body>
</html>


Kodu yazıp uygulamayı çalıştırdığımızda harita aşağıdaki gibi görüntülenecektir:




Haritayı 3 boyutlu olarak göstermek istersek LoadMap metodunda yazmamız gereken kod aşağıdaki gibi olacaktır:

....
map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 6, 'h', false, VEMapMode.Mode3D, true);
......

Şimdi sayfamıza ekleyeceğimiz kontrollerle harita üzerinde zoom yapma işlemlerini inceleyelim. Sayfada iki adet buton olsun ve bu butonlar yardımıyla zoom in ve zoom out işlemlerimizi yapalım. Ayrıca biraz önce bahsetmiş olduğum zoom parametresinin değerini de forma koyduğumuz bir textbox'a yazarak set edelim.
 

<html>
<
head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
    <script type="text/javascript">
      var map = null;
      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 6, 'r', false);
      }
      function ZoomIn()
      {
         map.ZoomIn();
      }
      function ZoomOut()
      {
         map.ZoomOut();
      }
      function ZoomYap()
      {
         var zoom = document.getElementById('zoomSeviyesi').value;
         map.SetZoomLevel(zoom);
      }
      </script>
</head>
<
body onload="GetMap();">
    <div id='myMap' style="position: relative; width: 400px; height: 400px;">
    </div>
    <div>
        <input type='button' value='+' onclick='ZoomIn();' />
        <input type='button' value='-' onclick='ZoomOut();' />
    </div>
    <div>
        Zoom:<input id='zoomSeviyesi' type='text' style='width: 15px;' value='10' />
        <input type='button' value='Ayarla' onclick='ZoomYap();' />
    </div>
</body>
</
html>


Yazmış olduğumuz ZoomIn ve ZoomOut fonksiyonları map kontrolünün ZoomIn ve ZoomOut metodlarını çağırıyorlar. Yine map kontrolünün SetZoomLevel metodunu kullanarak da haritanın ne kadar yakından görüntüleneceğini set edebiliyoruz. Uygulamayı çalıştırdığımızda sayfamız aşağıdaki gibi görüntülenir. +, - butonlarına tıklayarak zoom yapabilir, textbox'a 1'den 19'a kadar değer girip zoom seviyesini belirleyebiliriz:



Şimdi haritanın sol üst köşesinde yeralan toolbar üzerinde yapabileceğimiz değişiklikleri inceleyelim. Bu toolbar, map kontrolünün SetDashboardSize metodu kullanılarak isteğe göre 3 farklı şekilde gösterilebilir (
VEDashboardSize.Normal, VEDashboardSize.Small, VEDashboardSize.Tiny). Şu ana kadarki resimlerde görülen şekli default olarak yüklenen Normal'dır. Small olarak ayarlandığında zoom in ve zoom out butonları ile Road, Aerial ve Hybrid butonları ekranda görüntülenir. Tiny olarak ayarlandığında ise sadece zoom in ve zoom out butonları görüntülenir. Kullanımı ise aşağıdaki kodda görüldüğü gibidir:
 

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">
         var map = null;
         function GetMap()
         {
            map = new VEMap('myMap');
            map.SetDashboardSize(VEDashboardSize.Tiny);
            map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 5, 'h', false);
         }    
      </script>
 </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      </div>
   </body>
</html>

Tiny modda yüklenecek olan harita aşağıdaki gibi görüntülenir:



Bu toolbar'ı hiç göstermek istemezseniz map kontrolünün HideDashboard metodunu kullanabilirsiniz. Gizlenmiş olan toolbar'ı tekrar visible yapmak için de ShowDashboard metodunu kullanabilirsiniz.

Şimdi haritada belirli yerleri raptiye ile nasıl gösterebileceğimizi inceleyelim. Aşağıda yazdığım kod, haritanın altında bulunan üç şehrimizin linkine tıklandığında ilgili şehrin üzerine bir raptiye yerleştiriyor ve bize üzerine gelindiğinde hangi şehir olduğu ile ilgili bilgi veriyor:
 

   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">
      var map = null;
      var pinid = 1;

      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 5, 'r', false);
      }
      function Ankara()
      {
        return [new VELatLong(39.56, 32.52), 'Ankara'];
      }
      function Istanbul()
      {
        return [new VELatLong(41.01, 28.58), 'İstanbul'];
      }
      function Izmir()
      {
        return [new VELatLong(38.25, 27.09), 'İzmir'];
      }
      function AddPushpin(sehir)
      {
          var shape = new VEShape(VEShapeType.Pushpin, sehir[0]);
          shape.SetTitle('Raptiye');
          shape.SetDescription(pinid + ': Burası ' + sehir[1]);
          pinid++;
          map.AddShape(shape);
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <div>Aşağıdaki şehirleri harita üzerinde işaretlemek için tıklayınız.</div>
      <div><a href='#' onclick='AddPushpin(Ankara());'>Ankara</a></div>
      <div><a href='#' onclick='AddPushpin(Istanbul());'>İstanbul</a></div>
      <div><a href='#' onclick='AddPushpin(Izmir());'>İzmir</a></div>
   </body>
</html>

Kodda ilk olarak üç şehir için enlem ve boylam bilgilerinin tutulduğu
VELatLong nesnesini ve şehir ismini döndüren fonksiyonları yazdık. Ardından AddPushpin adında bir fonksiyon oluşturduk. Bu fonksiyon parametre olarak biraz önce yazdığımız fonksiyonlardan dönen değerleri aldı. Fonksiyonda ilk olarak haritaya eklemek için yeni bir VEShape nesnesi tanımladık. Tanımlarken VEShapeType'ını Pushpin yani raptiye olarak belirledik, raptiyenin yerleştirileceği enlem ve boylam bilgisini de sehir parametresinin ilk değerinden aldık. Yerleştireceğimiz raptiyenin üzerine gelindiğinde açılacak olan baloncuğun başlığını Raptiye olarak set ettik. SetDescription metodunu kullanarak baloncuk içinde yer alacak olan açıklamayı belirledik. Ardından da haritaya AddShape metodunu kullanarak raptiyeyi ekledik. Son olarak da forma eklemiş olduğumuz linklerin onclick event'lerinde AddPushpin fonksiyonlarını çağırdık. Uygulamayı çalıştırdığımızda, linklere tıkladığımızda ve raptiyelerden birinin üstüne geldiğimizde harita aşağıdaki gibi görünecektir:



Şimdi de bu üç şehir arasını çizgiyle birleştirelim yani haritamıza polyline ekleyelim:
 

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
      <script type="text/javascript">

      var map = null;
      function GetMap()
      {
        map = new VEMap('myMap');
        map.LoadMap(new VELatLong(39.28634694578469, 35.20161335951931), 5, 'a', false);
      }
      function
Ankara()
      {
        return
new VELatLong(39.56, 32.52);
      }
      function
Istanbul()
      {
        return new VELatLong(41.01, 28.58);
      }
      function
Izmir()
      {
        return
new VELatLong(38.25, 27.09);
      }
      function
AddPolyline()
      {
        var
shape = new VEShape(VEShapeType.Polyline, [Ankara(), Istanbul(), Izmir()]);
        shape.SetTitle('Polyline ekledik.');
        shape.SetDescription('Ankara - İstanbul - İzmir');
        map.AddShape(shape);
        map.SetMapView([Ankara(), Istanbul(), Izmir()]);
      }
    </
script>
    </
head>
<
body onload="GetMap();">
    <
div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    <
div><a href='#' onclick='AddPolyline();'>Polyline Ekle</a></div>
</
body>
</html>


Kodda biraz önce yaptığımız gibi Ankara, İstanbul, İzmir fonksiyonlarımızı tekrar yazdık. Ardından da AddPolyline adında bir fonksiyon oluşturduk. Bu fonksiyonda shape adında yeni bir
VEShape nesnesi tanımladık ve VEShapeType'ını Polyline olarak set ettik, ardından da ikinci parametre olarak Ankara, İstanbul, İzmir fonksiyonlarından dönen enlem ve boylam bilgilerini sırayla yazdık. SetTitle metoduyla başlığını, SetDescription metoduyla açıklamasını belirledik ve haritamıza ekledik. Bu noktada makalede daha önce bahsetmediğim SetMapView metodundan bahsedeceğim. Kodda da görüldüğü gibi map nesnesinin SetMapView metodu, VELatLong nesnesinden oluşan array'i parametre olarak alıyor. Bunun dışında VEPolyline nesnesinden oluşan array'i veya VELatLongRectangle nesnesini de parametre olarak alabilir. SetMapView metodu aldığı bu parametrelerin barındırdığı değerlere göre haritayı belirlenmiş olan büyüklüğünün içine sığdırır. Yani bir bakıma aldığı koordinatların tamamı haritada görünecek şekilde haritanın görünümünü değiştirir. Biz de örnekte Ankara, İstanbul ve İzmir'in enlem boylam bilgilerini SetMapView metoduna parametre olarak gönderdik. Ardından da haritanın altında bulunan linkten de AddPolyline fonksiyonunu çağırdık. Kodu çalıştırdığımızda ve tıkladığımızda haritamız aşağıdaki gibi görüntülenecektir:



Bu makalemde Virtual Earth ile yapabileceğiniz temel bazı işlemlerden bahsettim. Siz de web uygulamalarınızda haritalama, lokasyon gösterimi, lokasyon arama gibi işlemleri Virtual Earth ile başarılı bir şekilde gerçekleştirebilirsiniz. Daha ayrıntılı bilgiye http://dev.live.com/virtualearth/sdk adresindeki interaktif Virtual Earth SDK'sından ulaşabilirsiniz.

Işıl Orhanel
http://www.isilorhanel.net