Skip to content

Commit a9a781f

Browse files
emilygamedeveloperemilygamedeveloper
authored
Merge pull request #5 from mapbox/adding-android-geojson-marker-project
Adding project files and read me for tutorial repo
2 parents 877f6cc + 3593ad4 commit a9a781f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1147
-1
lines changed

Diff for: ‎.gitignore

+21-1
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,24 @@ Carthage/Build/
6161
fastlane/report.xml
6262
fastlane/Preview.html
6363
fastlane/screenshots/**/*.png
64-
fastlane/test_output
64+
fastlane/test_output
65+
66+
# Android Studio Project Files
67+
68+
*.iml
69+
.gradle
70+
/local.properties
71+
/.idea/caches
72+
/.idea/libraries
73+
/.idea/modules.xml
74+
/.idea/workspace.xml
75+
/.idea/navEditor.xml
76+
/.idea/assetWizardSettings.xml
77+
/.idea/shelf/
78+
/.idea/workspace.xml
79+
.DS_Store
80+
/build
81+
/captures
82+
.externalNativeBuild
83+
.cxx
84+
local.properties

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
# Tutorials
22

33
This repository is a collection of source code used for [Mapbox tutorials](https://docs.mapbox/help/tutorials).
4+
5+
Each of these projects will be added to the repo according to the list below:
6+
7+
- The folder name will match the URL slug of the tutorial
8+
- This means if you go to https://docs.mapbox.com/help/tutorials/FOLDER-NAME, you will locate the matching tutorial.
9+
- Each project will contain a read me that includes:
10+
- A link to the related tutorial
11+
- Relevant downloading instructions
12+
- A general synopsis of what the tutorial will do
13+
- These projects will omit any sensitive information such as Access Tokens, so you will need to replace these elemnents with your own.
14+
- This repo will continuously update its git ignore file to accommodate all project types, allowing you to download projects without unnecessary bloat from unneeded files.

Diff for: ‎android-markers-from-geojson/.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
*.iml
2+
.gradle
3+
.idea
4+
local.properties
5+
.DS_Store
6+
**/build
7+
**/mapbox_access_token.xml

Diff for: ‎android-markers-from-geojson/README.txt

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
This project is the finalized product from the "Build an android marker app using GeoJSON data"
2+
3+
See link here: https://docs.mapbox.com/help/tutorials/android-markers-from-geojson/
4+
5+
This tutorial covers a common UX pattern for Android mapping apps, adding map markers from external data using GeoJSON and presenting additional information about the marker on tap with a slide-in UI panel using ModalBottomSheet.
6+
7+
Your final map will include markers over 3 coffee shops in Providence, which you can tap to find out more information about the business.

Diff for: ‎android-markers-from-geojson/app/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/build

Diff for: ‎android-markers-from-geojson/app/build.gradle.kts

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
plugins {
2+
alias(libs.plugins.android.application)
3+
alias(libs.plugins.kotlin.android)
4+
alias(libs.plugins.kotlin.compose)
5+
}
6+
7+
android {
8+
namespace = "com.example.geojsonapp"
9+
compileSdk = 35
10+
11+
defaultConfig {
12+
applicationId = "com.example.geojsonapp"
13+
minSdk = 24
14+
targetSdk = 35
15+
versionCode = 1
16+
versionName = "1.0"
17+
18+
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
19+
}
20+
21+
buildTypes {
22+
release {
23+
isMinifyEnabled = false
24+
proguardFiles(
25+
getDefaultProguardFile("proguard-android-optimize.txt"),
26+
"proguard-rules.pro"
27+
)
28+
}
29+
}
30+
compileOptions {
31+
sourceCompatibility = JavaVersion.VERSION_11
32+
targetCompatibility = JavaVersion.VERSION_11
33+
}
34+
kotlinOptions {
35+
jvmTarget = "11"
36+
}
37+
buildFeatures {
38+
compose = true
39+
}
40+
}
41+
42+
dependencies {
43+
44+
implementation(libs.androidx.core.ktx)
45+
implementation(libs.androidx.lifecycle.runtime.ktx)
46+
implementation(libs.androidx.activity.compose)
47+
implementation(platform(libs.androidx.compose.bom))
48+
implementation(libs.androidx.ui)
49+
implementation(libs.androidx.ui.graphics)
50+
implementation(libs.androidx.ui.tooling.preview)
51+
implementation(libs.androidx.material3)
52+
implementation("com.mapbox.maps:android:11.10.3")
53+
implementation("com.mapbox.extension:maps-compose:11.10.3")
54+
testImplementation(libs.junit)
55+
androidTestImplementation(libs.androidx.junit)
56+
androidTestImplementation(libs.androidx.espresso.core)
57+
androidTestImplementation(platform(libs.androidx.compose.bom))
58+
androidTestImplementation(libs.androidx.ui.test.junit4)
59+
debugImplementation(libs.androidx.ui.tooling)
60+
debugImplementation(libs.androidx.ui.test.manifest)
61+
}

Diff for: ‎android-markers-from-geojson/app/proguard-rules.pro

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Add project specific ProGuard rules here.
2+
# You can control the set of applied configuration files using the
3+
# proguardFiles setting in build.gradle.
4+
#
5+
# For more details, see
6+
# http://developer.android.com/guide/developing/tools/proguard.html
7+
8+
# If your project uses WebView with JS, uncomment the following
9+
# and specify the fully qualified class name to the JavaScript interface
10+
# class:
11+
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12+
# public *;
13+
#}
14+
15+
# Uncomment this to preserve the line number information for
16+
# debugging stack traces.
17+
#-keepattributes SourceFile,LineNumberTable
18+
19+
# If you keep the line number information, uncomment this to
20+
# hide the original source file name.
21+
#-renamesourcefileattribute SourceFile

Diff for: ‎android-markers-from-geojson/app/src/androidTest/java/com/example/geojsonapp/ExampleInstrumentedTest.kt

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package com.example.geojsonapp
2+
3+
import androidx.test.platform.app.InstrumentationRegistry
4+
import androidx.test.ext.junit.runners.AndroidJUnit4
5+
6+
import org.junit.Test
7+
import org.junit.runner.RunWith
8+
9+
import org.junit.Assert.*
10+
11+
/**
12+
* Instrumented test, which will execute on an Android device.
13+
*
14+
* See [testing documentation](http://d.android.com/tools/testing).
15+
*/
16+
@RunWith(AndroidJUnit4::class)
17+
class ExampleInstrumentedTest {
18+
@Test
19+
fun useAppContext() {
20+
// Context of the app under test.
21+
val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22+
assertEquals("com.example.geojsonapp", appContext.packageName)
23+
}
24+
}

Diff for: ‎android-markers-from-geojson/app/src/main/AndroidManifest.xml

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:tools="http://schemas.android.com/tools">
4+
5+
<application
6+
android:allowBackup="true"
7+
android:dataExtractionRules="@xml/data_extraction_rules"
8+
android:fullBackupContent="@xml/backup_rules"
9+
android:icon="@mipmap/ic_launcher"
10+
android:label="@string/app_name"
11+
android:roundIcon="@mipmap/ic_launcher_round"
12+
android:supportsRtl="true"
13+
android:theme="@style/Theme.GeoJSONApp"
14+
tools:targetApi="31">
15+
<activity
16+
android:name=".MainActivity"
17+
android:exported="true"
18+
android:label="@string/app_name"
19+
android:theme="@style/Theme.GeoJSONApp">
20+
<intent-filter>
21+
<action android:name="android.intent.action.MAIN" />
22+
23+
<category android:name="android.intent.category.LAUNCHER" />
24+
</intent-filter>
25+
</activity>
26+
</application>
27+
28+
</manifest>

Diff for: ‎android-markers-from-geojson/app/src/main/assets/coffee_shops.geojson

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"type": "FeatureCollection",
3+
"features": [
4+
{
5+
"type": "Feature",
6+
"properties": {
7+
"name" : "Bolt Coffee",
8+
"address" : "61 Washington Street, Providence, Rhode Island 02903, USA",
9+
"phone" : "(401) 214-2080"
10+
},
11+
"geometry": {
12+
"type": "Point",
13+
"coordinates": [-71.413829, 41.823901]
14+
}
15+
},
16+
{
17+
"type": "Feature",
18+
"properties": {
19+
"name" : "Coffee La France",
20+
"address" : "73 Empire St, Providence, RI 02903, USA",
21+
"phone" : "(401) 454-3380"
22+
},
23+
"geometry": {
24+
"type": "Point",
25+
"coordinates": [-71.41547, 41.821369]
26+
}
27+
},
28+
29+
{
30+
"type": "Feature",
31+
"properties": {
32+
"name" : "White Static",
33+
"address" : "711 Westminster St, Providence, RI 02903, USA",
34+
"phone" : "(401) 453-3007"
35+
},
36+
"geometry": {
37+
"type": "Point",
38+
"coordinates": [-71.420072, 41.818567]
39+
}
40+
}
41+
]
42+
}

Diff for: ‎android-markers-from-geojson/app/src/main/java/com/example/geojsonapp/MainActivity.kt

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
package com.example.geojsonapp
2+
3+
import android.os.Bundle
4+
import androidx.activity.ComponentActivity
5+
import androidx.activity.compose.setContent
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.material3.ExperimentalMaterial3Api
12+
import androidx.compose.material3.ModalBottomSheet
13+
import androidx.compose.material3.Text
14+
import androidx.compose.runtime.LaunchedEffect
15+
import androidx.compose.runtime.getValue
16+
import androidx.compose.runtime.mutableStateOf
17+
import androidx.compose.runtime.remember
18+
import androidx.compose.runtime.setValue
19+
import androidx.compose.ui.Alignment
20+
import androidx.compose.ui.Modifier
21+
import androidx.compose.ui.unit.dp
22+
import com.mapbox.geojson.Point
23+
import com.mapbox.maps.extension.compose.MapboxMap
24+
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState
25+
import com.mapbox.maps.extension.compose.annotation.generated.PointAnnotation
26+
import com.mapbox.maps.extension.compose.annotation.rememberIconImage
27+
import com.mapbox.geojson.FeatureCollection
28+
import kotlinx.coroutines.Dispatchers
29+
import kotlinx.coroutines.withContext
30+
31+
public class MainActivity : ComponentActivity() {
32+
// ModalBottomSheet is an experimental class from Material3, this code may be changed in future updates.
33+
@OptIn(ExperimentalMaterial3Api::class)
34+
override fun onCreate(savedInstanceState: Bundle?) {
35+
super.onCreate(savedInstanceState)
36+
37+
setContent {
38+
39+
var showBottomSheet by remember { mutableStateOf(false) }
40+
41+
// Global variables to update ModalBottomSheet with data from GeoJSON when clicking on a marker.
42+
val locationName = remember {
43+
mutableStateOf("none")
44+
}
45+
val locationAddress = remember {
46+
mutableStateOf("none")
47+
}
48+
val locationPhoneNumber = remember {
49+
mutableStateOf("none")
50+
}
51+
52+
var featureCollection: FeatureCollection? by remember {
53+
mutableStateOf(null)
54+
}
55+
56+
// Grabs the image used for the marker
57+
val markerImage = rememberIconImage(
58+
resourceId = R.drawable.ic_blue_marker
59+
)
60+
61+
LaunchedEffect(Unit) {
62+
// Grabs the GeoJSON file so its data can be accessed to create the markers
63+
val geoJson = withContext(Dispatchers.IO) {
64+
assets.open("coffee_shops.geojson").bufferedReader().use { it.readText() }
65+
}
66+
featureCollection = FeatureCollection.fromJson(geoJson)
67+
}
68+
69+
// Creates a mapbox map in the ContentView
70+
MapboxMap(
71+
Modifier.fillMaxSize(),
72+
mapViewportState = rememberMapViewportState {
73+
setCameraOptions {
74+
zoom(14.0)
75+
center(Point.fromLngLat(-71.41547, 41.821369))
76+
pitch(0.0)
77+
bearing(0.0)
78+
}
79+
},
80+
) {
81+
82+
// Iterates through each feature in the FeatureCollection of the GeoJSON, and creates a marker for each.
83+
featureCollection?.features()?.forEach { feature ->
84+
val geometry = feature.geometry()
85+
if (geometry is Point) {
86+
87+
// Grabs json data from the GeoJSON file and create jsonObject or jsonArray to access the values
88+
val properties = feature.properties()
89+
val jsonObjectStoreName = properties?.get("name")?.asString
90+
val jsonObjectAddress = properties?.get("address")?.asString
91+
val jsonObjectPhoneNumber = properties?.get("phone")?.asString
92+
93+
// Creates a PointAnnotation to act as the marker for each business.
94+
PointAnnotation(point = geometry) {
95+
96+
//Sets the marker image
97+
iconImage = markerImage
98+
99+
// When a marker is tapped:
100+
// - The data about the tapped marker is grabbed from the GeoJSON file
101+
// - The data is then assigned to the global variables which overwrites the text objects in the ModalBottomSheet
102+
interactionsState.onClicked {
103+
locationName.value = jsonObjectStoreName.toString()
104+
locationAddress.value = jsonObjectAddress.toString()
105+
locationPhoneNumber.value = jsonObjectPhoneNumber.toString()
106+
showBottomSheet = true
107+
true
108+
}
109+
}
110+
}
111+
}
112+
}
113+
114+
// Checks if a marker has been tapped, if so will open the ModalBottomSheet
115+
if (showBottomSheet) {
116+
ModalBottomSheet(
117+
onDismissRequest = {
118+
showBottomSheet = false
119+
}
120+
) {
121+
// Contents of the ModalBottomSheet
122+
123+
// Aligns the contents of the ModalBottomSheet for better readability
124+
Column(
125+
modifier = Modifier.fillMaxWidth(),
126+
horizontalAlignment = Alignment.CenterHorizontally
127+
) {
128+
// These values update when the marker is selected by querying the GeoJSON
129+
// for the related data, and then updating the global variables so the text prints correctly here.
130+
Text(locationName.value)
131+
Text(locationAddress.value)
132+
Text(locationPhoneNumber.value)
133+
134+
// Adds padding at the bottom of the ModalBottomSheet
135+
Spacer(modifier = Modifier.padding(vertical = 50.dp))
136+
137+
}
138+
}
139+
}
140+
}
141+
}
142+
}

0 commit comments

Comments
 (0)