Makale Özeti

Merhaba sevgili arkadaşlar ilk makalemizde Virtual Earth Map’i ve kullanım alanlarını anlatıp basit bir örnek yapmıştık. Bu makale de ise Virtual Earth Map’in gelişmiş bazı özelliklerini inceleyeceğiz.

Makale

Makelemizin 2. Bölümünde haritada gösterdiğimiz koordinatın üzerinde o koordinatı belli edecek bir şekil kullanıcıya gösterecek ve bu koordinat hakkında kullanıcının o koordinatla ilgili önemli bilgileri görmesini sağlayacak bir pencere açılmasını sağlayacağız.

VEShapeLayer.AddShape Metodu

Virtual Earth Map’de Polygon, Polyline ve pushpin olmak üzere 3 çeşit shape(şekil) vardır. Bu shape’ler yukardı da da belirttiğimiz gibi haritamız üzerinde o koordinatı kullanıcıya gösterecek ve o koordinat hakkında kullanıcıya bilgi verecek.

Not: Virtual Earth Map’in 5.0 versiyonu ile birlikte tüm shape nesneleri VEShape.Class altında birleşti.

Haritalara Shape(Şekil) Eklemek

İlk olarak VELatLong nesesinin bir array’ı tanımlanır.

Ben bu makale de konunun anlaşılmasını zorlaştırmamak için polygon Shape’ni kullanacağım. Polygon shape’nin kullanımında 3 koordinat tanımlamak zorundayız.

var points = new 

Array(
   new VELatLong(45.01188,-111.06687, 0, 

VEAltitudeMode. RelativeToGround),
   new VELatLong(45.01534,-104.06324, 0, 

VEAltitudeMode. RelativeToGround),
   new VELatLong(41.01929,-104.06, 0, 

VEAltitudeMode. RelativeToGround),
   new VELatLong(41.003,-111.05878, 0, 

VEAltitudeMode. RelativeToGround)
);

 

İkinci olarak Tipi Polygon olan bir VEShape nesnesi oluşturulur.

var myPolygon = new 

VEShape(VEShapeType.Polygon, points);

 

Üçüncü olarak oluşturduğumuz poligonu haritamıza ekleriz.

var myPolygon = 

map.AddShape(myPolygon);

 

Son olarak oluşturduğumuz shape’de kullanıcıyı bilgilendirmek için çeşitli bilgileri giriyoruz.

myPolygon.SetTitle("Başlık");
myPolygon.SetDescription("Koordinat ile ilgili 

Açıklama…");

 

Evet basit olarak bir örnek yapalım; Ben örneğimde Fenerbahçe stadını haritamda gösterecek ve çeşitli bilgilere yer vereceğim.

Shape.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

   <head>

      <title>Shape</title>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

      <script type="text/javascript"  src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"> </script>

      <script type="text/javascript">

      var map = null;

 

            var gosterilecekKoordinat = new VELatLong(40.987835, 29.036629);

 

 

      var koordinatlar = new Array(

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround)

      );

 

      function GetMap()

      {

         map = new VEMap('myMap');

         map.LoadMap(gosterilecekKoordinat,16, VEMapStyle.Hybrid);

         var poligon = new VEShape(VEShapeType.Polyline, koordinatlar);

         map.AddShape(poligon);

         poligon.SetTitle("<center>Kadıköy - Fenerbahçe Şükrü Saraçoğlu Stadı</center>");

//Shaepe için Koordinat ile ilgili başlık

         poligon.SetDescription("<br/><center><img src='fb.gif' align='center'><br/> Şükrü Saraçoğlu Stadı <br/><br/> Burası Kadıköy burdan çıkış yok !</center>");

//Shaepe için Koordinat ile ilgili tanıtım ve diğer bilgiler

 

      }

      </script>

   </head>

   <body onload="GetMap();">

      <div id='myMap' style="position:relative; width:640px; height:480px;"></div>

   </body>

</html>

 

 

Evet şimdi örneğimizi çalıştıralım bakalım nasl bir şey olacak J

Gerçekten çok güzel görünüyor J Türkiyenin ve avrupanın en güzel stadı ne de olsa J

Evet arkadaşlar orada ki kırmızı ataç’a benzeyen şey benim çok hoşuma gitmedi, sizinde hoşunuza gitmeyeceğini varsayan Microsoft bunu aşmak için bu iconu kendi belirleyeceğimiz bir icon ile değiştirmemize de imkan sağlamış. Makalemizin ikinci kısmında bu iconu kişiselleştireceğiz.

Bunun için aslında yukarıdaki örnekten çok farklı bir şey yapmayacağız. Sadece kullanacağımız VEShape nesnesinin SetCustomIcon ve SetIconAnchor özelliğini kullanacağız.

var customIcon = null;   

customIcon = new VEShape(VEShapeType.Polygon, koordinatlar);

customIcon.SetTitle("12 Numara Hep Yanında !    ");

customIcon.SetCustomIcon("<img src='fb.gif' alt=''/>");

//Kendi belirleyeceğimiz Shape Iconu

customIcon.SetDescription("<br/><center><img src='fb.gif' align='center'><br/> Şükrü Saraçoğlu Stadı <br/><br/> Burası Kadıköy burdan çıkış yok !</center>");

customIcon.SetIconAnchor(gosterilecekKoordinat);  

//Shape Iconun Gösterileceği Koordinat

map.AddShape(customIcon);

Basit bir örnek daha yapalım. Ben yine Türkiye’nin ve Avrupa’nın en iyi stadının koordinatlarını alıp stadın tam üzerine FB logosu koyacağım J

CustomIcon.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

   <head>

      <title>Adding a Shape to a Map</title>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

      <script type="text/javascript"  src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"> </script>

      <script type="text/javascript">

      var map = null;

    var customIcon = null;

      var gosterilecekKoordinat = new VELatLong(40.987835, 29.036629);

 

 

      var koordinatlar = new Array(

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround),

         new VELatLong(40.987835, 29.036629, 0, VEAltitudeMode. RelativeToGround)

      );

 

      function GetMap()

      {

        map = new VEMap('myMap');

        map.LoadMap(gosterilecekKoordinat,16, VEMapStyle.Hybrid);

        customIcon = new VEShape(VEShapeType.Polygon, koordinatlar);

        customIcon.SetTitle("12 Numara Hep Yanında !    ");

        customIcon.SetCustomIcon("<img src='fb.gif' alt=''/>");

//Custom Icon’un Dosya Yolunu Belirtiyoruz…

 

        customIcon.SetDescription("<br/><center><img src='fb.gif' align='center'><br/> Şükrü Saraçoğlu Stadı <br/><br/> Burası Kadıköy burdan çıkış yok !</center>");

        customIcon.SetIconAnchor(gosterilecekKoordinat);  

//Custom Iconun Gösterileceği Koordinatı Belirliyoruz…

 

        map.AddShape(customIcon);

 //Custom Iconu Haritamıza Ekliyoruz…

      }

      </script>

   </head>

   <body onload="GetMap();">

      <div id='myMap' style="position:relative; width:640px; height:480px;"></div>

   </body>

</html>

 

 

Bakalım nasıl bir şey ortaya çıkacak J

Gerçekten çok güzel duruyor her ikisi de J Hem Microsoft, hem Fenerbahçe J Hem Virtual Earth, Hem de Kadıköy Fenerbahçe Şükrü Saraçoğlu Stadı J

Evet Arkadaşlar, bu makalemizin de sonuna geldik. Başka bir makale de görüşmek dileğiyle, herkese başarılar dilerim.

Sem Göksu
sem.goksu@yazilimgunlugu.com
www.semgoksu.com | www.yazilimgunlugu.com

Kaynaklar

Virtual Earth Map SDK 6.0