Add getting started guide for maplibre gl native for android (#939)

Co-authored-by: Loc Nguyen <loc.nguyen@aensmart.com>
Co-authored-by: Bart Louwers <bart.louwers@gmail.com>
Co-authored-by: Bart Louwers <bart@emeel.net>
This commit is contained in:
Loc Nguyen
2023-03-28 20:39:38 +07:00
committed by GitHub
parent 1d8c4b527f
commit ab1cc30ecd
6 changed files with 139 additions and 23 deletions

View File

@@ -8,4 +8,7 @@
- [Expressions](design/expressions.md)
- [Architectural Problems and Recommendations](design/archictural-problems-and-recommendations.md)
- [Android Map Rendering Data Flow](design/android-map-rendering-data-flow.md)
- [Geometry Tile Worker](design/geometry-tile-worker.md)
- [Geometry Tile Worker](design/geometry-tile-worker.md)
- [MapLibre GL Native for Android](./android/README.md)
- [Quickstart](./android/getting-started-guide.md)

View File

@@ -0,0 +1,3 @@
# MapLibre GL Native for Android
MapLibre GL Native for Android is a library for embedding interactive map views with scalable, customizable vector maps onto Android devices.

View File

@@ -0,0 +1,113 @@
# Quickstart
1. Add bintray Maven repositories to your project-level Gradle file (usually `<project>/<app-module>/build.gradle`).
```gradle
allprojects {
repositories {
...
mavenCentral()
}
}
```
2. Add the library as a dependency into your module Gradle file (usually `<project>/<app-module>/build.gradle`). Replace `<version>` with the latest MapLibre GL Native version (e.g.: `org.maplibre.gl:android-sdk:10.0.2`). Visit [https://mvnrepository.com/artifact/org.maplibre.gl/android-sdk](https://mvnrepository.com/artifact/org.maplibre.gl/android-sdk) to view the version history of MapLibre GL Native for android.
```gradle
dependencies {
...
implementation 'org.maplibre.gl:android-sdk:<version>'
...
}
```
3. Sync your Android project with Gradle files.
4. Add a `MapView` to your layout XML file (usually `<project>/<app-module>/src/main/res/layout/activity_main.xml`).
```xml
...
<com.mapbox.mapboxsdk.maps.MapView
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
...
```
5. Initialize the `MapView` in your `MainActivity` file by following the example below:
```kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.camera.CameraPosition
import com.mapbox.mapboxsdk.geometry.LatLng
import com.mapbox.mapboxsdk.maps.MapView
class MainActivity : AppCompatActivity() {
// Declare a variable for MapView
private lateinit var mapView: MapView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Init MapLibre
Mapbox.getInstance(this)
// Init layout view
val inflater = LayoutInflater.from(this)
val rootView = inflater.inflate(R.layout.activity_main, null)
setContentView(rootView)
// Init the MapView
mapView = rootView.findViewById(R.id.mapView)
mapView.getMapAsync { map ->
map.setStyle("https://demotiles.maplibre.org/style.json")
map.cameraPosition = CameraPosition.Builder().target(LatLng(0.0,0.0)).zoom(1.0).build()
}
}
override fun onStart() {
super.onStart()
mapView.onStart()
}
override fun onResume() {
super.onResume()
mapView.onResume()
}
override fun onPause() {
super.onPause()
mapView.onPause()
}
override fun onStop() {
super.onStop()
mapView.onStop()
}
override fun onLowMemory() {
super.onLowMemory()
mapView.onLowMemory()
}
override fun onDestroy() {
super.onDestroy()
mapView.onDestroy()
}
override fun onSaveInstanceState(outState: Bundle) {
super.onSaveInstanceState(outState)
mapView.onSaveInstanceState(outState)
}
}
```
6. Build and run the app. If you run the app successfully, a map will be displayed as seen in the screenshot below.
<div style="text-align: center;">
<img src="https://user-images.githubusercontent.com/32692818/228113379-475e86f5-e3fa-4a36-8b4b-1fcba0f1eb3b.png" alt="Screenshot with the map in demotile style" width="50%" height="50%">
</div>