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:
@@ -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)
|
||||
3
docs/mdbook/src/android/README.md
Normal file
3
docs/mdbook/src/android/README.md
Normal 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.
|
||||
113
docs/mdbook/src/android/getting-started-guide.md
Normal file
113
docs/mdbook/src/android/getting-started-guide.md
Normal 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>
|
||||
Reference in New Issue
Block a user