openlayers_mbtiles_vector_tile_map_with_mvt_source.ts

1import Map from 'ol/Map';
2import View from 'ol/View';
3import VectorTileLayer from 'ol/layer/VectorTile';
4import { MBTilesVectorSource } from 'ol-mbtiles';
5import { useGeographic } from 'ol/proj';
6
7// Enable geographic coordinates (lon/lat) for the view
8useGeographic();
9
10// Initialize the MBTiles source
11// The source points to a local or remote .mbtiles file
12const source = new MBTilesVectorSource({
13  url: 'https://path-to-your-data/countries.mbtiles',
14  layers: ['countries'] // Optional: specify layers to include
15});
16
17// Create the layer and map
18const map = new Map({
19  target: 'map',
20  layers: [
21    new VectorTileLayer({
22      source: source
23    })
24  ],
25  view: new View({
26    center: [0, 0],
27    zoom: 2
28  })
29});