👨🏼‍💻Huawei Map Kit Marker in Jetpack Compose Android

Huawei Map Kit

Introduction

Hello world,

I want to show you how to use Huawei Map Kit with Jetpack Compose. Also, I will show you how to add markers to Map with Jetpack Compose.

I developed a demo project.

About the Huawei Map Kit

Map Kit provides powerful and convenient map services for you to implement personalized map display and interaction at ease.

• Android: The Map SDK for Android is a set of APIs that can be called to develop maps. You can use this SDK to easily add map-related functions to your Android app, including map display, map interaction, map drawing, and map style customization.

Huawei Map Kit

About the Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Jetpack Compose

Integration Process

1. Integrate HMS Core
2. Integate Huawei Map Kit
3. Integrate Jetpack Compose
4. Coding
5. Result
6. References

1.HMS Core Integration

HMS Core, based on Huawei devices and the Android platform, is a mobile service framework that opens up a variety of service capabilities to app developers. It provides basic services, such as HUAWEI ID, payments, and Notifications for Huawei end users.

We need to integrate HMS Core to use MapKit in our project.

Here is the official integration process link:

https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#0

2. Map Kit Integration

Here is the official integration process link:

https://developer.huawei.com/consumer/en/codelab/HMSMapKit/index.html#0

3.Jetpack Compose Integration

3.1. Add dependency to build.gradle(project level)

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        ...
    }
}

3.2. Make sure you’re using Kotlin

plugins {
    id 'kotlin-android'
}

3.3. Configure the build.gradle(app level)

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1'
    }
}

3.4. Add Jetpack compose dependencies

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

4. Coding

After integration of HMS Core, Map Kit, and Jetpack Compose

• We need to create a map compose view.

• After manage the map lifecycle

• Using the map compose view

• Theme

5. Result

App Output

6. References

Repo link: https://github.com/bayarsahintekin0/MapKitComposeMarker

Sliding Bottom Sheet in Android using Jetpack Compose - GeeksforGeeks

https://developer.android.com/jetpack/compose?gclid=CjwKCAjwyryUBhBSEiwAGN5OCIcpcXa1jfpcTicN_jmDD9KgrGzszja6scjpghQ5X6X6N4gKiWyODhoCcDsQAvD_BwE&gclsrc=aw.ds

Huawei GCI