app/build.gradle.kts

@@ -119,5 +119,6 @@ dependencies {
 
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.0")
 
-
+    // Map Compose library
+    implementation("ovh.plrapps:mapcompose:2.7.1")
 }

app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"

app/src/main/java/ru/nm17/narodmon/ui/pages/Sensors.kt

@@ -1,5 +1,6 @@
 package ru.nm17.narodmon.ui.pages
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
@@ -7,40 +8,70 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
-import ru.nm17.narodmon.Greeting
+import ovh.plrapps.mapcompose.ui.MapUI
 import ru.nm17.narodmon.R
 import ru.nm17.narodmon.ui.elements.GenericNavScaffold
+import ru.nm17.narodmon.ui.viewmodel.MapViewModel
+
+enum class SensorsFilter {
+    All, Thermometer, Camera,
+}
 
 @ExperimentalMaterial3Api
 @Composable
 fun SensorsPage(navController: NavController) {
+    val mapVM by remember { mutableStateOf(MapViewModel()) }
+    var filter by remember { mutableStateOf(SensorsFilter.All) }
+
     GenericNavScaffold(
         title = { Text(text = stringResource(R.string.sensors_page_title)) }
     ) {
-        Column {
-            Greeting("Hello sensors")
-            Row {
-                FilterChip(
-                    selected = true,
-                    onClick = { },
-                    label = { Text("Temp") }
+        Column(modifier = Modifier.padding(it)) {
+            MapUI(state = mapVM.state)
+            Row(
+                modifier = Modifier.padding(horizontal = 8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                SensorsFilterChip(
+                    name = stringResource(R.string.sensors_filter_all),
+                    checkFilter = { filter == SensorsFilter.All },
+                    updateFilter = { filter = SensorsFilter.All },
                 )
 
-                FilterChip(
-                    selected = false,
-                    onClick = { },
-                    label = { Text("Abc") }
+                SensorsFilterChip(
+                    name = stringResource(R.string.sensors_filter_temp),
+                    checkFilter = { filter == SensorsFilter.Thermometer },
+                    updateFilter = { filter = SensorsFilter.Thermometer },
                 )
 
-                FilterChip(
-                    selected = false,
-                    onClick = { },
-                    label = { Text("Def") }
+                SensorsFilterChip(
+                    name = stringResource(R.string.sensors_filter_camera),
+                    checkFilter = { filter == SensorsFilter.Camera },
+                    updateFilter = { filter = SensorsFilter.Camera },
                 )
             }
         }
     }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SensorsFilterChip(
+    name: String,
+    checkFilter: () -> Boolean,
+    updateFilter: () -> Unit,
+) {
+    FilterChip(
+        selected = checkFilter(),
+        onClick = updateFilter,
+        label = { Text(name) },
+    )
 }

app/src/main/java/ru/nm17/narodmon/ui/viewmodel/MapViewModel.kt

@@ -0,0 +1,21 @@
+package ru.nm17.narodmon.ui.viewmodel
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.lifecycle.ViewModel
+import ovh.plrapps.mapcompose.api.addLayer
+import ovh.plrapps.mapcompose.core.TileStreamProvider
+import ovh.plrapps.mapcompose.ui.state.MapState
+import java.net.URL
+
+class MapViewModel : ViewModel() {
+    private val tileStreamProvider = TileStreamProvider { row, col, zoom ->
+        URL("https://tile.openstreetmap.org/${zoom}/${row}/${col}").openStream()
+    }
+
+    val state: MapState by mutableStateOf(
+        MapState(4, 4, 4096).apply {
+            addLayer(tileStreamProvider)
+        }
+    )
+}

app/src/main/res/values/strings.xml

@@ -15,4 +15,7 @@
     <string name="agreement_dialog_title">Примите необходимые соглашения</string>
     <string name="sensors_page_title">Сенсоры</string>
     <string name="waiting_for_user_agreement">Ожидаю соглашение пользователя</string>
+    <string name="sensors_filter_all">Все</string>
+    <string name="sensors_filter_temp">Термометры</string>
+    <string name="sensors_filter_camera">Камеры</string>
 </resources>