Günümüzde, konum tabanlı hizmetler ve uygulamalar oldukça popüler. Bunları React ile nasıl yapacağınızı anlatacağım. Özellikle Geolocation API, Google Maps ve Leaflet'i ele alacağız.
Geolocation, kullanıcının cihazının konum bilgilerini almayı sağlar. React ile bu işlem oldukça kolay. Geolocation API, web tarayıcıları tarafından yerleşik olarak desteklenir. Böylece doğrudan JavaScript ile erişebiliriz.
Şimdi ilk adıma geçelim. Öncelikle navigator.geolocation.getCurrentPosition fonksiyonunu kullanarak kullanıcının konum bilgilerini alacağız.
Bu kod parçası kullanıcının izniyle enlem ve boylam bilgilerini alacaktır. getCurrentPosition asenkron bir fonksiyondur. Yani yanıtı hemen alamayız, bu yüzden bir callback fonksiyonu tanımlamamız gerekir.
Alınan konum bilgilerini haritada göstermek için Google Maps veya Leaflet kullanabiliriz. İki kütüphane de React ile kolayca entegre olur. Aşağıda Leaflet kütüphanesini kullanarak nasıl harita göstereceğimizi göreceksiniz.
Kodda MapContainer bileşeni haritanın ana bileşenidir. TileLayer haritanın görünümü için kullanılır. Marker ve Popup bileşenleri ise konumu ve etiketi gösterir.
Google Maps'i kullanmak isterseniz, react-google-maps kütüphanesini tercih edebilirsiniz. Bu kütüphane, Google Maps API'yi React ile kolayca kullanabilmenizi sağlar.
Bu örnekte withGoogleMap yüksek düzeyli bir bileşen oluşturur. GoogleMap ve Marker bileşenleriyle çalışmamızı kolaylaştırır.
Kullanıcıların gerçek zamanlı konumlarını takip etmek istiyorsanız, navigator.geolocation.watchPosition fonksiyonunu kullanabilirsiniz. Bu fonksiyon, konum güncellendikçe callback fonksiyonunu çağırır.
Konum bilgilerini alırken hata yönetimi de çok önemlidir. Kullanıcı izin vermezse veya konum alınamazsa, getCurrentPosition fonksiyonu bir hata döndürecektir.
Sonuç olarak, React ile geolocation ve harita kullanımı oldukça basittir. Yalnızca tarayıcı destekli Geolocation API ve harita kütüphaneleri ile kolayca entegre olabilir. Böylece, konum temelli uygulamalarınıza farklı bir boyut kazandırabilirsiniz.