Adaptation to geoserver

src/components/gpx/styles.ts

@@ -30,6 +30,7 @@ import {
   getTagValue,
 } from '../map-tile-provider/MapTileProvider';
 import { getCenter } from 'ol/extent';
+import { getVectorTileFeatureType } from '../overlays/overlay-definitions';
 
 interface StyleParameters {
   type: string;
@@ -312,19 +313,34 @@ const styles = {
         width: 3,
         lineDash: [10, 10],
       }),
+      default: new Stroke({
+        color: [174, 33, 219, 0.8],
+        width: 1,
+        lineDash: [10, 10],
+      }),
     },
     getParameters: (feature: Feature) => {
+      const tags = JSON.parse(feature.get('tags'));
+      if (getZoomInteger() < 12 && !['iwn', 'nwn'].includes(tags.network)) {
+        return null;
+      }
+      if (
+        getZoomInteger() < 14 &&
+        !['iwn', 'nwn', 'lwn'].includes(tags.network)
+      ) {
+        return null;
+      }
       return {
         isSelected: feature.get('isSelected') ?? false,
         name: feature.get('name'),
-        network: feature.get('network'),
+        network: tags.network,
       };
     },
     getStyle: memoize((params: any) => {
       //      console.log({ caller: 'getStyle', params });
       const { isSelected, name, network } = params;
       return new Style({
-        stroke: styles.way.strokes[network],
+        stroke: styles.way.strokes[network] || styles.way.strokes.default,
         text: new Text({
           text: name,
           font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
@@ -437,17 +453,19 @@ const styles = {
 };
 
 export const style = (feature: Feature, resolution: number) => {
-  console.log({ caller: 'style', feature });
-  if (feature.get('osm_id') === '990113898') {
-    console.log({ caller: 'style', message: 'Found feature 990113898' });
-  }
+  // if (feature.get('osm_id') === '990113898') {
+  //   console.log({ caller: 'style', message: 'Found feature 990113898' });
+  // }
   const type = (
-    feature.get('type') !== undefined ? feature.get('type') : feature.type_
+    feature.get('type') !== undefined
+      ? feature.get('type')
+      : getVectorTileFeatureType(feature)
   ) as keyof typeof styles;
   const styleForType = styles[type];
   if (!styleForType) {
     // console.log({ caller: 'style / default', type, feature, resolution });
-    return createDefaultStyle(feature, resolution)[0];
+    // return createDefaultStyle(feature, resolution)[0];
+    return null;
   }
   const params = styles[type].getParameters(feature);
   if (params === null || params?.isHidden) {
@@ -460,6 +478,7 @@ export const style = (feature: Feature, resolution: number) => {
   const result = getStyle(params);
   //  console.log({ caller: 'style', feature, type, params, style });
   if (result === undefined) {
+    //    console.log({ caller: 'style / unknown', feature });
     return createDefaultStyle(feature, resolution)[0];
   }
   return result;

src/components/overlays/Overlays.tsx

@@ -19,6 +19,7 @@ import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSou
 import { getMap, getZoomInteger } from '../map/Map';
 import { getCenter } from 'ol/extent';
 import { Projection } from 'ol/proj';
+import { getVectorTileFeatureType } from './overlay-definitions';
 
 interface Props {
   map: () => OlMap | null;
@@ -64,7 +65,7 @@ export const Overlays: Component<Props> = ({ map }) => {
       'EPSG:900913:30',
     ];
     const baseUrl = 'http://localhost:8081/geoserver/gwc/service/wmts';
-    const style = '';
+    const geoServerStyle = '';
     const format = 'application/vnd.mapbox-vector-tile';
     const infoFormat = 'text/html';
     const layerName = 'dyomedea';
@@ -91,7 +92,7 @@ export const Overlays: Component<Props> = ({ map }) => {
       SERVICE: 'WMTS',
       VERSION: '1.0.0',
       LAYER: layerName,
-      STYLE: style,
+      STYLE: geoServerStyle,
       TILEMATRIX: gridsetName + ':{z}',
       TILEMATRIXSET: gridsetName,
       FORMAT: format,
@@ -108,7 +109,7 @@ export const Overlays: Component<Props> = ({ map }) => {
 
       const source = new VectorTileSource({
         url: url,
-        format: new MVT({}),
+        format: new MVT({ featureClass: Feature }),
         projection: projection,
         tileGrid: new WMTSTileGrid({
           tileSize: [256, 256],
@@ -151,13 +152,13 @@ export const Overlays: Component<Props> = ({ map }) => {
       distance: 30,
       minDistance: 10,
       geometryFunction: (feature: Feature) => {
-        console.log({
-          caller: 'Map / Cluster / geometryFunction ',
-          feature,
-        });
+        // console.log({
+        //   caller: 'Map / Cluster / geometryFunction ',
+        //   feature,
+        // });
         if (
           getZoomInteger() < 14 &&
-          feature.get('type') === 'poi' &&
+          getVectorTileFeatureType(feature) === 'poi' &&
           isHighlighted(feature)
         ) {
           return new Point(getCenter(feature.getGeometry().getExtent()));

src/components/overlays/overlay-definitions.ts

@@ -1,4 +1,5 @@
 import { indexOf } from 'lodash';
+import { Feature } from 'ol';
 
 export const overlayDefinitions = {
   amenity: {
@@ -99,6 +100,20 @@ _flat.forEach((obj: any) => {
   });
 });
 
+export const getVectorTileFeatureType = (feature: Feature) => {
+  if (!!feature.get('route') || feature.get('highway') === 'path') {
+    return 'way';
+  }
+  if (
+    Object.keys(overlayDefinitions).some((tagName) => {
+      const tagValue = feature.get(tagName);
+      return Object.keys(overlayDefinitions[tagName]).includes(tagValue);
+    })
+  ) {
+    return 'poi';
+  }
+};
+
 console.log({
   caller: 'overlay-definitions',
   overlayDefinitions,