HMS Location kit, Map kit, Site Kit ile React Native Platformunda Geliştirme- 2
Merhaba bu yazımda bir önceki yazımda olduğu gibi sizlerle React Native’de Location, Map, Site Kit geliştirmede en çok ihtiyaç duyulan konu başlıklarına birlikte bakacağız. Eğer önceki yazımı okumadıysanız aşağıya linkini bırakıyorum👇
Yazıyı ilk yazdığım zamandan bu zamana bir çok ihtiyaç ortaya çıktı bu ihtiyaçlara yönelik birden fazla konu başlığı çıktı dilerseniz başlayalım.
📍Harita Ekranının Ortasından Konumu Almak
Ne? Dediğinizi duyar gibiyim şimdi bizden istenilen şey şu Huawei Map açık ancak ben kullanıcının konumunu almak istemiyorum bu durumda HMS-Location geçersiz kalıyor. Ben haritayı oynatarak orta noktanın Latitude, Longitude değerlerini almak istiyorum. Örnek olması için sizinle bir ekran görüntüsü paylaşayım:
Burada ilk öncelikle haritadan elde edeceğimiz Latitude ve Longitude değerlerimiz için setState methodunu ekliyoruz. Daha sonrasında react-native’in Dimensions propertysini kullanarak her cihaz için cihazın orta noktasının kordinat bilgilerini belirliyoruz daha sonrasında ise onCameraIdle ile kamera her hareket ettikçe değerlerimiz güncellenecektir. onCameraIdle’da daha önceden belirlediğimiz referans üzerinden haritanın layoutunda ki orta noktanın konum bilgisini almış oluyoruz.
🌍 Diyelim ki Harita’yı Belirli Bir Konumda Açtın Ancak Harita’yı Farklı Farklı Konumlara Yönlendirmek İstiyorsun (Referance)
Şimdi şöyle düşünün harita ilk öncelikle kullanıcı konumunda açılıyor güzel. Ancak kullanıcı birden bire haritayı Paris’e, Hong Kong’a, Shenzhen’e odaklamak istedi ve evet gerçekten bunu istedi peki bunu nasıl yapacağız? Ama öncelikle olayı anlatan bir ekran videosu:
Bu kodda görmüş olduğunuz üzere bir button ekledik bu butona her tıkladığımda rastgele Latitude ve Longitude değerleri oluşturdum referans’ı kullanarak haritanın konumunu harita dışından değiştirebiliyoruz.
🚇 Peki Ulaşım Haritasını Kullanmak İstiyorum Bunu Nasıl Yapacağım
Öncelikle bunun için elinizde kullanabileceğiniz bir Tile olmalı. OpenStreetMap üzerinden kullanabilceğiniz Tile’lara bakabilirsiniz. Örnek için ulaşım haritası geliştireceğiz. Bunun için öncelikle https://www.thunderforest.com/maps/transport/ sitesine giderek üye olmanız gerekmektedir.
<TileOverlay
tileProvider={{
url:
'https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=<your_api_key>',
}}
/>Haritamızın içinde sadece TileOverlay kullanarak ulaşım haritasını eklemiş olduk. Hayat Eve Sığar uygulamasında harita renklendirmeside TileOverlay ile yapılmıştır buradan yola çıkarak yapabileceklerinizi düşünün 😊
⚠️ Dökümanlarda HMSTileOverlay kullanırsanız hata alacaksınız TileOverlay kullanmaya dikkat ediniz.
📍 Birden Fazla Marker’ın Her Birine Farklı Marker İkonu Atamak
Şöyle düşünelim misal bir haritanız var bu haritanız etrafınızda ki metro duraklarını gösteriyor ve sizde tek bir tip ikon atadınız ancak birden fazla ikon atamanız istendi o zaman ne yapacaksınız. Gelin hep birlikte bakalım:
Öncelikle ikon dosyalarımız için bir data js oluşturuyoruz. Böylelikle marker’dan alınan bilgilere göre farklı ikon atamaları gerçekleştireceğiz. Site’ta sorgulattığı parametreler ise şöyle:
Radius’u 5000 yaparak etrafımdaki bir çok metro istasyonunun bilgisini alıyorum. Lokasyon bilgisini SUBWAY_STATION yapıyorum. Site’tan dönen address parametresinin altında subAdminArea’dan dönen ilçe bilgileri ile metro istasyonlarını ayırdım. Henüz Site kit tarafında metro hatlarının bilgileri dönmüyor bundan dolayı böyle bir kısıtlama yaptım. (En fazla 20 istasyonun bilgisini alabiliyorum).
Burada icon prop’una baktığımız zaman(HMSMarker Component’inde) icon için oluşturduğumuz js class’tan icon bilgilerini alacaktır.
⚠️ İkonlar android klasörü altında ki assets klasörü altında olmalı. Eğer ki marker ikonlarınız gelmediyse Android Studio ile rebuild almanız gereklidir.
🗺️ Haritada Yol Çizdirme
Havalı navigasyon işlemleri sandığınız kadar zor değil arkadaşlar ama havalı olduğu kesin 😅 A noktasından B noktasına bir yol çizdirmemiz gerekenler: İki adet farklı latitude ve longitude değeri. Peki nasıl yol çizdiriyoruz hep birlikte bakalım:
Öncelikle Steps, Polyline, Point değerlerine ihtiyacımız bulunuyor bu değerler ile yol çizdirme işlemine başlayacağız. Sıralama şu şekilde olacak Steps bilgisi oluşturduğumuz requestOptions’a göre çekilecektir. Oluşturduğumuz directionApi ise Marker’da onClick methodunun tetiklenmesi ile çalışacaktır. Marker’a tıkladık daha sonrasında Marker’ın Latitude ve Longitude değerleri gitti daha sonrasında requestOpitons buna göre oluştu daha sonra requestOptions ile DirectionApi’den bir response alacağız. Gelen response’tan Routes => Paths => Steps’i alıp bir diziye aktarıyoruz. Daha sonrasında içindeki Polyline bilgilerine göre ve Polyline’nın içinde bulunan Point değerlerine göre Polyline’nımızın noktalarının latitude ve longitude bilgilerini diziye set ediyoruz render kısmında da anlık olarak değer set edilince tebrikler yolu çizdirmiş olduk.
🌐 Ama Harita Bomboş Geliyor
Bembeyaz bir ekran veya Tile Map dediğimiz şu görüntüyle karşı karşıya kalabilirsiniz:
⚠️ Öncelikle SHA-256 keyinizi Console’daki SHA-256 ile kontrol ediniz. Variantlara dikkat ederek ekleme yapınız. Console tarafına birden fazla ekleme yapabilirsiniz. Daha sonrasında Ag-Connect.json dosyanızı indirin. Sonrasında Android tarafında build almayı unutmayın eğer hala çalışmadıysa:
- Sanırım siz projenize Console tarafında yeniden bir proje açıp onun ag-connect.json dosyasını kullanıyorsunuz bu yüzden de Tile’lı veya ilk etapta harita geliyor ancak konuma yakınlaşınca hiç bir şey gözükmüyor bunu çözmek için cihazından tüm cacheleri temizleyin çalışacaktır.
- Ben böyle bir şey yapmadım .json dosyasını değiştirmedim diyorsanız:
Manage Api kısmından Map Kit’i açmayı unutmuş olabilirsiniz.
3. Hepsini yaptınız bir sonuca varamadınız o zaman size şunu öneriyorum:
Son Söz 👋
Benim karşılaştığım konu başlıkları bunlardı kendimce anlatmaya çalıştım umarım yazım işinize yarar :) Karşılaştığınız farklı konu başlıkları veya merak ettikleriniz için bana mail atarsanız çok sevinirim mahmutcansevin@yahoo.com Gönderdiğiniz konu başlıklarına göre veya benim karşılaştığım konu başlıklarına göre yazının 3. bölümünü çıkmış olurum. O zamana kadar sağlıcakla kalın 👋
