openlayers_mbtiles_vector_tile_layer_quickstart.ts

1import 'ol/ol.css';
2import Map from 'ol/Map';
3import View from 'ol/View';
4import { VectorTile as VectorTileLayer } from 'ol/layer';
5import { MBTilesVectorSource } from 'ol-mbtiles';
6
7// Path to your .mbtiles file (can be a local path or a URL)
8const mbtilesUrl = 'path/to/your/data.mbtiles';
9
10const map = new Map({
11  target: 'map',
12  layers: [
13    new VectorTileLayer({
14      source: new MBTilesVectorSource({
15        url: mbtilesUrl,
16        // Optional: specify the layers you want to extract from the MBTiles
17        layers: ['transportation', 'water', 'boundary']
18      })
19    })
20  ],
21  view: new View({
22    center: [0, 0],
23    zoom: 2
24  })
25});