How do you prevent a white background when moving map beyond area included in mbtiles file?

[matthewadams]

Hi, I have a small geographical area of an island surrounded by water as an mbtiles file. When I move the map beyond the area included in the mbtiles file, MaplibreMap simply shows white. Is there a way to set that either to a color, or as transparent so that I can place a Box behind with the color I want?

Alternatively, is there a way to prevent the user from moving the map beyond the area included in the mbtiles file?

[sargunv]

Is there a way to set that either to a color

You can add a layer to the bottom of the map, for example for a solid red background:

MapLibreMap(...) {
  Anchor.Bottom {
    BackgroundLayer(id = "custom-bg", color = const(Color.Red)
  }
}

or as transparent so that I can place a Box behind with the color I want?

I think transparent isn't possible due to how Compose and platform views interop on Android and iOS.

Alternatively, is there a way to prevent the user from moving the map beyond the area included in the mbtiles file?

Not trivially yet, it's a planned feature. See #20. But you could use the CameraState and use a LaunchedEffect to coerce the position within some bounds whenever it goes outside.

[matthewadams]

The Liberty style already includes a background layer of color #f8f4f0 (kind of an off-white). Is that what you're seeing?

You can insert your custom background in place of that one with a different Anchor:

Anchor.Replace("background") {
  BackgroundLayer(id = "custom-bg", color = const(Color.Red)
}

Or on top of that one with:

Anchor.Above("background") {
  BackgroundLayer(id = "custom-bg", color = const(Color.Red)
}

Or, since you're already modifying the style, if you just want a static color, just modify the background directly in the style JSON.

This is what I get when I use Anchor.Replace as you gave above:

...and with Anchor.Above:

What do you make of that?

[sargunv]

Looks like the style has a layer for water, but is leaving land transparent (so the background shines through). So anywhere there's no tile is rendered the same as land.

You could modify the style to add a fill layer for all land, of that original white-ish color, above the background.

[matthewadams]

Looks like the style has a layer for water, but is leaving land transparent (so the background shines through). So anywhere there's no tile is rendered the same as land.

I figured as much. 🙄

You could modify the style to add a fill layer for all land, of that original white-ish color, above the background.

Is there a TODO on that? I'm a maplibre noob...

[sargunv]

Looking at the OpenMapTiles schema (used by MapTiler) looks like they don't provide polygons for land. So it probably won't be possible with this data.

An alternative: rememberGeoJsonSource() with the geometry of the area you want to paint a particular color, and pass it to a FillLayer above the background, below everything else. Something like:

val islandArea = rememberGeoJsonSource(id = "island-area", data = Polygon(...))
Anchor.Replace("background") {
  BackgroundLayer(...) // out of bounds color
  FillLayer(id = "fill-island-area", source = islandArea, color=...) // land color
}

Or, do the opposite; keep the original background, and paint the out of bounds area some color:

val outsideArea = rememberGeoJsonSource(id = "out-of-bounds", data = FeatureCollection(....))
Anchor.Top {
  FillLayer(id = "fill-out-of-bounds", source = islandArea, color=...) // out of bounds color
}