Opera 29 [Mobil-Masaüstü] kararlı sürüm yayınlandı..

Geolocation Nedir? Web Geliştiricileri Nasıl Kullanır?

Yazan: Çağlar Yeşilyurt | 11 Temmuz 2011 | Geolocation HTML5 w3c Web geliştirme Web standartları yer belirleme

 

Bilmediğiniz bir şehre gittiniz ve acıktınız. Bölgede bulunan iyi restoranların yerlerini de bilmiyorsunuz. Bir uygulama etrafınızdaki iyi restoranların listesini gösterse güzel olmaz mıydı? Üstelik bu lokantalar hakkında müşterilerin yorumlarla birlikte. Geolocation sayesinde dünya üzerindeki fiziki konumunuz tespit edilebilir ve bu bilgi, bu gibi, çeşitli amaçlarla kullanılabilir.

Geolocation sayesinde konum bilginiz yani dünya üzerinde nerede olduğunuza dair bilgi, daha net bir şekilde elde edilebilecek. Geolocation Opera 10.60+, Firefox  3.5+, Safari 5.0+, Internet Explorer 9.0+, Chrome 5.0+ ile beraber internet hayatımıza girdi.

 

Geolocation Nedir?

Geolocation(coğrafik yer) tarayıcının kendi içindeki komutları kullanarak kullanıcının yerinin saptanmasıdır. Web uygulamalarında kullanılan ve sayısız avantaja sahip bu teknoloji tarayıcıların sahip olacağı en ilginç özelliklerden de biridir. Örneğin, size en yakın hastaneyi turn-by-turn route(sağa sola dön komutları vererek) ile gösterebilecek bir sistem kurabilirsiniz. Ya da yakın tarihlerde çevrenizdeki büyük buluşmaları, partileri, eğlenceleri gösterecek bir uygulamaya ne dersiniz? Heyecanlandınız mı? Okumaya devam edin!

 

W3C Geolocation API

İnsanlar oldukça uzun bir süredir web kullanıcıların yerlerini öğrenmeyi deniyorlar. Buna karşın, kullanılan eski yöntemler hem doğru sonuç vermiyor hem de konum bilgisi almak için kullanıcıdan izin istemiyor. W3C tarafından belirlenen W3C Geolocation API’ı  sayesinde web geliştiricileri, nerede olduğunu bilen uygulamalar yazabiliyorlar. Bu API ile bütün tarayıcılarda aynı şekilde kullanılabilen(cross browser destekli) tekdüze bir yol sunuyor. Geolocation öndeki sistemlere göre daha doğru sonuçlar veriyor ve kullanıcı eğer isterse konumunu siteyle paylaşmıyor.

 

Yeriniz Nasıl Belirleniyor?

Geolocation destekleyen tarayıcılarda konum bilgisi kablosuz sinyaller için erişim noktalarına ve kullanıcıların ip adreslerinin kombinasyonuna dayanarak belirleniyor. Bunun anlamı yerleri belli olan kablosuz ağ merkezlerinin yakınındaysanız yeriniz daha net bir şekilde belirlenebiliyor. Tersine kablolu internet kullanıyorsanız, sizin için saptanan yer sizden daha da uzakta olabiliyor.

 

Kullanıcı Kendi Konumunu Paylaşmayı Nasıl Engelleyebilecek?

Geolocation ile ilgili bir kod işlenmek istediği zaman sayfanın üstünde konumunuzu girdiğiniz site ile paylaşmak isteyip istemediğinize dair bir uyarı paneli belirecek. Eğer konumunuzu siteye bildirmek isterseniz “Konumumu paylaş“ı seçin. Aynı siteye tekrar girdiğinizde bu sorunun sorulmamasını istiyorsanız “bu site için tercihimi hatırla” kutusunu işaretleyin. Böylece sayfaya girdiğinizde Opera seçtiğiniz seçeneğe göre davranacak. Benzer şekilde konum bilginizi paylaşmak istemiyorsanız, gizliliğiniz açısından seçim yaptığınız panelde “Engelle” düğmesine tıklayabilirsiniz.

 

Geolocation Bir Web Uygulamasında Nasıl Kullanılır?

Geolocation API kullanmak oldukça kolay. İlk olarak kullanıcının tarayıcının gerçekten Geolocation desteğinin olup olmadığını denetlemek isteyeceksiniz. Böylece kullanıcıya Geolocation desteği olmayan bir tarayıcı kullandığını söyleyebilirsiniz. Bunu Javascript ile yapabilirsiniz. Eğer tarayıcı navigator.geolocation özelliğini destekliyorsa ona Geolocation ile ilgili kodları çalıştırma direktifi verebilirsiniz.

[codesyntax lang=”javascript”]

//Tarayıcının W3C Geolocation API'ı destekleyip desteklemediğini kontrol et
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(basariliFonksiyon, hataFonksiyonu);
} else {
    alert('Şuan kullandığınız tarayıcıda aktif değil ama bu sayfa için Geolocation gerekli gibi. Lütfen Geolocation destekli bir tarayıcı kullanın.');}

[/codesyntax]

Hazırladığınız uygulamada Geolocation destekli tarayıcı kullanmayan kullanıcılar için fazladan bir fallback sistemi kurmayı unutmayın. Bu fallback sistemi, bulundukları yerin posta kodunu girmek ya da haritada bulundukları yerleri seçmek şeklinde olabilir.

Eğer tarayıcı yerinizi bulmada başarılı olursa bunun için şöyle bir fonksiyon kullanabilirsiniz.

[codesyntax lang=”javascript”]

function basariliFonksiyon(konum) {
    var enlem = konum.coords.latitude;
    var boylam = konum.coords.longitude;
    alert('Enleminiz:'+enlem+' ve boylamınız '+boylam);
}

[/codesyntax]

Başarılı bir işlem sonunda yukarıdaki fonksiyon çalışacak ve enleminizi ve boylamınızı size söyleyecek. İşlemin başarısız olması durumunda da bir fonksiyon çalıştırabilirsiniz. W3C’nin bu sayfasında belirtilen hata kodlarını kullanarak daha anlamlı fonksiyonlar hazırlayabilirsiniz. Mesela kullanıcı konum bilgisini paylaşmak istemezse hata kodu 1 olarak görünecektir.

[codesyntax lang=”javascript”]

function hataFonksiyonu(konum) {
    alert(Hata!');
}

[/codesyntax]

 

Burada yukarıdakilerin uygulandığı temel bir sayfa var.
Eğer kullanıcının konumunu sürekli takip etmek istiyorsanız ve fonksiyonu buna göre güncellemek istiyorsanız, bunu yapmak için navigator.geolocation.watchPosition() fonksiyonunu kullanabilirsiniz. Bu fonksiyon da getCurrentPosition() ile aynı parametreleri alır ve aşağı yukarı aynı şekilde çalışır. Her iki fonksiyon da iki paramatre alır ancak bunlardan ilki gereklidir, hata geri bildirimi yapan ikinci parametre seçime bağlı olarak kullanılabilir. Burada üçüncü bir parametre daha vardır. Bu son parametre üç tane ayarıtanımlamak için kullanılıyor:

  • Daha doğru tahmin ayarı (daha doğru yer tahmini yapar ancak süreç daha uzun sürer)
  • Zaman aşımı ayarı – yer bulma işleminin başlamasıyla basarılı fonksiyonun çağrılma zamanları arasındaki maksimum süreyi belirler. Bu süre sonunda zaman aşılmış olur ve süreç başarısızlıkla sonuçlandırılır.
  • Maksimum süre – Bir sonraki getCurrentPosition() or watchPosition() fonksiyonları çağrılana kadar uygulama burada belirtilen süre boyunca yerinizi hafızasında tutar.

 

Sonraki Aşamalar?

Kullanıcının konumunu gayet güzel bir şeklilde almayı başardık. Buna rağmen bu API ikili şeklinde(enlem ve boylam) sonuçlar vermekte. Bu ikilinin dünya üzerinde nereye karşılık geldiğini nasıl bileceğiz? Burada ters geokodlama devreye giriyor.

Ters geokodlama koordinatların nereye karşılık geldiğini bulmamızı sağlayacak. Örneğin, eğer bize (38.898748, -77.037684) enlem ve boylamı verilirse, ters geokodlama buranın Washington, D.C.’deki Beyaz Saray olduğunu söyleyecek. 

Ters geokodlama için bir çok yöntem mevcut ve bunların hepsi harici araçlar gerektirmekte. Bu iş için GeoNames.org’un API’ını kullanabileceğiniz gibi gönüllüler tarafından yürütülen WikiMapia’nın API’yını yada Nominatim olarak adlandırılan Veri Kümesini de kullanabilirsiniz. Google Haritalar da enlem/boylam ikilisininin gerçek dünyada nereyi işaret ettiğini gösteren ters geokodlama işlevi sunmaktadır. 

Diğer API’lar arasında bulunan  Flickr API, belirli bir bölgede çekilen fotoğrafları elde etmeyi sağlayan yöntemler sunmakta, ve Meetup.com API ve diğerleri bulunmaktadır.

Haritada Sizi Bulalım

Basit bir uygulama hazırlayalım. Bu uygulama Google Haritalar’ı kullansın ve sizin şu anda nerede olduğunuzu göstersin. İlk olarak Google Haritalar betiğini yüklemek için sayfamıza şu kodu ekleyeceğiz.

[codesyntax lang=”html4strict”]

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

[/codesyntax]

Devamında yerimizi bulan kodları ve bu alana odaklanmış bir harita gösteren kodu ekliyoruz. Bunlar Javascript kodudur. 

[codesyntax lang=”javascript”]

// Geolocation desteği olup olmadığını kontrol et
if (navigator.geolocation) {
    // Yeri belirle
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
} else {
    alert('Geolocation tarayıcınızda aktif değil gibi. Lütfen Geolocation destekli bir tarayıcı kullanın.');
}

// Başarılı bir işlemde çalıştırılacak fonksiyon
function displayPosition(pos) {
    var mylat = pos.coords.latitude;
    var mylong = pos.coords.longitude;
    var thediv = document.getElementById('locationinfo');
    thediv.innerHTML = ' Boylamınız ' + mylong + ' ve enleminiz ' + mylat + '';

// Google Haritaları yükle
var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// İşaretçi ekler
var marker = new google.maps.Marker({
	     position: latlng,
	     map: map,
	     title:"Buradasınız"
	 });
}

// Hata oluşması durumunda çalıştırılacak fonksiyon
function errorFunction(pos) {
    alert('Hata!');
}

[/codesyntax] 

 Son olarak bu verileri göstermek için aşağıdaki HTML’i ve CSS’i ekliyoruz.

[codesyntax lang=”css”]

html, body {
    width: 100%;
    height: 100%;
}
#map_canvas {
    height: 85%;
    width: 100%;
}

[/codesyntax]

[codesyntax lang=”html4strict”]

<body>
    <div id="map_canvas"></div>
    <div id="locationinfo"></div>
</body>

[/codesyntax]

 Aşağıdaki görüntü yukarıdaki örneğin çalışır durumdaki hali. Sayfaya girdiğinizde konumunuzu paylaşmak isteyip istemediğinizi soracak ve sonra yerinizi gösterecek.

Ekran görüntüsünde adres çubuğunun sağ tarafındaki yeşil bir simgeyi farketmiş olabilirsiniz. Bu simge Geolocation kullanan her sayfada olacaktır. Eğer konum paylaşma isteğini reddederseniz bu simge kaybolacaktır. Bu simgeye tıklarsanız bulunduğunuz sayfaya özel Geolocationu kapatma gibi, Geolocation ile ilgili ayarlara ulaşacaksınız.

 

Sonuç

W3C Geolocation API, geliştiricilere kullancıların konumunu kullanabilmeleri için heyecan verici ve elverişli bir yol sunmakta. Geçmiş yöntemlere göre daha doğru sonuçlar vermekte ve kullanıcılara daha ileri düzeyde gizlilik seçenekleri sunmaktadır. Şimdi web geliştiricilerinin bu API’ı kullanarak değişik uygulamalar yapma zamanı.

Kaynak

Vivaldi Türkiye sitesi