Mapbox Vector Tiles

import React from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";
import MVT from "ol/format/MVT";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import olms from "ol-mapbox-style";
import { defaultResolutions } from "ol-mapbox-style/dist/util";

export function createMapboxStreetsV6Style(e, t, o, a, r) {
  // ...
}

export const key = process.env.NEXT_PUBLIC_MAPBOX_KEY;
export const format = new MVT();
export const attributions =
  '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap contributors</a>';
export const style = createMapboxStreetsV6Style(
  Style,
  Fill,
  Stroke,
  Icon,
  Text
);

export const ExampleMapboxVectorTiles = () => (
  <Map className="rounded-xl overflow-hidden mt-4 bg-white">
    <olView initialCenter={[0, 0]} initialZoom={2} />
    <olLayerVectorTile declutter style={style}>
      <olSourceVectorTile
        attributions={attributions}
        format={format}
        url={`https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=${key}`}
      />
    </olLayerVectorTile>
  </Map>
);