Lightweight, interactive world map component enabling pan, zoom, and country selection. Customizable styles and optimized performance for seamless, responsive UI integration across platforms.
Bota is a lightweight, interactive world map component for Compose Multiplatform applications. Built with KMM (Kotlin Multiplatform Mobile), it provides a beautiful, responsive, and customizable world map that works seamlessly across Android, iOS, and Desktop platforms.
Add Bota to your commonMain dependencies:
commonMain {
dependencies {
implementation("io.github.eltonkola:bota:0.0.1")
}
}
Customize the appearance of the world map with different colors and styles:
import androidx.compose.ui.graphics.Color
WorldMap(
modifier = Modifier
.fillMaxWidth()
.height(400.dp),
highlightedCountryIds = selectedCountryIds,
onCountryClick = { /* ... */ },
defaultColor = Color(0xFFECECEC), // Default country color
highlightColor = Color(0xFFC8A2C8), // Highlighted country color
strokeColor = Color.Black // Border color
)
Access country data through the WorldMapCountries object:
// Get all countries
val allCountries = WorldMapCountries.data
// Find a country by ID
val country = WorldMapCountries.data.find { it.id == "us" } // United States
// Get all country IDs and names
val countryList = WorldMapCountries.data.map { it.id to it.name }
Bota supports the following platforms through Compose Multiplatform:
Copyright 2024 Elton Kola
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
import com.eltonkola.bota.WorldMap
import com.eltonkola.bota.WorldMapCountries
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
fun WorldMapExample() {
var selectedCountryIds by remember { mutableStateOf<Set<String>>(emptySet()) }
Column(
modifier = Modifier.fillMaxSize().padding(16.dp)
) {
Text("Select Countries", style = MaterialTheme.typography.headlineMedium)
WorldMap(
modifier = Modifier
.fillMaxWidth()
.height(400.dp)
.padding(8.dp),
highlightedCountryIds = selectedCountryIds,
onCountryClick = { country ->
// Toggle country selection
selectedCountryIds = if (country.id in selectedCountryIds) {
selectedCountryIds - country.id
} else {
selectedCountryIds + country.id
}
}
)
Spacer(modifier = Modifier.height(16.dp))
// Display selected countries
Text("Selected Countries (${selectedCountryIds.size}):")
LazyColumn {
items(selectedCountryIds.toList().sorted()) { countryId ->
Text(
text = "• ${WorldMapCountries.data.find { it.id == countryId }?.name ?: "Unknown"}",
modifier = Modifier.padding(vertical = 4.dp)
)
}
}
}
}
Surfaced from shared tags and platforms — no rankings paid for.