Teknoloji, CBS ve Hayata Dair Herşey
alperdincer
Bu kullanıcı herhangi bir kişisel bilgi paylaşmamış
alperdincer tarafından yayınlananlar
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.
Mekansal.com’dan AlperDincer.net’e taşınma
26 Agu
Geçen senelerde Coğrafi Bilgi Sistemleri hakkındaki yazılarımı diğer bir sayfam olan www.mekansal.com/blog altında yayınlamaya başlamıştım. Ama bir süredir 2′si Türkçe, 1′i de İngilizce olmak üzere 3 blog tutmak biraz zor olmaya başladı ve ben de bu sayıyı 2′ye indirmeye karar verdim. Bu nedenle Mekansal.com’daki yazılarımı yavaş yavaş buraya taşıyıp, oradaki blogu kapatmayı planlıyorum.
Bu taşınma sonrası da özellikle web tabanlı CBS ve Google Maps API hakkında yazılara buradan devam etmeyi düşünüyorum. Umarım vakit ayırıp sizlerle faydalı makaleler paylaşabilirim.
Facebook resmi şarkısına kavuştu…
26 Agu
Bu sabah düzenli olarak takip ettiğim sitelerden olan TechCrunch’a gördüğüm bir yazıyı paylaşmak istedim. TechCrunch genel olarak web hakkında gelişmeleri görebildiğiniz, startup’ları tanıtan inceleyen bir site olarak tarif edilmekte.
İlk okuduğumda beni şaşırtan bu yazı, sonradan da düşündürmedi değil 
Yazının başlığı “Okay, Now Facebook Has Officially Made It. They Have A Turkish Music Video” olunca merak ettim ve devamını okudum ve karşıma İsmail YK’nın “muhteşem(!)” facebook şarkısı çıktı 
Yazının özetinde biraz ti’ye alarak Facebook’un resmi şarkısına kavuştuğunu ve klibin içeriğini anlatıyor.
TechCrunch’da daha önce de Türkiye ile ilgili haberler çıkmış, bunların içeriği başta YouTube yasağı olmak üzere yasaklamalar ve güvensiz internet olmuştu. Ama artık bu haberler harici de ismimizin çıkmasından gurur duydum!
iExtMap v1.0 – iOS için Mobil CBS Uygulaması
24 Agu
2 seneden beri IPhone uygulaması geliştirmek istiyor fakat bir MAC edinemediğim için bu hayalimi sürekli erteliyordum. Geçen mayıs ayında Mac Book Air’ıma kavuşunca hemen nasıl IPhone uygulaması geliştirebilirim diye çalışmalara başladım. İlk etaplar biraz zor olsa da öğrendim, sonra App Store’a geliştirici olmak için başvuruda bulundum falan derken baya bir zaman geçti. Apple ile çalışmak uygulamaları kullanmak kadar kolay değil bunu baştan söyleyeyim
Neyse bir süre sonra ilk uygulamam olan iEczane’yi çıkardım ve sonrasında aklımda olan projeye başladım. Proje IPhone ve IPad için CBS Uygulaması geliştirmekti. 1 aylık bir süreç sonrasında bunu başardığımı düşünmekteyim Uygulama Google Maps altlığı üzerinde başta ArcGIS Servislerini olmak üzere, WMS, KML/GeoRSS ve statik Tile servislerini destekleyen bir yapıya sahip. Ayrıca istediğiniz ekran görüntülerini etiketleyerek sonra gitmek üzere kaydedebilirsiniz. Uygulama için hedefim sadece Türkiye olmadığı için İngilizce olarak hazırladım. Belki ileride Türkçe versiyonunu da çıkartabilirim.
Uygulama ile ilgili detaylı bilgi için http://www.extmap.com/index.php?pid=5 adresine göz atabilirsiniz.
Uygulamadan birkaç ekran görüntüleri :
iEczane v2 geliyor
24 Agu
1 ay kadar önce ilk Iphone uygulamam olarak App Store’da yerini alan iEczane artık büyüdü ve 2. versiyonunu yayınlamaya hazırlanıyor.
İlk versiyonda 3 büyük il olmasından dolayı ve verinin eski olması nedeniyle bazı veri sorunlarından dolayı eleştirilmişti. Bunun üzerine ne yapabilirim diye düşünürken bir işbirliği fikri ortaya çıktı ve sonrasında bu fikir gerçekleşti.
Google Maps’e Türkiye haritasını ve lokasyon verilerini sağlayan Başarsoft firması ile işbirliğine giderek eczane veritabanımızı 3 il ve 4000′den 81 il ve 17692 adede çıkartık. Artık kapsama alanı olarak Tüm Türkiye’deyiz. Nöbetçi Eczane konusunda ise Türkiye’deki veri paylaşma sıkıntısı nedeniyle hala sadece “Ankara”yı gösterebiliyoruz. Umarım bu durum ilerleyen versiyonlarda düzelir.
Ayrıca sadece veri olarak değil, haritaların görünümü ve ikonlarını da değiştirdik. Böylece daha kullanışlı bir uygulama oldu diye düşünmekteyiz.
Uygulama şu an App Store’da onay bekliyor. 1 haftaya indirmeye hazır olur diye düşünmekteyim.
Güle güle kullanınız
Yeni versiyonun bazı ekran görüntüleri :
Türkiye’de ücretsiz yazılım geliştirmek…
24 Agu
Uzun zamandır projeler dolayısıyla günlüğüme yazamıyordum. Bugün bir soluk aldım ve kafama takılan bir konuda yazmak istedim.
Eğer takip ediyorsanız, 1 ay kadar önce iEczane isminde ücretsiz bir IPhone uygulaması geliştirdim ve bunu Türk halkının hizmetine sundum. Elimde bir süre önce edindiğim veri ile insanlara bir yardımım olur mu diye düşünmekteydim. Yani anlayacağınız güzel duygular ile başladım bu işe.
Ama sonra ne oldu? Bir hafta sonra 2-3 yorum yazıldı uygulama hakkında ve bunlar beni şok etti. Neler yazmadılar ki “Böyle dandik bir uygulama görmemişler” mi yazmadılar, “Apple’ın böyle uygulamaları neden yayınladığını” mı yazmadılar
İlk başta çok kızdım ama sonra anladım ki Türk halkı böyle Üretkenliğin sıfır olduğu ama eleştiriye gelince sanki kendi böyle bir şey üretmiş de çok kolaymış gibi konuşabilen bir milletiz ne yazık ki? Sonra örnekleri düşündüm. Gazetelerdeki yorumlar aklıma geldi önce, sonra TV Haberlerindeki insanların yorumları aklıma geldi ve benim başıma gelen şeyin de normal olduğunu düşündüm. Çünkü millet olarak başta süper ekonomiden anlarız ama nedense ay sonunu getiremezler Ya da herkes spordan teknik direktör daha iyi anlar ama teknik direktörler milyon dolarları alırken onlar ne alır? Neyse bu örnekler uzar gider…
Velhasıl, daha önce blog yazarken de başıma gelenler bu ücretsiz uygulamada da başıma geldi. İnsanımız şevk kırmak yerine biraz olumlu yaklaşsa ne olur değil mi?
Neyse Türkiye’de böyle şeyleri yapmak zor zanaat, Allah bizim gibi insanlara sabır versin demekten başka birşey de aklıma gelmiyor artık
İlk IPhone Uygulamam : iEczane
24 Tem
Uzun zamandır günlüğüme yazı yazamıyordum, sebebi ise üzerinde uğraştığım IPhone ve Android uygulamalarıydı. Bunlardan ilki 8 günlük bir bekleyişten sonra App Store’da yayına giren ilk IPhone uygulamam olan “iEczane” oldu.
http://www.mekansal.com/iphone/ieczane.html adresinden detaylarına ulaşabileceğiniz ücretsiz uygulama ile Ankara, İstanbul ve İzmir’deki 4000 üzerindeki eczanelere konumları ile ile beraber harita üzerinde erişebileceksiniz. Ayrıca bulunduğunuz konumdan eczaneye gidecek yolu gerek harita üzerinde gerekse yazı ile öğrenebileceksiniz. Ayrıca şu an için sadece Ankara için “Nöbetçi Eczane”lere de konumsal olarak ulaşabileceksiniz. Yakında diğer şehirlere ulaşmak gibi planlarımız da mevcut.
Umarım faydalı bir uygulama olmuştur. Aşağıda uygulama ile ilgili ekran görüntüleri bulunmaktadır.
Uygulamayı indirmek için ise : itms://itunes.apple.com/tr/app/ieczane/id382586889?mt=8 adresine gitmeniz yeterli.
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.
