Teknoloji, CBS ve Hayata Dair Herşey
CBS
Google Maps JS API V3 – Olaylar (Events)
29 Agu
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 Agu
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.
Google Maps JS API V3 – Konsept
26 Agu
http://code.google.com/apis/maps/documentation/v3/basics.html
Bu yazı yukarıdaki eğitsel dökümanın Türkçe özeti olarak tanımlanabilir.
Google Maps uzun zamandır kullandığı JS API’ya (v2) yeni bir version (v3) daha ekleyerek daha çok mobil cihazları hedefleyen daha hızlı olan bir güncelleme yaptı.
Bu versiyon ile ilk etapta yüklenen JS dosyasının boyutu düşürülerek “Nesne Tabanlı” bir yapıya geçildi. Bu versiyon ile beraber daha modüler bir yapı tasarlandı. Yazımız boyunca Google Maps JS API V3′ü inceleyerek örnek mobil uygulamalar geliştireceğiz.
Yeni versiyonda ilk göze çarpan yenilik “Anahtar”sız olması. Bildiğiniz üzere önceki versiyonu sitenizde ya da geliştirme ortamınızda kullanmanız için GMail adresiniz ile bir anahtar almanız ve bu anahtarı da sayfanıza eklemeniz gerekmekteydi. Oysa V3 ile beraber bundan kurtuluyoruz.
V3′te JS API’yi sayfanıza aşağıdaki şekilde ekliyorsunuz :
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
Buradaki “sensor” parametresi mobil cihazlarınızdaki GPS gibi sensorleri kullanıp kullanmayacağınıza göre değişiyor. Eğer kullanmayacaksanız bile bu değeri “false” diyerek sistemin az da olsa yükünü hafifletebilirsiniz.
Bu versiyonu mobil cihazlarda kullanacağımız için aynı zamanda “div” ayarlarını da ona göre yapmak lazım. En uygun çözüm “div”in genişlik (width) ve yükseklik (height) özelliklerini 100% yapmak. Eğer genel bir uygulama geliştiriyorsak ve bunun aynı zamanda IPhone ve Android cihazlarda da çalışmasını istiyorsak o zaman cihaz tipine göre davranmak en mantıklısı olacaktır. Bu durumda aşağıdaki JS kodunu kullanmak uygun olacaktır.
function tarayiciDenetle() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");
if (useragent.indexOf(‘iPhone’) != -1 || useragent.indexOf(‘Android’) != -1 )
{ //eger IPhone ya da Android ise ekrana oturt
mapdiv.style.width = ’100%’;
mapdiv.style.height = ’100%’;
}
else
{ //masaüstü ise de 800*600′lük bir div hazırla.
mapdiv.style.width = ’600px’;
mapdiv.style.height = ’800px’;
}
}
Ayrıca kullanıcının görüntünün boyutunu değiştirmemesi için HTML tarafında da mobil tarayıcıların anlayacağı “meta” etiketleri kullanmamız gerekmektedir. Bunun için sayfanın “head” kısmına
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
eklersek sorun çözülecektir.
Yerelleştirme :
Eğer Türkiye dışında da kullanılacak bir uygulama geliştiriyorsanız, o zaman yerelleştirme de uğraşmanız gereken konular arasında olacaktır. Bu noktada çok detaya girmeden Google’ın bize sunmuş olduğu harita kontrolleri konusundaki yerelleştirmeden bahsedeceğim.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=tr">
Yukarıdaki kodu kullandığınız takdirde harita Türkçe destekli olarak yayınlanacaktır.
Bu kısım konuya giriş olarak nitelendirilebilir. Bir sonraki kısımda yavaştan uygulama geliştirmeye başlayacağız.
Mobil CBS için ESRI Araçları (JavaScript API ve IPhone SDK)
9 Tem
Yazı başlığı biraz ilginç oldu ama bazı kelimelerin tam Türkçe karşılığı olmayınca böyle yazmak zorunda kalıyorum.
Daha önceden mobil cihazlarda CBS uygulamaları için Google Maps API V3 kullanıyordum ama bu haber ile artık ESRI araçlarını da mobil CBS uygulamaları için kullanabileceğim.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_compactbuild.htm adresinden ulaşabileceğiniz ESRI JavaScript API Compact Build ile temel özelliklere mobil cihazlar üzerinden erişebileceksiniz.
Mobil uygulamalar için ayrıca ESRI’nin bu sene duyurduğu IPhone SDK ile de Objective-C ile native IPhone uygulamaları yazabilirsiniz.
Son olarak ESRI App Store’a yeni ücretsiz bir uygulama ekledi. Bu uygulama ile ArcGIS Servislerine ulaşıp IPhone’nunuz üzerinden görebilmektesiniz.
ESRI Sertifikasyonu yolda
1 Tem
Birçok yazılım firması ürünleri için sertifikasyon vermekteyken ESRI firmasında bu uygulanmamaktaydı. ESRI Kullanıcıları Konferansı 2010′da bunu değiştirmeyi planlıyor.
Balkan’dan aldığım habere ve bu adresteki bilgilere göre Temmuz ayından sonra belli kategorilerde ESRI Sertifikalı olabileceğiz gibi duruyor.
Görelim bakalım neler olacak…
ArcGIS 10 çıktı…
1 Tem
Uzun zamandır ESRI’nin üzerinde çalıştığı, daha önce ArcGIS 9.4 olarak adlandırılan fakat sonra ArcGIS 10 olarak değiştirilen ürün piyasaya sürüldü. Daha önceden DVD’ler üzerinde ulaşabildiğimiz ürüne artık webden indirerek ulaşabiliyoruz.
Eğer sizinde bizim gibi EDN üyeliğiniz varsa gerek ArcMap gerekse Server ürünlerini indirebilir ve hemen kullanmaya başlayabilirsiniz.
http://www.esri.com/software/arcgis/arcgis10/index.html adresinden ArcGIS 10 ile gelen yeniliklere ulaşabilirsiniz. Ayrıca masaüstü versiyonu olan ArcMap’in bir ekran görüntüsüne aşağıdan ulaşabilirsiniz.
