Teknoloji, CBS ve Hayata Dair Herşey
Google Maps JS API olarak etiketli yazılar
Google Maps Sertifikam geldi…
9 Nis
2009 sonunda aldığım Google Maps Kalifiye Geliştirici (Qualified Developer) sertifikam ile yanında Google’ın hediyeleri t-shirt ve rozet hediyeleri geldi. Daha öncesinde sadece webden yayınlanan sertifikam artık hard-copy olarak da elime geçmiş oldu 
Teşekkürler Google
Hacettepe Üniversitesi Beytepe Kampüs Bilgi Sistemi
6 Eki
2009 yılında Hacettepe Bilgi Belge Yönetimi Bölümündeki BBY 310 dersi kapsamında Balkan ve beni Yaşar Hocamız (Yaşar TONTA) “mentor” olarak çağırınca başlayan bir projeden bahsetmek istiyorum. Ders kapsamında öğrenciler ile birlikte geliştirdiğimiz kampüs bilgi sistemi ile Google Maps altlığı üzerine kampüsün haritasını ekleyerek kullanılabilirliği arttırmaya çalıştık.
www.beytepecampus.com adresinden ulaşabilen sitede çalışabilirliği arttırmak için farklı bir teknoloji kullandık. Kullanıcı arayüzünü daha önce ödül alan uygulamam olan ExtMap‘ı kullanıp, tamamen javascript tabanlı bir sistem geliştirdik. Arka planda ise PHP ile veritabanı olarak da Google SpreadSheets’i kullandık. İlk etapda biraz garip gelse de bu sistem gerçekten hem veri toplama kısmını hızlandırdı hem de kullanıcıya sunum kısmını hızlandırdı. Google’un sağlamış olduğu Docs API üzerinden Google SpreadSheets’e ulaşarak sanki veritabanı kullanır gibi uygulamamızı geliştirdik. Aslında burada PHP’yi kullanmamızın tek zorunluluğu “proxy”ye olan ihtiyacımızdı. Biz uygulamamızı geliştirirken aynı zamanda birden fazla kişi de Google SpreadSheets’i kullanarak verileri aynı anda sisteme girmeye devam ettiler. Böylelikle hızlı bir şekilde ve Google’ın alt yapısını kullanarak neredeyse “0″ (sıfır) maliyetle “Bulut Bilişim” teknolojisi üzerine uygulama geliştirmiş olduk.
Aşağıdaki ekran görüntülerinden de göreceğiniz üzere uygulama gayet esnek oldu, en azından benim düşüncem böyle Umarım diğer üniversitelerde de böyle çalışmalara başlar ve haritalar hayatımıza daha da renk katar.
Uygulamanın Ekran Görüntüsü
Türkiye Güneş Enerjisi İnteraktif Haritası
6 Eki
Günümüzde enerji önemli bir konuma sahip ve bu nedenle birçok savaş çıkıyor. Gün geçtikçe enerji kaynakları azaldığı için alternatif enerji kaynakları önem kazanmaya başladı. Bunların da başında bitmek tükenmek bilmeyen ve çevreye zararı olmayan güneş enerjisi geliyor. İlk kurulum masrafları biraz yüksek olsa da ilerleyen zamanlarda elektriğimizin büyük bir kısmını güneş enerjisinden kullanabiliriz gibime geliyor. Tabi herşey teknoloji ile de olmayacak ama bu bugünün konusu değil
6 ay önce bir konferans için APlus Enerji firmasından arkadaşlarım Mehmet ve Ozan ile birlikte bir makale yazdık. Makale kapsamında bir de uygulama yazalım istedik ve uygulama kısmı ile ben ilgilendim. Uygulamayı bir seviyeye getirdikten sonra bunu herkesle paylaşmak amacı ile www.gunesharitasi.com adresinde uygulamayı dünyaya açtık.
Yukarıdaki resimde de görüldüğü üzere Türkiye’nin Güneş Enerjisi Potansiyeli tematik olarak renklendirilerek harita üzerine aktarıldı. Ama sadece bunun yeterli olmayacağı düşünülerek noktasal verileri de sisteme ekledik. Veriler 1 Km’lik gridler olarak hazırlandı. Ayrıca ışıma (kWh/m2) verisine ek olarak, eğim ve yükseklik verisine de sistem aracılığı ile ulaşabilirsiniz. Böylelikle herhangi bir enlem ve boylamdaki bu verilere ulaşmanız sağlandı. Aşağıdaki resimde bununla ilgili detaya ulaşabilirsiniz.
Bu özellikler haricinde alanları ya da uzunlukları ölçmeniz için araçlara, altlık haritaları (uydu görüntüsü, arazi, yol) değiştirmenize yarayan araçlara da sistem üzerinden erişebilirsiniz. Bu özellikler ile ilgili ekran görüntüsüne de aşağıdan erişebilirsiniz.
www.günesharitasi.com adresinden ulaşabileceğiniz uygulama tamamen ücretsiz olup size bir fikir vermesi amacıyla geliştirilmiştir. Yani bu uygulamayı projelerinizde kullanamanız durumunda çıkabilecek sorunlardan sorumluluk kabul etmemekteyiz. Ayrıca sistemin teknik tarafı Google Maps JS API üzerinde Google App Engine servisleri ile entegre olacak şekilde ExtMap’in yeni yapısı ile tasarlandı. Google App Engine kullanıldığından dolayı da Bulut Bilişim yaklaşımı kullanılmış oldu.
Google Maps JS API V3 – Olaylar (Events)
29 Ağu
http://code.google.com/apis/maps/documentation/v3/events.html
JavaScript de diğer programlama dillerinde olduğu gibi çeşitli olaylar içererek bunlara cevap verip kullanıcı ya da program içerisindeki diğer modüllere ulaşır. Bu olaylar sayesinde programın işleyişi şekillenmektedir. Örneğin haritanın merkezi değiştiğinde şunu yap, ya da şu yaklaşma seviyesinin altına inme gibi şeyleri olaylar yardımıyla yapabilirsiniz.
Yeni versiyonda da V2′deki gibi bir olay sistemi mevcut. Bu versiyonda 2 tip olay bulunmakta :
Kullanıcı Olayları (kullanıcının haritaya tıklaması ya da yaklaşması gibi)
MVC Yapısındaki durum değişiklikleri ile ilgili olaylar
Buradaki MVC (Model-View-Controller) yapısı daha önceki yapıda bahsettiğim Nesne Yönelimli Yapı ile ilgili bir terim. Bunun için biraz Google’dan makale okuyabilirsiniz.
İlgili olayları “google.maps.event” alan adı aldındaki metodlar ile yapabilirsiniz. Bununla ilgili detaylı örneği birazdan vermiş olacağım.
Kullanıcı Olayları :
‘click’ –> ekrana tıklayınca ortaya çıkar.
‘dblclick’ –> ekrana çift tıklayınca ortaya çıkar.
‘mouseover’ –> bir obje üzerine gelince ortaya çıkar.
MVC Durum Değişiklikleri :
Bu tipde haritanın bir özelliği değiştiğinde ortaya çıkabilir. Örneğin haritanın üstünde bir uzaklaşma/yakınlaşma olması durumunda “zoom_changed” olayı ortaya çıkmaktadır.
Harita Olayları :
Harita ile ilgili olayları addListener() metodu ile ekliyoruz. Bu metot 3 parametre almaktadır : sırası ile takip edilecek obje, objenin olayı ve olay sonrası çalışacak fonksiyon/metot. Aşağıdaki örnekte haritanın yaklaşma seviyesinin değişmesi durumunda ne yapacağımızı göreceksiniz.
<script type="text/javascript">
var harita;
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
google.maps.event.addListener(harita, ‘zoom_changed’, function () {
alert(‘Haritanın zoom seviyesi değişti!!’);
}
}
</script>
Olaylarda Parametreler :
Bazı olaylar sonucunda ortaya bazı parametrelerde çıkar. Örneğin haritaya tıklanma olayında çalışacak fonksiyona tıklanılan noktanın koordinat bilgileri de gitmektedir. Böylelikle daha interaktif bir geliştirme ortamı sunulmuş olmaktadır. Aşağıdaki örnekte haritayı takibe alıp tıklanıldığında tıklanılan noktanın koordinatları ekranda göstereceğiz.
<script type="text/javascript">
var harita;
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
google.maps.event.addListener(harita, ‘click’, function (event) {
alert(‘Noktanın koordinatları : ‘ + event.latLng.lat() + ‘,’ + event.latLng.lng());
});
}
</script>
Olaylar sırasında kullanılabilecek farklı teknikler bulunmakla beraber, bunların en önemlisi kapatma (closure) olarak isimlendirilen JavaScript’te özel (private) kullanımını sağlayan bir yaklaşımdır. Fakat bunu sonraki yazılarımızda daha detaylı olarak işleyeceğiz.
Google Maps JS API V3 – Giriş
28 Ağu
http://code.google.com/apis/maps/documentation/v3/introduction.html
Bu kısımda da Google Maps JS API V3′ün yukarıdaki eğitsel dökümanını takip edeceğiz. Bu dökümanda da örnekle başladığı gibi ben de örnekle başlayacağım.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;amp;amp;language=tr"></script>
<script type="text/javascript">
function haritayiBaslat() {
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
}
</script>
</head>
<body onload="haritayiBaslat()">
<div id="harita_div" style="width:100%; height:100%"></div>
</body>
</html>
Örnekte yaptıklarımızın üstünden adım adım gidersek :
a) Öncelikle sayfamıza Google Maps JS API’yi eklememiz gerek. Ayrıca bu kısımda mobil cihazlar için daha önceki yazımızda bahsedilen “meta” etiketler ile ayarlarımızı tamamlıyoruz. API’yi kullanırken ileride kullanacağımız GPS için “sensor=true” diyoruz. Ayrıca dil olarak Türkçe kullanacağımızı “language=tr” diyerek tamamlıyoruz.
b) Haritamızın görüntüleneceği alanı belirten “div”i ayarlıyoruz ki burada mobil cihazları düşünerek ekranın tamamını kaplayacağını varsayıyoruz.
c) Haritamızı oluşturmadan önce belli özelliklerini tanımlamamız gerekiyor ki bunu “haritaAyarlari” objesi ile oluşturuyoruz. Eğer JavaScript’teki objeler konusunda eksiğiniz var ise Google’dan bu eksiğinizi gidermenizi tavsiye ederim.
var merkezNokta = new google.maps.LatLng(39.918689, 32.801743);
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var haritaAyarlari = {
zoom: 9,
center: merkezNokta,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
V3 ile birlikte öncelikli tanımlı bir harita tipi gelmediği için bu da dahil olmak üzere harita başlangıç merkez noktası ve yaklaşma seviyesini ayarlamanız gerekmektedir. Bunun için öncelikle “google.maps.LatLng” sınıfı ile bir nokta tanımlıyoruz. Bu noktayı (center) da yaklaşma seviyesi (zoom) ve harita tipi (mapTypeId) ile beraber tanımlıyoruz.
Harita tiplerine ise aşağıdaki gibi ulaşılmaktadır. (google.maps.MapTypeId.HARITA_TIPI, buradaki HARITA_TIPI yerine aşağıdaki elemanlar gelmelidir.)
ROADMAP –> Yol haritası
SATELLITE –> Sadece uydu görüntüsü
HYBRID –> Uydu görüntüsü üzerinde yol haritası
TERRAIN –> Yükseklik haritası
d) Bu kısımda harita objemizi oluşturuyoruz. Bunun için haritayı tutan “div”in IDsi ve daha önce tanımlamış olduğumuz harita özellikleri objesi gerekmektedir.
var harita = new google.maps.Map(document.getElementById("harita_div"), haritaAyarlari);
Burada Maps sınıfından “harita” objesini oluşturuyoruz.
e) Artık haritamıza tarayıcımız yüklenince çalışması komutunu verebiliriz.
<body onload="haritayiBaslat()">
Görüldüğü üzere ilk uygulamamızı hazırladık. Uygulama Ankara üstünde standart kontroller ile 9. yaklaşma seviyesinde bir görüntü ile açılacaktır. Siz de enlem ve boylamı değiştirerek kendi istediğiniz bölgeden başlatabilirsiniz.
