Testing a transportation vector tile

src/components/gpx/styles.ts

@@ -119,7 +119,7 @@ const rteStrokeSel = new Stroke({
 
 const routeStroke = new Stroke({
   color: '#d221db',
-  width: 4,
+  width: 5,
 });
 
 const routeStrokeSel = new Stroke({
@@ -262,26 +262,39 @@ const styles = {
     getParameters: (feature: Feature) => {
       return {
         isSelected: feature.get('isSelected') ?? false,
+        name: feature.get('name'),
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected } = params;
-      return new Style({ stroke: isSelected ? routeStrokeSel : routeStroke });
+      const { isSelected, name } = params;
+      return new Style({
+        stroke: isSelected ? routeStrokeSel : routeStroke,
+        text: new Text({
+          text: name,
+          font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+          placement: 'line',
+          padding: [2, 2, 2, 2],
+          fill: new Fill({
+            color: 'black',
+          }),
+        }),
+      });
     }, memoizeOptions),
   },
 };
 
 export const style = (feature: Feature) => {
   const type = feature.get('type') as keyof typeof styles;
-  console.log({ caller: 'style', type });
   const styleForType = styles[type];
   if (!styleForType) {
     return null;
   }
   const params = styles[type].getParameters(feature);
   const getStyle = styles[type].getStyle;
-  return getStyle(params);
+  const style = getStyle(params);
+  console.log({ caller: 'style', type, params, style });
+  return style;
 };
 
 export default style;

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 }),