import Map from "ol/Map";
import View from "ol/View";
import VectorTileLayer from "ol/layer/VectorTile";
import { fromLonLat } from "ol/proj";
import { importMBTiles, MBTilesVectorSource } from "ol-mbtiles-sqljs";
import initSqlJs from "sql.js";
import sqlWasm from "sql.js/dist/sql-wasm.wasm";

const SQL = await initSqlJs({ locateFile: () => sqlWasm });

const map = new Map({
  target: "map",
  layers: [
    new VectorTileLayer({
      source: new MBTilesVectorSource(await importMBTiles({
        db: fetch("https://server/path/file.mbtiles").then((response) => response.arrayBuffer()).then(d => new SQL.Database(new Uint8Array(d))),
      })),
    }),
  ],
  view: new View({
    center: fromLonLat([12, 50]),
    zoom: 6,
  }),
});