Microsoft Virtual Earth Map ile Dünyayı Keşfedin

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.

Makelemizin 2. Bölümünde haritada gösterdigimiz koordinatın üzerinde o koordinatı belli edecek bir sekil kullanıcıya gösterecek ve bu koordinat hakkında kullanıcının o koordinatla ilgili önemli bilgileri görmesini saglayacak bir pencere açılmasını saglayacagız.

VEShapeLayer.AddShape Metodu

Virtual Earth Map'de Polygon, Polyline ve pushpin olmak üzere 3 çesit shape(sekil) vardır. Bu shape'ler yukardı da da belirttigimiz 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 birlesti.

Haritalara Shape(Sekil) Eklemek

Ilk olarak VELatLong nesesinin bir array'ı tanımlanır.

Ben bu makale de konunun anlasılmasını zorlastırmamak için polygon Shape'ni kullanacagı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)

);

Ikinci olarak Tipi Polygon olan bir VEShape nesnesi olusturulur.

var myPolygon = new VEShape(VEShapeType.Polygon, points);

Üçüncü olarak olusturdugumuz poligonu haritamıza ekleriz.

var myPolygon = map.AddShape(myPolygon);

Son olarak olusturdugumuz shape'de kullanıcıyı bilgilendirmek için çesitli bilgileri giriyoruz.

myPolygon.SetTitle("Baslık");

myPolygon.SetDescription("Koordinat ile ilgili Açıklama.");

Evet basit olarak bir örnek yapalım; Ben örnegimde Fenerbahçe stadını haritamda gösterecek ve çesitli bilgilere yer verecegim.

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>

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)

);

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 Sükrü Saraçoglu Stadı</center>");

//Shaepe için Koordinat ile ilgili baslık

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

//Shaepe için Koordinat ile ilgili tanıtım ve diger bilgiler

}

</script>

</head>

</body>

</html>

Evet simdi örnegimizi çalıstıralım bakalım nasl bir sey 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 arkadaslar orada ki kırmızı ataç'a benzeyen sey benim çok hosuma gitmedi, sizinde hosunuza gitmeyecegini varsayan Microsoft bunu asmak için bu iconu kendi belirleyecegimiz bir icon ile degistirmemize de imkan saglamıs. Makalemizin ikinci kısmında bu iconu kisisellestirecegiz.

Bunun için aslında yukarıdaki örnekten çok farklı bir sey yapmayacagız. Sadece kullanacagımız VEShape nesnesinin SetCustomIcon ve SetIconAnchor özelligini kullanacagı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 belirleyecegimiz Shape Iconu

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

customIcon.SetIconAnchor(gosterilecekKoordinat);

//Shape Iconun Gösterilecegi 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 koyacagı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>

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)

);

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/> Sükrü Saraçoglu Stadı <br/><br/> Burası Kadıköy burdan çıkıs yok !</center>");

customIcon.SetIconAnchor(gosterilecekKoordinat);

//Custom Iconun Gösterilecegi Koordinatı Belirliyoruz.

map.AddShape(customIcon);

//Custom Iconu Haritamıza Ekliyoruz.

}

</script>

</head>

</body>

</html>

Bakalım nasıl bir sey 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 Sükrü Saraçoglu Stadı J

Evet Arkadaslar, bu makalemizin de sonuna geldik. Baska bir makale de görüsmek dilegiyle, herkese basarılar dilerim.

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

Kaynaklar

Virtual Earth Map SDK 6.0

Yorum (1)

ibrahim emür / 4.4.2009 21:07:55

şükrü saracoğlu olmasaydı iyi olurdu :) paylaştığınız bilgilerden dolayı çok teşekkür ederim yazılarınızı takip etmeye devam ediyorum teeşekkürler

Blog

Microsoft Virtual Earth Map ile Dünyayı Keşfedin – Makale 2

Yorum (1)

Yorum Yaz