Adaptation to geoserver

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,