Support instantiating VectorSource and TileSource with a TileSet programmatically

[Vichy97]

I am unable to get a vector source with a .pbf format working. For example if I use the url
https://maptiles.openbeta.io/crags/{z}/{x}/{y}.pbf as the uri, it crashes because it can't parse the { character. If I utf 8 encode it, it won't crash, but it cannot find the resource because it doesn't decode it before attempting to request the tiles. How am I supposed to pass in this url? I am using rememberVectorSource("id", "https://maptiles.openbeta.io/crags/{z}/{x}/{y}.pbf")

[sargunv]

Which platform, and what's the exception in the crash log (if any?)

[sargunv]

Ah, I see, it's because on Android I parse it to a java.net.URI to check the scheme and modify it (in case it's a compose resource)

Will fix

[sargunv]

Fix is going out in v0.6.0, lmk how it goes

[Vichy97]

@sargunv thank you!

[Vichy97]

So it doesn't crash, but I still don't think it's using the url correctly. It just says
{OnlineFileSourc}[General]: The resource https://maptiles.openbeta.io/crags/{z}/{x}/{y}.pbf` not found`. I know this url is correct because it's working fine with MapLibre Kotlin SDK.

[Vichy97]

I believe it's still unnecessarily encoding it. I see another log
This request was cancelled (https://maptiles.openbeta.io/crags/%7Bz%7D/%7Bx%7D/%7By%7D.pbf). This is expected for tiles that were being prefetched but are no longer needed for the map to render.

[sargunv]

Could you share a code sample of using it with the Kotlin SDK?

[Vichy97]

 val source = VectorSource(
    id = "sourceId",
    tileSet = TileSet("2.1.0", "https://example.com/{z}{x}{y}.pbf").apply {
      setMinZoom(0.0)
      setMaxZoom(11.0)
    },
  )
 val symbolLayer = SymbolLayer("layerId", "sourceId")
    .withSourceLayer("layerId")

And in this library I am doing

 val source = rememberVectorSource(
        id = "sourceId",
        uri = "https://example.com/{z}{x}{y}.pbf",
      )

SymbolLayer(
  id = "layerId",
  source = source,
  sourceLayer = "sourceId",
)

[sargunv]

Ah I see, that particular VectorSource constructor isn't implemented in this library yet. You can see how we initialize VectorSource here:

maplibre-compose/lib/maplibre-compose/src/androidMain/kotlin/dev/sargunv/maplibrecompose/core/source/VectorSource.kt

Lines 6 to 8 in fad1b99

	public actual class VectorSource actual constructor(id: String, uri: String) : Source() {
	override val impl: VectorSource = VectorSource(id, uri.correctedAndroidUri())
	}

MapLibre expects that URL to point to TileJSON: https://maplibre.org/maplibre-native/android/api/-map-libre%20-native%20-android/org.maplibre.android.style.sources/-vector-source/index.html

Create a vector source from a remote url pointing to a TileJSON resource

So you should be able to make this work by creating a TileJSON resource under composeResources/files/ and passing the URL of that resource to rememberVectorSource.

[sargunv]

Or, here's an example of how to do it now:

val crags = rememberVectorSource(
  id = "openbeta-crags",
  uri = Res.getUri("files/data/openbeta-crags.json")
)
SymbolLayer(
  id = "crag-name-label",
  source = crags,
  sourceLayer = "crags",
  iconAnchor = const(SymbolAnchor.Center),
  textField = feature.get("name").convertToString(),
  textFont = const(listOf("Noto Sans Regular"))
)

{
  "tiles": [
    "https://maptiles.openbeta.io/crags/{z}/{x}/{y}.pbf"
  ],
  "promoteId": "id",
  "maxzoom": 11,
  "attribution": "© OpenBeta contributors"
}

[Vichy97]

Amazing! Thank you. I actually like this way of configuring better, but the documentation is a bit sparse so I didn't know you had to put it in a json file.

[sargunv]

Feel free to PR improvements to the docs; the relevant file for this one is here: https://github.com/sargunv/maplibre-compose/blob/main/docs/docs/layers.md