Offline: Downloaded tileRegion with specific pixelRatio in TileDescriptor wont show in the MapboxMap if it has a different pixelRatio

[bamsbamx]

Environment

• Android OS version: Android 14
• Devices affected: Samsung Galaxy S24
• Maps SDK Version: 11.6.0 (both on Compose, and Views)

Observed behavior and steps to reproduce

This is a problem, because the screen density may change at runtime. If an app downloads a tile region with the screen density at the time of download and if the screen density changes later, the downloaded region wont be able to show

To reproduce, download the style pack and tile region as in the example. One can modify the OfflineActivity example to easier reproduce the problem (go to OfflineActivity sample, line 225, and set the value to 1.0f and execute on a device with a pixel ratio different than 1.0f). The following code shows how to reproduce on Compose :

            offlineManager.loadStylePack(
              Style.SATELLITE_STREETS,
              // Build Style pack load options
              StylePackLoadOptions.Builder()
                .glyphsRasterizationMode(GlyphsRasterizationMode.IDEOGRAPHS_RASTERIZED_LOCALLY)
                .metadata(Value(STYLE_PACK_METADATA))
                .build(),
              { progress ->
                ...              
              },
              { expected ->
                ...
              }
            )

            val tilesetDescriptor = offlineManager.createTilesetDescriptor(
              TilesetDescriptorOptions.Builder()
                .styleURI(Style.SATELLITE_STREETS)
                .pixelRatio(1f)     <------------------------ Set to 1f to reproduce problem
                .minZoom(0)
                .maxZoom(16)
                .build()
            )

            tileStore.loadTileRegion(
              TILE_REGION_ID,
              TileRegionLoadOptions.Builder()
                .geometry(TOKYO)
                .descriptors(listOf(tilesetDescriptor))
                .metadata(Value(TILE_REGION_METADATA))
                .acceptExpired(true)
                .networkRestriction(NetworkRestriction.NONE)
                .build(),
              { progress ->
                ...
              },
              { expected ->
                ...
              },
            )

ExampleScaffold {
          val density = LocalDensity.current

          OfflineSwitch.getInstance().isMapboxStackConnected = false

          val composeMapInitOptions = remember {
            ComposeMapInitOptions(
              mapOptions = MapOptions.Builder()
                .applyDefaultParams(density.density)   <--------- Using the default screen density, which may change at runtime
                .contextMode(ContextMode.SHARED)
                .build(),
            )
          }

          val mapViewportState = rememberMapViewportState {
            setCameraOptions(
              CameraOptions.Builder()
                .zoom(ZOOM)
                .center(TOKYO)
                .build()
            )
          }

          val mapState = rememberMapState {
          }

          val rasterDemSourceState = rememberRasterDemSourceState {
            url = StringValue("mapbox://mapbox.mapbox-terrain-dem-v1")
          }

          val customTerrainState = rememberTerrainState(rasterDemSourceState) {
            exaggeration = DoubleValue(1.25)
          }

          val currentTerrainState by rememberSaveable(stateSaver = TerrainState.Saver) {
            mutableStateOf(customTerrainState)
          }

          MapboxMap(
            composeMapInitOptions = composeMapInitOptions,
            compass = { },
            scaleBar = {
              ScaleBar(
                alignment = Alignment.BottomStart,
                contentPadding = PaddingValues(
                  start = 4.dp,
                  bottom = 32.dp,
                ),
                isMetricUnit = true,
                ratio = 0.3f,
              )
            },
            logo = {
              Logo()
            },
            attribution = {
              Attribution(
              )
            },
            mapViewportState = mapViewportState,
            mapState = mapState,
            style = {
              MapStyle(
                projection = Projection.GLOBE,
                style = Style.SATELLITE_STREETS,
                terrainState = currentTerrainState,
              )
            },
            modifier = Modifier.fillMaxSize(),
          ) {
            CircleAnnotation(
              point = TOKYO,
            ) {
              circleColor = androidx.compose.ui.graphics.Color.Blue
            }
          }
        }

Expected behavior

The map tiles should show correctly

Notes / preliminary analysis

Additional links and references

[kiryldz]

@bamsbamx can you provide a bit more context how can screen density change in runtime? This seems to be more of a hardware property and usually should be set as context.resources.displayMetrics.density.