Load local .mbtiles with maplibre-gl-js

Question

I want to load a local .mbtiles (with vector tiles) with maplibre-gl-js (in a Cordova app if it's important to know). As far as I understand, I should use the addProtocol method. That works fine as I get my console.log, but I don't know how to load the tiles then...

This is my code:

maplibregl.addProtocol('mbtiles', (params, callback) => {
  console.log('I get this log.');
  // but what to do here to get local mbtiles vector tiles loaded?
});

The style is defined like this:

...
"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "mbtiles://map/data/test.mbtiles"
  }
},
...

Any help / hints appreciated :)

If you need more information, just feel free to ask.

P.S. I used mapbox-gl-cordova-offline before and tried to understand how this plugin loads the tiles, but I can't figure it out yet.

Answer 1

Here's what I'm doing to achieve this:

maplibregl.addProtocol("custom", (params, callback) => {
// tileBuffer = get a arrayBuffer of a specific tile using params.url
    if (tileBuffer) {
        callback(null, tileBuffer, null, null);
    } else {
        let message = `Tile is not in DB: ${params.url}`;
        callback(new Error(message));
    }
    return { cancel: () => { } };
});

I'm using cordova-sqlite-ext in order to be able to use a pre-populated database in Cordova. The style has a tiles: [custom://database-name/{z}/{x}/{y}] in order to know which tile to fetch.

Full code can be found here: https://github.com/IsraelHikingMap/Site/blob/6aa2ec0cfb8891fa048b1d9e2a4fc7d4cbcc8c97/IsraelHiking.Web/src/application/services/database.service.ts

It's worth noting that I added the addProtocol method to maplibre especially for this purpose. :-)