JavaScript Geolocation API Kullanımı

Selamlar. Bu yazıda JavaScript Geolocation API Kullanımı hakkında bilgi vereceğim. Detaylı bilgi için bu sayfadan bakabilirsiniz.

JavaScript Geolocation API Kullanımı

Bir konuda bana lazım olmuştu. Yukarıdaki link üzerinden bilgiyi direkt aldık zaten. Eğer sırf bunun için Google maps gibi bir şeyle ilgilenmek istemiyorsanız doğru yerdesiniz.

Öncelikle bu API navigator.geolocation nesnesi üzerinden çalışıyor. Eğer bu nesne yani geolocation navigator içerisinde yer alıyorsa bu özellik kullanılabilir. Kısa bir şekilde kontrol şöyle sağlanabilir:

if ("geolocation" in navigator) {
  /* geolocation kullanılabilir */
} else {
  /* geolocation kullanılamaz */
}

Firefox 24 ve öncesi sürümlerde bu API devredışı bırakılsa bile yukarıdaki kontrol true dönüyor. Bu 25 sürümünde fixlenmiş bir bug.

Mevcut Pozisyon Bilgisini Alma

Diyelim ki mevcut pozisyon bilgisini alıp bazı bilgileri veri tabanına kaydedeceksiniz. Şöyle yapılıyor.

navigator.geolocation.getCurrentPosition(function(position) {
  koordinatlariKaydet(position.coords.latitude, position.coords.longitude);
});

Ayrıca position timestamp verisi de dönüyor ancak o bu örnekte yok. İsterseniz position.timestamp ile ulaşabilirsiniz. Yukarıdaki örnekte ilk parametre bir callback. Ancak dilerseniz ikinci bir callback de ekleyebilirsiniz. Bu da error durumlarında örneğin kullanıcının yetki vermediği durumlarda oluşan hataları yakalar. 3. parametre ise bir JS object’i. Direkt olarak MDN üzerinden bir örnek kod vereceğim;

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(Latitude : ${crd.latitude});
  console.log(Longitude: ${crd.longitude});
  console.log(More or less ${crd.accuracy} meters.);
}

function error(err) {
  console.warn(ERROR(${err.code}): ${err.message});
}

navigator.geolocation.getCurrentPosition(success, error, options);

Pozisyonu İzleme

Diyelim ki sayfaya giren kullanıcı dolaşımda. Yani mahallede dolaşmaya başladı. Bunu izlemek için şöyle watchPosition isimli bir fonksiyon var. Aldığı parametreler yukarıdaki ile aynı. Ama ufak bir farklı olay var. Öncelikle kullanımını göstereyim.

var watchID = navigator.geolocation.watchPosition(function(position) {
  koordinatlariKaydet(position.coords.latitude, position.coords.longitude);
});

Dikkat ettiyseniz watchID isimli bir değişkene atadık. Peki bu ne yapıyor olabilir? Bu her watch işlemi için unique bir ID oluşturuyor. Daha sonra bu unique ID’yi kullanarak, ziyaretçiyi izleme işlemini durdurabilirsiniz. Bunun için de clearWatch isimli bir fonksiyon var.

navigator.geolocation.clearWatch(watchID);

Evet kullanımı böyle. Bu işlem kullanıcı izni gerektirir. Tarayıcı kullanıcıdan izni alamazsa error callback döner.

Promise Tabanlı Çözüm

GitHub’da bunun için bir repo paylaştım.

Basit Kullanım

Mevcut Pozisyon

import geoLocation from "./path/to/geo-location";

geoLocation({
  type: "currentPosition",
  position: {
    enableHighAccuracy: true,
    maximumAge: 30000,
    timeout: 27000
  }
})
.then(loc => {
  console.log(loc);
})
.catch(err => {
  console.log(err);
});

Pozisyon İzleme

geolocation({
    type: 'watchPosition',
    position: {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 27000
    }
})
.then(loc => {
  console.log(loc.positionID) // 1
  loc.clear() // dilerseniz takip işlemini durdurabilirsiniz.
  console.log(loc.positionID) // 0
})
.catch(err => {
  console.log(err)
})

Hepsi bu. Umarım faydalı olmuştur. Bu yazıda JavaScript Geolocation API Kullanımı hakkında bilgiler elde ettik.