Flutter İle Map Kit Kullanımı
Herkese merhaba,
Bu yazımda sizlere HMS Map Kit’in Flutter uygulamalarda nasıl kullanılacağından bahsedeceğim ve Map Kit’in tüm özelliklerine ait örnek kodlar paylaşacağım.
Haritalar günümüzde bir çok mobil uygulamanın temelini oluşturmaya başladı. Artık neredeyse her uygulamada kullanılan bir servis haline gelen haritaların, Flutter ile geliştiricilen uygulamalara entegrasyonu ile ilgili kaynak bulmak maalesef native uygulamalara oranla biraz daha güç. Umarım bu yazı, baştan sona sorunsuz bir şekilde HMS Map Kit’in Flutter uygulamarınıza entegrasyonu için iyi bir kaynak olur.
Map Kit Nedir?
HMS Map Kit, güncel olarak 200'den fazla ülke ve bölgenin tüm harita verilerini kapsamakta ve 100'den fazla dilde destek vermektedir.
HMS Map Kit, kolay entegrasyonlu, kullanım alanı geniş ve çeşitli özellikler sunan bir Huawei Servisi. Üstelik Map Kit sürekli güncellenerek verilerini zenginleştirmeye ve harita üzerinde küçük ölçeklerde bile farklılıkları güncel olarak yansıtıyor.
Haritalarınızı özelliştirmek için marker ekleyebilir, harita üzerinde halkalar, çizgiler ekleyebilirsiniz. Map Kit, harita üzerinde ihtiyaç duyduğunuz her şeyi kapsayacak geniş bir kullanım yelpazesi sunuyor bize. Harita üzerinde canlı olarak kendi konumunuzu görebilir, zoom yapıp haritanın yönünü değiştirebilirsiniz. Ayrıca harita üzerinde canlı trafik durumunu da görüntüleyebilirsiniz. Bence bir haritada olması gereken en önemli özelliklerden birisi de. Huawei trafik verilerini haritaya anlık olarak yansıtma konusunda gerçekten de çok başarılı bir iş çıkarmış diyebilirim. Son olarak, henüz Türkiye’deki şehirleri kapsamasa da dünyanın bir çok önemli yapısını Huawei Maps sayesinde üç boyutlu olarak görüntüleyebilirsiniz. Bu özelliğin mobil uygulamanızdaki harita deneyimine ayrı bir eğlence katacağına eminim.
Not: HMS Map Kit, Huawei cihazlarda EMUI 5.0 ve üzeri sürümler ile Huawei olamayan cihazlarda ise Android 7.0 ve üzeri sürümler ile çalışamktadır.
Geliştirme Adımları
- AppGallery Connect’te Uygulamanızı Oluşturun
İlk olarak AGConnect üzerinden bir developer hesabı açmış olmanız gerekliyor. Developer hesabınızı açtıktan sonra konsol üzerinden yeni bir proje ve yeni bir uygulama yaratmalısınız. Bu adımları nasıl tamamlayacağınıza dair bilgilerin yer aldığı makaleye aşağıdaki bağlantıdan ulaşabilirsiniz.
2. Flutter Map Kit’i Projenize Ekleyin
AGC Console üzerinden uygulamanızı oluşturup, Map Kit’i aktif ettikten sonra ilk olarak agconnect-services dosyası projeye eklenmeli.
Android konfigürasyon dosyasını Flutter projesindeki android/app dizini altında agconnect-services.json olarak eklenmeli.
Daha sonra android dizini altındaki build.gradle dosyasına HMS kullanımı için aşağıdaki bağımlılıkların eklenmesi gerek.
buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.huawei.agconnect:agcp:1.4.2.301'
}
}
allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}Daha sonra android/app dizini altındaki build.gradle dosyasına aşağıdaki kod satırını ekleyin.
apply plugin: 'com.huawei.agconnect'AndroidManifest.xml dosyasına harita kullanmak için aşağıdaki izinleri ekleyin.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>Son olarak pubspec.yaml dosyasına Map Kit SDK’sı eklenmeli. Bunun için pubspec.yaml dosyasını açıp gerekli bağımlılığı aşağıdaki gibi ekleyin.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons. huawei_map: ^5.0.3+302
Ve “pub get” diyerek eklenen bağımlılıkların Android Studio’ya eklenmesi sağlanır. Tüm bu adımlar tamamlandıktan sonra uygulamanız artık kodlamaya hazırdır.
3. Haritanızı Oluşturun
Haritanızı oluşturmak için ilk önce HuaweiMapController nesnesi oluşturun, ve oluşturduğunuz nesneyi uygulama açıldığında haritanın yüklenmesi için onMapCreated isminde bir metot oluşturarak set edin.
Daha sonra harita açıldığında yüklenecek alan için bir merkez koordinatı ve bu koordinat için bir zoom değeri belirleyin.
Son olarak haritanızı tasarım olarak da ekledikten sonra aşağıdaki gibi kodlanmış bir sınıf elde edeceksiniz. Bu aşamada uygulamanız ekran görüntüsü de yine aşağıdaki gibi olacaktır.
Yukarıdaki kodda görüldüğü gibi haritayı oluştururken bazı parametrelere ihtiyacımız var. Bazı önemli ve en çok kullanılan parametrelerin açıklaması ve kullanım amacı aşağıdaki gibidir.
- mapType : Yüklenen haritanın tipini temsil eder. Şu anda Flutter için yalnızca harita tipinde destek vardır. Bunlar “normal” ve “none” Eğer mapType none olursa herhangi bir harita yüklenmez. Düz bir zemin görüntülenir. Normal tipteki harita ise yukarıdaki görselde görüldüğü gibidir.
- zoomControlsEnabled : Haritanın sağ alt tarafında yer alan zoom butonlarının görünürlüğünü temsil eder. Eğer bu değeri “true” olarak set ederseniz yukarıdaki gibi butonlar harita üzerinde otomatik olarak yüklenir ve kullanılır. Eğer “false” olarak set edilirse haritada butonlar yardımıyla zoom yapılamaz.
- myLocationEnabled : Harita üzerinde kendi anlık konumuzu görüp göremeyeceğiniz temsil eder. Eğer “true” olarak set ederseniz, konumunuz harita üzerinde mavi bir nokta olarak çıkacaktır. Eğer “false” olarak set ederseniz, harita üzerinde kullanıcı konumu yer almaz.
- myLocationButtonEnabled : Haritanın sağ altındaki zoom butonlarının hemen altında yer alan butonu temsil eder. Bu buton yardımıyla, eğer myLocationEnabled değerini true olarak ayarladıysanız, butona tıkladığınızda harita otomatik olarak sizin bulunduğunuz konuma zoom yapacaktır.
- onClick : Harita üzerinde dokunulunca tetiklenmesini istediğiniz olayları burada tanımlayabilirsiniz. Yukarıdaki örnekte görüldüğü gibi ben haritaya tıklandığında, ilgili noktanın enlem ve boylam bilgilerini yazdırıyorum.
- onLongPress : Harita üzerine uzun dokunuş ile tetiklenecek olaylar burada tanımlanmalıdır. Yukarıdaki örnekte görüldüğü gibi ben haritaya uzun dokunulduğunda, ilgili noktanın enlem ve boylam bilgilerini yazdırıyorum.
- initialCameraPosition : Harita yüklenince gösterilecek başlangıç konumu ve zoom değerinin burada tanımlanması gerekir.
4. Harita Üzerinde Trafik Verilerini Gösterin
Az önce Map Kit’in özelliklerinden bahsederken benim en çok hoşuma giden özelliğin bu olduğunu söylemiştim. Hem işlevsel, hem de kullanımı kolay bir özellik.
Canlı trafik verilerini tek dokunuşla göstermek için yalnızca haritayı oluştururken belirttiğimiz “trafficEnabled” değerini “true” yapmamız yeterli.
Bunun için haritanın sol tarafında yer alacak ufak, yuvarlak bir buton tasarlayıp, butona her basıldığında trafficEnabled değerini true ve false olarak değiştiren bir trafficButtonOnClick isminde bir metot hazırlayın.
Butonun tasarımını ise aşağıdaki gibi yapıp, return MaterialApp altında bir Column oluşturarak bundan sonra yaratacağımız tüm butonları burada alt alta çağırabilirsiniz. Buton tasarımını ve genel tasarımı aşağıda paylaşıyorum. Bundan sonra oluşturulacak her buton, şimdi ekleyeceğimiz trafficButton altında yer alacak.
Trafik butonu eklendikten sonra haritanın görüntüsü aşağıdaki gibi olacaktır.
5. Haritanızı Üç Boyutlu Yapın
En sevdiğim bir diğer özellik olan fakat henüz Türkiye’deki alanlar için desteği olmayan üç boyutlu harita yaratmak da en az trakif durumunu göstermek kadar kolay. Dediğim gibi, bulunduğumuz konumda bu özellik desteklenmediği için ben Collesium’a ait enlem ve boylam bilgilerini girerek, butona tıkladığım kameranın bu noktaya hareket etmesini ve üç boyutlu olarak bana göstermesini sağladım.
Yine aynı şekilde butona tıklandıkça bu özelliğin sırası ile aktif ve deaktif olmasını sağlamalıyız. Aktif olduğunda Collesium konumunu göstermeli ve deaktif ettiğimiz zaman tekrar ilk belirlediğimiz merkez konuma dönmeliyiz. Bunun için aşağıdaki gibi moveCameraButtonOnClick isminde bir metot oluşturuyoruz.
Butonu tasarlarken aynı şekilde sol tarafta ve alt alta yer almasını sağlamalıyız. Aşağıdaki gibi buton tasarımını da yaparak, 4. maddede bahsettiğim gibi trafficButton’un altına moveCamreButton ismi ile ekliyoruz. İlgili kodu ekledikten sonra ekran görüntüsü de aşağıdaki gibi olacaktır.
6. Haritanız Marker Ekleyin
Harita servislerinin olmazsa olmazlarından birisi markerlar. Bu özellik sayesinde harita üzerinde ihtiyaçlarınıza göre farklı renk ve tasarımlarda marker ekleyebilirsiniz. Bu markerlar sayesinde özel bir adrese isim verebilir, kaydedebilir ve harita üzerinde öne çıkarabilirsiniz.
Bir marker eklemek için ihtiyacınız olan bazı veriler var. Bunlar sizin marker oluştururken belirleyeceğiniz markerId, position, title, snippet, icon, draggable, rotation değerleri.
Aşağıdaki kodda ilk önce normal bir marker eklemek için gerekli olan değerleri ve örnek kod yer alıyor. Bu kod sayesinde her haritada gördüğünüz şekilde, klasik bir marker ekleyebilirsiniz.
İkinci marker ise sürüklenebilir özelliğe sahiptir. Marker’ın üzerine basılı tutarak istediğiniz yere hareket ettirebilirsiniz. Bunu için draggable değerini true olarak set etmelisiniz.
Üçüncü sırada yer alan marker ise açılı bir şekilde haritada yer alıyor. Marker’ın dik olarak değil de 45' ya da 60' gibi herhangi bir açı ile yer almasını istiyorsanız rotation değerine istediğiniz açıyı vermeniz yeterli olacaktır.
Dördüncü ve son sırada yer alan marker ise diğerlerinin aksine farklı ve renkli gözükecektir.
Bu dört özelliği kullanarak istediğiniz tarzda markerlar oluşturabilirsiniz. Marker oluşturmak için gerekli olan kodlar aşağıdaki gibidir.
Yine haritanın sol tarafında alt alta yer alması için yeni bir button oluşturarak, kodda ilgili yere ekleyebilirsiniz. Oluşturduğunuz butonda onPressed’inde yukarıdaki markersButtonOnClick metodunu çağırmayı unutmayın. Buton tasırımı için gerekli kodları ve ekran görüntüsünü aşağıda bulabilirsiniz.
7. Haritanıza Circle Ekleyin
Haritaya circle, line gibi şeyler eklemek de temel olarak marker eklemek ile aynı mantığa sahip. Ve parametreleri neredeyse aynı.
Circle, yani halkalar eklemek için circlesButtonOnClick isminde bir metot oluşturup, bu metot içinde oluşturulacak circle için circleId, center, radius, fillColor, strokeColor, strokeWidth, zIndex, clickable değerlerini tanımlayın. Bu değerlerin hepsi haritada hangi noktaya, hangi ebatta ve hangi renkte bir circle ekleyeceğinize göre değişiklik gösterebilir.
Örnek olarak butona basılınca iki tane circle ekleyen circlesButtonOnClick metodunu ve bu metodu çağırdığım circlesButton tasarımıyla birlikte ekran görüntüsünü aşağıda paylaşıyorum.
8. Haritanıza Polyline Ekleyin
Haritanıza polyline eklemek de marker ve circle eklemek gibi gayet kolay.
Polyline kullanım amacı olarak iki koordinat arasında düz bir çizgi çizmektir.
Bir polyline çizmek için ihtiyacımız olan parametreler yine benzer şekilde polylineId, points, color, zIndex, endCap, startCap, clickable değerleridir. Burada enCap ve startCap değerleriyle başlangıç ve bitiş noktalarına şekil verebilir, ya da düz olarak bırakabilirsiniz. Points değeri için ise bir array olarak iki tane LatLng değeri tanımlamanız gerekmektedir.
Polyline oluşturmak için polylinesButtonOnClick isminde bir metot oluşturup, yukarıdaki değerleri ihtiyaçlarınıza göre set edin. Buton tasarımı için ise polylinesButton isminde bir metot oluşturup onPress içinde polylinesButtonOnClick metodunu çağırın. Kodların tamamı ve polyline eklendikten sonraki ekran görüntüsü aşağıdaki gibidir.
9. Haritanıza Polygon Ekleyin
Polygon ise polyline ile tamamen aynı şey. Tek farkı polygon eklerken ikiden fazla nokta belirterek üçgen, beşgen gibi istediğiniz şekiller çizebilmeniz.
Bir polygon çizmek için ihtiyacımız olan parametreler yine benzer şekilde polygonId, points, fillColor, strokeColor, strokeWidth, zIndex, clickable değerleridir. Points değeri için ise bir array olarak ikiden fazla LatLng değeri tanımlamanız gerekmektedir.
Polygon oluşturmak için polygonsButtonOnClick isminde bir metot oluşturup, yukarıdaki değerleri ihtiyaçlarınıza göre set edin. Buton tasarımı için ise polygonsButton isminde bir metot oluşturup onPress içinde polygonsButtonOnClick metodunu çağırın. Kodların tamamı ve polygon eklendikten sonraki ekran görüntüsü aşağıdaki gibidir.
10. Harita Üzerindeki Tüm Çizimleri Kaldırın
Yukarıdaki özelliklerini hepsini aynı anda harita üzerinde uygulayabilirsiniz. Uygulamanızın ihtiyaçlarına göre istediğiniz özellikleri kombileyip, kullanıcı deneyimini üst seviyelere çıkarmak tamamen sizin elinizde. Tüm bu özellikleri aynı anda ekledikten sonra haritanızın son görüntüsü aşağıdaki gibi olacaktır.
Harita üzerine eklediğiniz tüm elementleri tek bir buton yardımıyla silmek için clearMap isminde bir metot oluşturarak bu metot içinde haritayı temizleyebilirsiniz. clearMap metodunu çağırmak için yine sol tarafa clearButton isminde yeni bir button ekleyerek, bu buttonun onPress’i içinde oluşturduğunuz metodu çağırabilirsiniz.
Tüm metotlar eklendikten sonra kod yapınızın tamamı aşağıdaki gibi olmalıdır.
Referanslar
Projeye ait tüm kodları ve içinde bir çok HMS Kit’in Flutter kullanımına ait kodların olduğu projeye erişmek için aşağıdaki bağlantıdan github hesabımı inceleyebilirsiniz.
Map Kit’e ait Huawei’nin resmi dökümanlarına aşağıdan ulaşabilirsiniz.
