Skip to content

Commit b14e7b2

Browse files
lyydikoigithub-actions[bot]
lyydikoi
authored and
github-actions[bot]
committed
Added Android example of joining JSON data with vector tiles and style.
Added Android example of joining JSON data with vector tiles and styling it. Jira [ticket](https://mapbox.atlassian.net/browse/MAPSAND-1879) Issued [here](#1127) JS example [here](https://docs.mapbox.com/mapbox-gl-js/example/data-join/) iOS example here: mapbox-sdk/projects/maps-ios/mapbox-maps-ios/Sources/Examples/All Examples/DataJoinExample.swift Screenshot: <img width="1080" height="2400" alt="Screenshot_20250917_145055" src="https://github.com/user-attachments/assets/4abb7253-92a0-4223-ab80-63b877fde09b" /> cc @mapbox/maps-android GitOrigin-RevId: 1bbc0a3787ad266e34af150044449d9f07655be9
1 parent f70b5bf commit b14e7b2

File tree

6 files changed

+174
-0
lines changed

6 files changed

+174
-0
lines changed

‎app/src/main/AndroidManifest.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1458,5 +1458,17 @@
14581458
android:name="android.support.PARENT_ACTIVITY"
14591459
android:value=".ExampleOverviewActivity" />
14601460
</activity>
1461+
<activity
1462+
android:name=".examples.datajoin.DataJoinActivity"
1463+
android:description="@string/description_data_join"
1464+
android:label="@string/activity_join_data"
1465+
android:exported="true">
1466+
<meta-data
1467+
android:name="@string/category"
1468+
android:value="@string/category_data_visualization" />
1469+
<meta-data
1470+
android:name="android.support.PARENT_ACTIVITY"
1471+
android:value=".ExampleOverviewActivity" />
1472+
</activity>
14611473
</application>
14621474
</manifest>

‎app/src/main/assets/countries_hdi.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Data: UN Human Development Index 2017 Europe extract
2+
// Source: https://ourworldindata.org/human-development-index
3+
[
4+
{ "code": "ROU", "hdi": 0.811 },
5+
{ "code": "RUS", "hdi": 0.816 },
6+
{ "code": "SRB", "hdi": 0.787 },
7+
{ "code": "SVK", "hdi": 0.855 },
8+
{ "code": "SVN", "hdi": 0.896 },
9+
{ "code": "ESP", "hdi": 0.891 },
10+
{ "code": "SWE", "hdi": 0.933 },
11+
{ "code": "CHE", "hdi": 0.944 },
12+
{ "code": "HRV", "hdi": 0.831 },
13+
{ "code": "CZE", "hdi": 0.888 },
14+
{ "code": "DNK", "hdi": 0.929 },
15+
{ "code": "EST", "hdi": 0.871 },
16+
{ "code": "FIN", "hdi": 0.92 },
17+
{ "code": "FRA", "hdi": 0.901 },
18+
{ "code": "DEU", "hdi": 0.936 },
19+
{ "code": "GRC", "hdi": 0.87 },
20+
{ "code": "ALB", "hdi": 0.785 },
21+
{ "code": "AND", "hdi": 0.858 },
22+
{ "code": "AUT", "hdi": 0.908 },
23+
{ "code": "BLR", "hdi": 0.808 },
24+
{ "code": "BEL", "hdi": 0.916 },
25+
{ "code": "BIH", "hdi": 0.768 },
26+
{ "code": "BGR", "hdi": 0.813 },
27+
{ "code": "MKD", "hdi": 0.757 },
28+
{ "code": "MLT", "hdi": 0.878 },
29+
{ "code": "MDA", "hdi": 0.7 },
30+
{ "code": "MNE", "hdi": 0.814 },
31+
{ "code": "NLD", "hdi": 0.931 },
32+
{ "code": "NOR", "hdi": 0.953 },
33+
{ "code": "POL", "hdi": 0.865 },
34+
{ "code": "PRT", "hdi": 0.847 },
35+
{ "code": "HUN", "hdi": 0.838 },
36+
{ "code": "ISL", "hdi": 0.935 },
37+
{ "code": "IRL", "hdi": 0.938 },
38+
{ "code": "ITA", "hdi": 0.88 },
39+
{ "code": "LVA", "hdi": 0.847 },
40+
{ "code": "LIE", "hdi": 0.916 },
41+
{ "code": "LTU", "hdi": 0.858 },
42+
{ "code": "LUX", "hdi": 0.904 },
43+
{ "code": "UKR", "hdi": 0.751 },
44+
{ "code": "GBR", "hdi": 0.922 }
45+
]

‎app/src/main/java/com/mapbox/maps/testapp/examples/datajoin/CountriesData.kt‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
package com.mapbox.maps.testapp.examples.datajoin
2+
3+
import android.content.Context
4+
import com.mapbox.maps.logE
5+
import org.json.JSONArray
6+
import java.io.IOException
7+
8+
data class Country(val code: String, val hdi: Double)
9+
10+
object CountriesData {
11+
12+
/**
13+
* Loads a list of countries and their HDI values from a JSON file in the assets folder.
14+
* @param context The Android context used to access assets.
15+
* @return List of Country objects, or an empty list if loading/parsing fails.
16+
*/
17+
fun loadCountriesFromJSON(context: Context): List<Country> {
18+
return try {
19+
val jsonString =
20+
context.assets.open("countries_hdi.json").bufferedReader().use { it.readText() }
21+
val jsonArray = JSONArray(jsonString)
22+
23+
return (0 until jsonArray.length())
24+
.map(jsonArray::getJSONObject)
25+
.map { jsonCountry ->
26+
Country(
27+
jsonCountry.getString("code"),
28+
jsonCountry.getDouble("hdi"),
29+
)
30+
}
31+
} catch (e: IOException) {
32+
logE("CountriesData", "Failed to read JSON file: ${e.message}")
33+
emptyList()
34+
} catch (e: Exception) {
35+
logE("CountriesData", "Failed to parse JSON: ${e.message}")
36+
emptyList()
37+
}
38+
}
39+
}

‎app/src/main/java/com/mapbox/maps/testapp/examples/datajoin/DataJoinActivity.kt‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
package com.mapbox.maps.testapp.examples.datajoin
2+
3+
import android.os.Bundle
4+
import androidx.appcompat.app.AppCompatActivity
5+
import androidx.lifecycle.lifecycleScope
6+
import com.mapbox.bindgen.Value
7+
import com.mapbox.geojson.Point
8+
import com.mapbox.maps.MapView
9+
import com.mapbox.maps.Style
10+
import com.mapbox.maps.dsl.cameraOptions
11+
import com.mapbox.maps.extension.style.expressions.generated.Expression
12+
import com.mapbox.maps.extension.style.expressions.generated.Expression.Companion.literal
13+
import com.mapbox.maps.extension.style.expressions.generated.Expression.Companion.match
14+
import com.mapbox.maps.extension.style.expressions.generated.Expression.Companion.rgb
15+
import com.mapbox.maps.extension.style.expressions.generated.Expression.Companion.rgba
16+
import com.mapbox.maps.extension.style.layers.generated.fillLayer
17+
import com.mapbox.maps.extension.style.sources.generated.vectorSource
18+
import com.mapbox.maps.extension.style.style
19+
import kotlinx.coroutines.Dispatchers
20+
import kotlinx.coroutines.launch
21+
import kotlinx.coroutines.withContext
22+
23+
/**
24+
* Example of joining JSON data with vector tiles and coloring them based on data values.
25+
*/
26+
class DataJoinActivity : AppCompatActivity() {
27+
private var countries: List<Country> = emptyList()
28+
29+
override fun onCreate(savedInstanceState: Bundle?) {
30+
super.onCreate(savedInstanceState)
31+
val mapView = MapView(this)
32+
setContentView(mapView)
33+
34+
lifecycleScope.launch {
35+
countries = withContext(Dispatchers.IO) {
36+
CountriesData.loadCountriesFromJSON(this@DataJoinActivity)
37+
}
38+
39+
setupMap(mapView)
40+
}
41+
}
42+
43+
private fun setupMap(mapView: MapView) {
44+
mapView.mapboxMap.apply {
45+
setCamera(
46+
cameraOptions {
47+
center(Point.fromLngLat(12.0, 50.0))
48+
zoom(1.6)
49+
pitch(0.0)
50+
bearing(0.0)
51+
}
52+
)
53+
54+
loadStyle(
55+
style(Style.STANDARD) {
56+
+vectorSource("countries") { url("mapbox://mapbox.country-boundaries-v1") }
57+
+fillLayer("countries", "countries") {
58+
sourceLayer("country_boundaries")
59+
fillColor(createColorExpression(countries))
60+
}
61+
}
62+
) { style ->
63+
// Set map to monochrome theme after style loads
64+
style.setStyleImportConfigProperty("basemap", "theme", Value.valueOf("monochrome"))
65+
}
66+
}
67+
}
68+
69+
private fun createColorExpression(countries: List<Country>) = match(
70+
input = Expression.get("iso_3166_1_alpha_3"),
71+
stops = countries.map { country ->
72+
literal(country.code) to rgb(0.0, (country.hdi * 255), 0.0)
73+
}.toTypedArray(),
74+
fallback = rgba(0.0, 0.0, 0.0, 0.0)
75+
)
76+
}

‎app/src/main/res/values/example_descriptions.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,5 @@
114114
<string name="description_precipitation">Showcase rain and snow effects.</string>
115115
<string name="description_color_theme">Showcase color theme.</string>
116116
<string name="description_elevated_line">Showcase line elevation</string>
117+
<string name="description_data_join">Showcase join JSON data with vector tiles and style it.</string>
117118
</resources>

‎app/src/main/res/values/example_titles.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,5 @@
116116
<string name="activity_precipitation">Precipitations example</string>
117117
<string name="activity_color_theme">Color theme example</string>
118118
<string name="activity_elevated_line">Elevated line example</string>
119+
<string name="activity_join_data">Join local JSON data with vector tiles</string>
119120
</resources>

0 commit comments

Comments
 (0)