Testing a transportation vector tile

src/components/map/Map.tsx

@@ -15,7 +15,7 @@ import DragRotate from 'ol/interaction/DragRotate';
 
 import 'ol/ol.css';
 import './Map.css';
-import { Collection } from 'ol';
+import { Collection, VectorTile } from 'ol';
 import { Point } from 'ol/geom';
 import { Style, Icon } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
@@ -42,6 +42,9 @@ import { debounce } from 'lodash';
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
 import Account from '../account';
 import OsmFetch from '../osm-fetch';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import MVT from 'ol/format/MVT.js';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -231,13 +234,22 @@ const Map: Component = () => {
       zIndex: Infinity,
     });
 
+    const vectorTileSource = new VectorTileSource({
+      format: new MVT(),
+      url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Atransportation@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf',
+    });
+
+    const vectorTileLayer = new VectorTileLayer({
+      source: vectorTileSource,
+    });
+
     const olMap = new OlMap({
       view: new View({
         center: [+getState().lon, +getState().lat],
         zoom: +getState().zoom,
         rotation: +getState().rotation,
       }),
-      layers: [tileLayer, vectorLayer],
+      layers: [tileLayer, vectorTileLayer, vectorLayer],
       target: target,
       controls: new Collection<Control>([
         new Attribution({ collapsible: true }),