React Native'de HMS Map Kullanımı ile Harita Uygulaması Geliştirme



Merhaba arkadaşlar, bugün sizlerle birlikte işimize de yarayabilecek bir uygulama geliştireceğiz. Uygulamamız hem İBB’nin otopark verisini kullanıp bunu haritaya yansıtacak hem de seçtiğimiz ilçenin ve park yeri detaylarının gösterilmesini sağlayacak.




UI Katmanları

Uygulamamız harita katmanı ve buton katmanı olmak üzere iki katmandan oluşuyor. Harita katmanımız uygulamanın arka planını oluştururken bir yandan da üst katmandaki event’leri görselleştiriyor. Üst katmanımız da haritanın yetersiz kaldığı bilgilendirme ve yönlendirme konusunda bize yardımcı oluyor.


Harita katmanı arkaplanda HMSMap component’ini içeriyorken, üst katman (buton katmanı) kart, dropdown ve info window component’lerimizi içeriyor.




Haritayı Ekleme ve Konfigürasyon

İlk olarak https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/config-agc-0000001050032216 adresindeki adımlarla AppGallery Connect hesabını oluşturup uygulamamızı platforma kaydediyoruz.


İndirdiğimiz agconnect-services.json dosyasını /android/app klasörüne ekliyoruz. Aynı şekilde oluşturduğumuz keystore dosyasının fingerprint’ini de SHA-256 certificate fingerprint alanına ekliyoruz.


Daha sonra android/build.gradle dosyamıza aşağıdaki satırları ekliyoruz.


Şimdi de android/app/build.gradle dosyamızdaki güncellemelere bakalım:

Yukarıdaki tüm konfigürasyonları yaptıktan sonra npm ile haritamızı dependency olarak ekleyebiliriz.

npm install @hmscore/react-native-hms-map

Ve haritamız başarıyla eklenmiş bulunmakta. Bundan sonra uygulamamızı hazırlamak düşüyor.


İBB Park API

Öncelikle uygulama açılınca İBB API servisini kullanarak park datasını almamız gerekiyor. Bunun için useEffect içerisinde https://api.ibb.gov.tr/ispark/Park adresine GET request atıyoruz.



Aldığımız data aşağıdaki gibi olacak.


Harita Katmanını Ekleme



Park yerlerinin koordinatlarını kullanarak hepsini HMSMarker ile harita üzerinde gösterebiliriz.



Evet şimdi haritamızın prop’larını inceleyelim.


ref: Haritamızın referans objesini global’de tutuyoruz ki diğer component’larda harita metodlarını kolayca kullanabiliriz.


useAnimation, animationDuration: Kamera hareketlerinin animasyon şeklinde gerçekleşmesini istiyoruz.


markerClustering: Yakın yerlerdeki park yerlerinin iç içe olmaması açısından clustering açtık. Yakınlaştıkça marker’lar görünmeye başlayacak.


camera: Kameranın nerede başlayacağını belirliyoruz.


Marker proplarımıza bakalım:


icon: Kapasitesi dolu olan park yerlerimizi kırmızı ile, uygun olanları ise yeşil ikonlarla gösteriyoruz.


clusterable: Marker’ın cluster olması için bunu set etmemiz gerekiyor.


coordinate: Park yerinin koordinatını buraya yazıyoruz.


onClick: Bu prop ile marker’a bastığımızda istediğimiz fonksiyonları çağırmamızı sağlayan bir callback. Bu fonksiyon içinde state’imizi set ederek seçili park yerimizi değiştiriyoruz.


Buton Katmanını Ekleme

Bu katmanımız haritamıza biraz daha aksiyon ekleyerek ilçe ve park alanını butonlarla seçmemizi ve haritanın seçili yere gitmesini sağlıyor. Aynı şekilde alt taraftaki bilgi kartı da seçilen park yeri için ayrıntılı bilgi sağlıyor.


Üstteki dropdown butonumuz ilçe seçmeye, altındaki yatay liste de seçili ilçenin park alanlarını göstermeye yarıyor.


Alttaki beyaz bilgi kartını da sığdıramadığımız ekstra bilgilerin gösteriminde kullanıyoruz.


Picker component’imizi inceleyelim şimdi. API’dan datamızı çekerken loading animasyonu gösteriyorken datamız yüklendiğinde bir dropdown menü gösteriyoruz. Bu menüyü de aynı ilçe birden fazla yazılmayacak ve alfabetik şekilde sıralanacak şekilde ayarlıyoruz.



Park yeri için kartlarımızı da ilk satırı isim, ikinci satırı kapasite olacak şekilde ayarlıyoruz. Burada dikkat çekmek istediğim nokta ise karta basıldığında iki şey yapıyoruz:

  1. Harita referansını kullanarak haritada park yerinin konumuna gidiyoruz.

  2. Seçili park yerimizi state’de değiştiriyoruz. Böylece bilgi kartımız da güncellenmiş oluyor.


Üst katmanımızda ise bu component’lerı birleştiriyoruz. Aynı şekilde eğer data daha yüklenmemişse 3 tane animasyonlu dummy kart koyuyoruz, yoksa gelen datayı seçili ilçeye göre filtreleyip sıralıyoruz.



Alttaki bilgi kartımız ise seçtiğimiz park yerinin diğer bilgilerini gösteren kartımız. Bununla API’dan gelen bilgileri görselleştirmiş oluyoruz.


Huawei Maps Kullanımı

Huawei Maps’i React Native üzerinden HMSMap component’ini kullanarak kullanabiliyoruz. Yazdığımız prop’lar ve fonksiyonlar sayesinde tek ve çift yönlü iletişim sağlıyoruz ve interaktif bir UI oluşturuyoruz.


Props

Prop’lar bizim temel kişiselleştirme yöntemimiz. Her özelliği “HMSMap.setStyle, HMSMap.setButton, HMSMap.setHeight…” gibi manuel olarak değiştirmek yerine haritamızın prop’larını istediğimiz değerlere eşitleyerek stil, tip, boyut, butonlar ve gesture event’leri gibi özellikleri değiştirebiliyoruz ve bu prop’lar arka planda kendi .set metotlarını çağırmış oluyorlar.


Events

Event’lerimizi haritada ortaya çıkan kamera değişikliği, basma, uzun basma ve sürükleme gibi olayları bize haber veren fonksiyonlar gibi düşünebiliriz.


Ne zaman harita ile bir etkileşim olursa ona denk gelen event ismini prop olarak kullanıp kendi fonksiyonlarınızı yazabilirsiniz. Aşağıda hem prop hem de event eklenmiş örnek bir HMSMap component’ini bulabilirsiniz.


Functions

Normalde prop’larımızı bir state’e eşitleyerek her state değişikliğinde haritanın da yeniden render edilmesini sağlayabiliriz. Ancak bazen bazı işlemleri kendimiz fonksiyon içinde yapmayı tercih edebiliriz ya da prop’ların bize yetmediği durumlar olabilir. Bu durumda yardıma fonksiyonlarımız koşuyor. Fonksiyonlarımızı kullanmak için haritamızın referansını bir variable’a eşitlememiz gerekiyor.


Yukarıdaki resimde gördüğünüz gibi React Hooks’tan gelen createRef fonksiyonunu kullandık. App fonksiyonumuzda referans oluşturup bunu <MapLayer /> component’ımıza iletiyoruz ve MapLayer içerisindeki <HMSMap /> ref’ini bu global variable’a eşitliyor.



Biz daha sonra bu referansı <TopLayer /> içinde şu şekilde kullanıyoruz:


Gördüğünüz üzere map üzerinde tanımlı olan fonksiyonlardan biri olan setCoordinates fonksiyonunu referans üzerinden çağırıp otomatik olarak kameranın park yerinin koordinatlarına gitmesini sağlıyoruz.



Kapanış

Elimden geldiğince size Huawei Map ile nasıl bir React Native uygulaması çıkarabiliriz anlatmaya çalıştım. Eğer parça parça kodlar ve resimler sizin için anlamsız geliyor ve “Ben direk büyük resme bakmak istiyorum” diyorsanız https://github.com/utarit/ibb-park linkinden projenin kaynak koduna bakabilir, kendiniz deneyebilirsiniz.


Eğer HMSMap ile kullanabileceğiniz diğer prop, event ve fonksiyonları merak ediyorsanız açıklamalara ve örnek kullanımlara buradan bakabilirsiniz.


Sağlıklı günler dilerim.


#cross #reactnative #hmsmap #maps

0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın