Eskiden sadece büyük atlaslarda veya belgesellerde görebildiğimiz uydu fotoğrafları, gelişen teknoloji ve internet sayesinde artık her bilgisayardan erişilebilir hale geldi. Yaklaşık üç yıl önce ücretsiz bir şekilde hayata geçen Google Maps, coğrafi bilgi sistemlerini hayatımızın bir parçası haline getirmekle kalmadı, tarayıcımızda bir masaüstü uygulaması gibi çalışarak belkide AJAX teknolojisinin bu kadar yayılmasında en büyük etkenlerden biri oldu. Özellikle büyük şehirlerin yüksek çözünürlüklü fotoğraflarını kullanıcıların hizmetine sunan Google ve Microsoft gibi firmalar, bilmediğimiz bir adrese giderken bizi kaybolmaktan kurtarıyorlar.

Günümüzde yoğun ilgi gören harita uygulamaları artık üç boyutlu görüntülenebilen, trafik yoğunluğunu bildiren, afet bölgelerindeki hasarı gösterebilen, Microsoft Live Local gibi servislerle bazı şehirlerde gezinmeye imkan veren özelliklere kavuştular. Hatta Dünya’da dolaşmaktan sıkıldıysanız, Google Sky veya bu ay incelediğimiz Microsoft Virtual Telescope gibi uygulamalar ile uzayı keşfetmeye başlayabilirsiniz. Gelişim süreci devam ederken firmalar web programcılarını da unutmuyor; SDK ve API’leri sürekli güncelleyerek uygulamaların başka sayfalara kolayca entegre edilebilmesi için uğraş veriyorlar. Bizde şimdi kullanımı giderek artan Microsoft Virtual Earth kütüphanelerinin yardımıyla web sitemiz için bir harita uygulaması hazırlayacağız.

Google Maps ve Microsoft Virtual Earth’ı diğer harita uygulamalarından farklı kılan en büyük özellik, iki platformun da kütüphanelerinin tamamen AJAX teknolojisiyle çalışmasıdır. Ayrıca katmanlı yapıda oluşturulan görüntüler, harita üzerine harici öğeler eklenmesine ve bu öğeler üzerinden işlem yapılmasına imkan sağlıyor. Gerekli javascript kütüphanesini sayfamıza ekledikten sonra haritayı oluşturmak, koordinatları değiştirmek ya da yeni öğe eklemeye dair bütün metodlara ulaşabiliyoruz. Bu noktada önümüze çıkan iki seçenek var. Birincisi, kullandığımız metodları javascript ile yazarak uygulamanın kullanıcı tarafında (client-side) çalıştırılması. Diğer seçeneğimiz ise yazdığımız sınıfların sunucu tarafında (server-side) saklanması, oluşturacağımız sınıflar ve metodların ajax yada javascript ile sunucudan çağrılarak kullanıcıya ulaştırılması. Sunucu tarafında çalıştıracağımız uygulamalar için bir web servisi hazırlamamız ve harita üzerinde işlemleri buradan gerçekleştirmemiz de mümkün.

HARİTANIN KURULUMU

Virtual Earth ile hazırlayacağımız projemizde, Microsoft’un uygulama geliştirme arayüzlerini (API) kullanacağımızdan bahsetmiştik. Bu noktada http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6 adresindeki en yeni  kütüphaneyi referans olarak sayfamıza ekleyerek programlamaya başlayabileceğiniz gibi, bu kütüphaneyi kullanarak hazırlanan bazı paket uygulamaları kullanarak da harita uygulamanızı geliştirebilirsiniz. Buna örnek olarak açık kaynaklı PietschSoft.VE projesini  (http://www.codeplex.com/PietschSoftVE3/Release/ProjectReleases.aspx?ReleaseId=2200) ve bu projenin gelişmiş lisanslı sürümü olan Simplovation.Web.Maps.VE (http://simplovation.com/) paket uygulamalarını inceleyebilirsiniz. Ancak biz hazırlayacağımız uygulamada temel VE kütüphanesini kullanarak haritaları nasıl oluşturabileceğimizi göreceğiz.

Öncelikle javascript ile kullanıcı tarafında haritaların nasıl yaratılabileceğinden bahsedelim. Sınıf kütüphanesini sayfaya referans olarak ekledikten sonra, sayfa açıldığında yüklenecek bir fonksiyon içerisinde haritanın temeli olan VEMap nesnesi yaratarak işlemlere başlayabiliriz. VEMap nesnesi  yaratırken haritayı oluşturacağı bir DIV objesinin ID değerini parametre olarak girmemiz gerekiyor. Daha sonra yaratılan nesnenin haritayı yüklemesi için LoadMap metodunu kullanıyoruz. Tamamen opsiyonel 7 parametresi bulunan bu fonksiyon ile haritanın belirlenen DIV kontrolünde çalışmasını sağlayabiliriz. Örneğimizde parametre kullanmayıp önemli VEMap metodlarını tek tek inceleyelim. SetCenter metodu ile haritanın merkez koordinatını değiştirebiliyoruz. Enlem (latitude) ve boylam (longitude) değerleri ile yaratılan VELatLong nesnelerini alan SetCenter metodu haritada istediğimiz bölgeyi merkezde görüntülememize imkan veriyor.

Harita Tipleri Tablosu

Road Yol haritası.
Shaded Bölge kenarları gölgelendirilmiş yol haritası.
Aerial Coğrafi harita.
Hybrid Bölge isimlerine sahip coğrafi harita.
Oblique Eğik açılı harita.
Birdseye Kuşbakışı harita, yatık açılı.
BirdseyeHybrid Bölge isimlerine sahip kuşbakışı harita.

Sık kullanılan bir diğer metod olan SetZoomLevel ile harita üzerinde 1-19 değerleri arasında bir zoom seviyesi belirleyebiliyoruz. Haritamıza başlangıç ayarları yaparken en son kullandığımız method ise harita tipi ayarlamaya yarayan SetMapType. Parametre olarak VEMapStyle nesneleri alan bu fonksiyon ile coğrafi ya da yol haritası gibi görünüm seçenekleri belirleyebilirsiniz (bkz. Tablo 1). Örneğimizde Türkiyenin koordinatlarını girerek hazırladığımız web sayfası şu şekilde:

Açıklama: Harita Kurulumu


<html><head><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 harita = null;

function HaritayiYukle()

{

harita = new VEMap('HaritaAlani');

harita.LoadMap();

harita.SetCenter(new VELatLong(39.28, 35.20));

harita.SetZoomLevel(4);

harita.SetMapStyle(VEMapStyle.Aerial);

}

</script></head><body onload="HaritayiYukle();">

<div id='HaritaAlani' style=" width:400px; height:400px;"></body></html>


Merkezini ayarladığımız haritanın ilk görünümü

Haritanızı oluşturmayı başardıysanız, uygulamamızın bir sonraki aşamasına geçebiliriz. Harita üzerinde belirli koordinatları merkezde görüntülemek için, yukarıda bahsettiğimiz SetCenter fonksiyonunu kullanarak kullanıcımızı yönlendirebiliyoruz. Yapmanız gereken, merkeze yerleştireceğiniz koordinatları belirledikten sonra, bu değerden bir VELatLong nesnesi yaratmak ve SetCenter metodunu çağırmak. Bu çağırma işlemini javascriptle yaparsanız, harita kütüphanesinin sınıfları AJAX tabanlı çalıştığı için sayfamızda herhangi bir yenilenme (postback) işlemi gerçekleşmeyecektir. Örneğimize İstanbul ve Ankara’nın koordinatlarını döndüren iki küçük fonksiyon ile başlıyoruz. Daha sonra bir koordinat alarak harita objemizin SetCenter methodunu çağıran MerkezBelirle fonksiyonu ile işlemi tamamlıyoruz. Dizayn alanında sayfanıza ekleyeceğiniz buton, resim veya köprü (hyperlink) nesneleri ile ilgili metodları çağırabilirsiniz. Burada dikkat etmeniz gereken nokta, köprü kullanımında adres (href) değerini anchor karakteri olan “#” ile doldurarak sayfada bir yenilenme işlemini engellemenizin gerekmesi. Hazırladığımız kodları aşağıda inceleyebilirsiniz:

JS Fonksiyonları:


function istanbulKoord()

{

var koord = new VELatLong(41.20, 29);

return koord;

}

function ankaraKoord()

{ return new VELatLong(40.02, 32.61); }

function MerkezBelirle(koord)

{ harita.SetCenter(koord); }

HTML Kodlar:


<a href='#' onclick='MerkezBelirle(istanbulKoord());'>İstanbul</a><br />

<a href='#' onclick='MerkezBelirle(ankaraKoord());'>Ankara</a><br />


Haritamız DIV alanı içerisine yüklenecek.

ŞEKİL EKLEMEK

Virtual Earth’ün kütüphanesinde hazır bulundurduğu bir diğer sınıf da şekiller. Harita üzerine şekil eklemek, çizim yapmak veya bir alanı seçmek için VEShape nesnelerini kullanabilirsiniz. Raptiye (PushPin), çizgi (PolyLine) ve poligon (Polygon) olarak çeşitlendirilen bu eklentilerden kullanmak istediğimizi nesne yaratırken belirliyoruz.Farklı bir katmanda oluşturulan şekil nesnelerini yaratabilmek için bir şekil tipi (VEShapeType) ve eklenecek bölgenin koordinatlarını girmemiz yeterli. Resmi değiştirilebilen şekil objeleri, kullanıcıya istediğimiz mesajı göstermek için başlık ve açıklama bilgilerine de sahip. Örneğimizde harita üzerinde belirli bir noktayı raptiye (PushPin) şekli ile işaretleyip, SetTitle ve SetDescription metodlarını kullanarak bir açıklama ekleyeceğiz. Şekil üzerinde düzenlemeleri bitirdiğimiz zaman harita nesnesinin AddShape fonksiyonu ile ekleme işlemini gerçekleştiriyoruz. Örneğimizde hazırladığımız PushPinEkle fonksiyonu ve kullanılışını aşağıda görebilirsiniz:

Açıklama: Şekil Eklemek


function PushPinEkle(koord, baslik, aciklama)

{ var sekil = new VEShape(VEShapeType.Pushpin, koord);

sekil.SetTitle(baslik);

sekil.SetDescription(aciklama);

harita.AddShape(sekil);

}
<a href='#' onclick='PushPinEkle(istanbulKoord(), "Sariyer", "Kilyos plajı");'>Sariyer</a><br />

<a href='#' onclick='PushPinEkle(ankaraKoord(), "TBMM", "Turkiye Buyuk Millet Meclisi");'>TBMM</a>


PushPin gibi eklentiler kullanıcı deneyimini arttırıyor.

SUNUCU KONTROLLERİ

Dahili Virtual Earth sınıfları AJAX tabanlı çalıştığı için javascript ile kullanıcı tarafında interaktif bir uygulama çalıştırmayı başardık. Ancak ekleyeceğiniz sınıflar ya da geliştirmek isteyeceğiniz özellikler için kodları sunucu tarafında çalıştırmak isteyebilirsiniz. Bu durumda ilk yapmamız gereken Ajax Extensions altındaki ScriptManager objesini sayfamıza taşımak. Sonraki adım kullanacağımız .js dosyalarını ScriptReference nesnesi ile sayfaya eklemek. Sistemin çalışma mantığını aşağıdaki kodlar üzerinde inceleyebilirsiniz:

Açıklama: Şekil Eklemek


<script type="text/javascript">

var harita = null;

function HaritaYukle()

{

harita = new VEMap("myMap");

harita.LoadMap(new VELatLong(39.2, 35.2),6);

}

Sys.Application.add_load(HaritaYukle);

</script>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager runat="server" ID="ScriptManager1">

<Scripts>

<asp:ScriptReference Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" />

</Scripts>

</asp:ScriptManager>

<div id="myMap" style="position:relative; width:600px; height:400px;"></div>

DÜNYA TURU

Gelişimi devam eden coğrafi bilgi sistemlerinin kullanımı da gün geçtikçe artıyor. İnternette birçok firmanın yararlandığı bu uygulamalar artık sadece adres göstermek için değil, emlak, arsa tanıtımı yapmak, filo takibi gerçekleştirmek gibi değişik alanlarda kullanılıyor. Örneğin bu yıl Microsoft’un düzenlediği Imagine Cup yarışmasında sürdürülebilir çevre için harita uygulamalarının yazılımcılıar tarafından yoğunlukla kullanıldığına şahit olduk. Bunların yanında CV’sini harita üzerinde hazırlayanlar gibi kişisel amaçlara yönelik yaratıcı uygulamalar da internette yerini almakta. Bu olanaklardan yaralanmanız, sitenizi takip edenler açısından kesinlikle faydalı olacaktır.

p.s. Bu yazı Haziran 2008 tarihli PC Magazine dergisi makalemden derlenmiş olup, kullandığım IDE, API ve toolkitlerin yeni versiyonunu indirmenizi tavsiye ederim ;)

Related posts:

  1. Ajax Extender nesnelerinin kullanimi
  2. ASP.NET Ajax kullanarak iletisim formu hazirlamak
  3. ASP.NET Ajax Kullanarak Facebook Uygulamasi Gelistirmek
  4. ASP.NET AJAX ile dinamik RSS okuyucu hazirlamak