How to setup a Supabase vector source?

[alexphiev]

Hi,

I followed this nice tutorial in order to have a Supabase vector database with places to be displayed in a Flutter app using MapLibre.

The tutorial example uses the JS library and not the Flutter one and I struggle to find an equivalent to addProtocol() which would allow to use the Supabase rpc call. Do you have an idea how I could achieve this?

      maplibregl.addProtocol('supabase', async (params, abortController) => {
        const re = new RegExp(/supabase:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/)
        const result = params.url.match(re)
        const { data, error } = await client.rpc('mvt', {
          relation: result[1],
          z: result[2],
          x: result[3],
          y: result[4],
        })
        const encoded = base64ToArrayBuffer(data)
        if (!error) {
          return { data: encoded }
        } else {
          throw new Error(`Tile fetch error:`)
        }
      })

Thanks a lot

[josxha]

Hi @alexphiev,
addProtocol would theoretically be supported on flutter web as it uses maplibre-gl-js under the hood. Although, it is not implemented yet.
Maplibre Native that is used on other platforms however currently lacks support for something like addProtocol. See the discussion at maplibre/maplibre-native#2625.