Make scope parameter of MapState

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/AddingMarkerVM.kt

@@ -6,6 +6,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import mapcompose_mp.demo.composeapp.generated.resources.map_marker
 import org.jetbrains.compose.resources.ExperimentalResourceApi
@@ -19,7 +22,12 @@ class AddingMarkerVM : ScreenModel {
 
     private var markerCount = 0
 
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         scale(0f) // zoom-out to minimum scale
     }.apply {
         addLayer(tileStreamProvider)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/AnimationDemoVM.kt

@@ -6,7 +6,10 @@ import androidx.compose.animation.core.TweenSpec
 import androidx.compose.ui.geometry.Offset
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.addMarker
@@ -28,7 +31,12 @@ class AnimationDemoVM : ScreenModel {
     private var job: Job? = null
     private val spec = TweenSpec<Float>(2000, easing = FastOutSlowInEasing)
 
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         addLayer(tileStreamProvider)
         shouldLoopScale = true
         enableRotation()

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/CalloutVM.kt

@@ -10,6 +10,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import mapcompose_mp.demo.composeapp.generated.resources.map_marker
 import org.jetbrains.compose.resources.ExperimentalResourceApi
@@ -37,7 +40,12 @@ class CalloutVM: ScreenModel {
     )
 
     @OptIn(ExperimentalResourceApi::class)
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         addLayer(tileStreamProvider)
 
         /* Add all markers */

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/CenteringOnMarkerVM.kt

@@ -7,6 +7,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import mapcompose_mp.demo.composeapp.generated.resources.map_marker
@@ -23,7 +26,12 @@ class CenteringOnMarkerVM(): ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
     @OptIn(ExperimentalResourceApi::class)
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         rotation(45f)
     }.apply {
         addLayer(tileStreamProvider)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/CustomDrawVM.kt

@@ -14,6 +14,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.addMarker
@@ -42,7 +45,12 @@ class CustomDrawVM(): ScreenModel {
     var p2x by mutableStateOf(0.4)
     var p2y by mutableStateOf(0.4)
 
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         addLayer(tileStreamProvider)
         shouldLoopScale = true
         enableRotation()

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/HttpTilesVM.kt

@@ -1,6 +1,9 @@
 package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.scale
 import ovh.plrapps.mapcompose.api.shouldLoopScale
@@ -17,7 +20,8 @@ class HttpTilesVM : ScreenModel {
         levelCount = 4,
         fullWidth = 4096,
         fullHeight = 4096,
-        workerCount = 16  // Notice how we increase the worker count when performing HTTP requests
+        workerCount = 16 , // Notice how we increase the worker count when performing HTTP requests
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
     ).apply {
         addLayer(tileStreamProvider)
         scale = 0f

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/LayersVM.kt

@@ -2,6 +2,9 @@ package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.enableRotation
@@ -23,7 +26,12 @@ class LayersVM() : ScreenModel {
     private var satelliteId: String? = null
     private var ignV2Id: String? = null
 
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         shouldLoopScale = true
         enableRotation()
         screenModelScope.launch {

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/MarkersClusteringVM.kt

@@ -12,6 +12,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import mapcompose_mp.demo.composeapp.generated.resources.map_marker
 import org.jetbrains.compose.resources.ExperimentalResourceApi
@@ -32,7 +35,12 @@ import ovh.plrapps.mapcompose.ui.state.markers.model.RenderingStrategy
 class MarkersClusteringVM() : ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         scale(0.2f)
         maxScale(8f)
         scroll(0.5, 0.5)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/MarkersLazyLoadingVM.kt

@@ -6,6 +6,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import mapcompose_mp.demo.composeapp.generated.resources.map_marker
 import org.jetbrains.compose.resources.ExperimentalResourceApi
@@ -29,7 +32,12 @@ class MarkersLazyLoadingVM() : ScreenModel {
     private val tileStreamProvider =
         ovh.plrapps.mapcompose.demo.providers.makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         minimumScaleMode(Forced(1f))
         scale(1f)
         maxScale(4f)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/OsmVM.kt

@@ -1,6 +1,9 @@
 package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.scale
 import ovh.plrapps.mapcompose.core.TileStreamProvider
@@ -17,7 +20,13 @@ class OsmVM : ScreenModel {
     private val maxLevel = 16
     private val minLevel = 12
     private val mapSize = mapSizeAtLevel(maxLevel, tileSize = 256)
-    val state = MapState(levelCount = maxLevel + 1, mapSize, mapSize, workerCount = 16) {
+    val state = MapState(
+        levelCount = maxLevel + 1,
+        fullWidth = mapSize,
+        fullHeight = mapSize,
+        workerCount = 16,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         minimumScaleMode(Forced((1 / 2.0.pow(maxLevel - minLevel)).toFloat()))
         scroll(0.5064745545387268, 0.3440358340740204)  // Paris
     }.apply {

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/PathsVM.kt

@@ -8,6 +8,9 @@ import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import mapcompose_mp.demo.composeapp.generated.resources.Res
 import org.jetbrains.compose.resources.ExperimentalResourceApi
@@ -33,7 +36,12 @@ import ovh.plrapps.mapcompose.ui.state.MapState
 class PathsVM() : ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         addLayer(tileStreamProvider)
         shouldLoopScale = true
         enableRotation()

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/RotationVM.kt

@@ -2,6 +2,9 @@ package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
 import cafe.adriel.voyager.core.model.screenModelScope
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.enableRotation
@@ -17,7 +20,12 @@ import ovh.plrapps.mapcompose.ui.state.MapState
 class RotationVM : ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096).apply {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ).apply {
         addLayer(tileStreamProvider)
         enableRotation()
         setScrollOffsetRatio(0.3f, 0.3f)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/SimpleDemoVM.kt

@@ -1,6 +1,9 @@
 package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.enableRotation
 import ovh.plrapps.mapcompose.api.shouldLoopScale
@@ -10,7 +13,12 @@ import ovh.plrapps.mapcompose.ui.state.MapState
 class SimpleDemoVM : ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         scale(1.2f)
     }.apply {
         addLayer(tileStreamProvider)

demo/composeApp/src/commonMain/kotlin/ovh/plrapps/mapcompose/demo/viewmodels/VisibleAreaPaddingVM.kt

@@ -1,6 +1,9 @@
 package ovh.plrapps.mapcompose.demo.viewmodels
 
 import cafe.adriel.voyager.core.model.ScreenModel
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
 import ovh.plrapps.mapcompose.api.addLayer
 import ovh.plrapps.mapcompose.api.addMarker
 import ovh.plrapps.mapcompose.api.enableRotation
@@ -11,7 +14,12 @@ import ovh.plrapps.mapcompose.ui.state.MapState
 class VisibleAreaPaddingVM : ScreenModel {
     private val tileStreamProvider = makeTileStreamProvider()
 
-    val state = MapState(4, 4096, 4096) {
+    val state = MapState(
+        levelCount = 4,
+        fullWidth = 4096,
+        fullHeight = 4096,
+        scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    ) {
         scale(1.2f)
     }.apply {
         enableRotation()

library/src/commonMain/kotlin/ovh/plrapps/mapcompose/ui/state/MapState.kt

@@ -35,6 +35,9 @@ import ovh.plrapps.mapcompose.utils.toRad
  * @param workerCount The thread count used to fetch tiles. Defaults to the number of cores minus
  * one, which works well for tiles in the file system or in a local database. However, that number
  * should be increased to 16 or more for remote tiles (HTTP requests).
+ * @param scope Coroutine scope to render markers and tiles. Should contain Main dispatcher on
+ * mobile.
+ * @see [ovh.plrapps.mapcompose.demo.viewmodels.SimpleDemoVM] for example how to set up on mobile.
  * @param initialValuesBuilder A builder for [InitialValues] which are applied during [MapState]
  * initialization. Note that the provided lambda should not start any coroutines.
  */
@@ -44,10 +47,10 @@ class MapState(
     fullHeight: Int,
     tileSize: Int = 256,
     workerCount: Int = getProcessorCount() - 1,
+    val scope: CoroutineScope,
     initialValuesBuilder: InitialValues.() -> Unit = {}
 ) : ZoomPanRotateStateListener {
     private val initialValues = InitialValues().apply(initialValuesBuilder)
-    internal val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
     internal val zoomPanRotateState = ZoomPanRotateState(
         fullWidth = fullWidth,
         fullHeight = fullHeight,

library/src/commonMain/kotlin/ovh/plrapps/mapcompose/ui/state/TileCanvasState.kt

@@ -143,7 +143,7 @@ internal class TileCanvasState(
 
     suspend fun setViewport(viewport: Viewport) {
         /* Thread-confine the tileResolver to the main thread */
-        val visibleTiles = withContext(Dispatchers.Main) {
+        val visibleTiles = withContext(scope.coroutineContext) {
             visibleTilesResolver.getVisibleTiles(viewport)
         }