Abstract of the mbtiles mapp format

mbtiles.mjs

let promise, maplibregl = null

async function MaplibreGL() {

  // maplibre is loaded.
  if (maplibregl) return new maplibregl.Map(...arguments);

  // create a promise to check for the maplibre library
  if (!promise) promise = new Promise(async resolve => {

    // maplibre is available as a global object.
    if (window.maplibregl) {
      
      // assign the global object as maplibre and resolve the promise.
      maplibregl = window.maplibregl
      resolve()
      return
    }

    Promise
      .all([
        // load maplibre from skypack cdn
        import('https://cdn.skypack.dev/pin/maplibre-gl@v1.15.3-OFxGDsJNZ70P0Qa7CzNE/mode=imports,min/optimized/maplibre-gl.js')
      ])
      .then(imports => {
  
        // assign the imports to maplibre variable outside the closure and resolve the promise.
        maplibregl = imports[0]
        resolve()
      })
      .catch(error => {
        console.error(error.message)
        alert('Failed to load MaplibreGL library. Please reload the browser.')
      })
  
  })

  // await for the pomise to be resolved.
  await promise

  // return the maplibre.Map method from async function.
  return new maplibregl.Map(...arguments);
}

export default async layer => {

  const container = mapp.utils.html.node`
    <div style="position: absolute; width: 100%; height: 100%;">`

  layer.mbMap = await MaplibreGL({container});

  layer.L =  new ol.layer.Layer({
    render: frameState => {
      // use the frameState to position the maplibre Map.
      
      // return the rendered container to the openlayers map overlay.
      return layer.mbMap.getContainer();
    }
  })

}