Playing around with vector tiles

src/components/infos/Infos.tsx

@@ -32,8 +32,13 @@ export const clickHandler = (event: any) => {
   hierarchy = {};
   const pixel = [event.originalEvent.x, event.originalEvent.y];
   const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
-  selectedFeatures.map((feature) => feature.set('isSelected', false));
-  selectedFeatures = features;
+  console.log({ caller: 'Infos.tsx / clickHandler', features, event });
+  selectedFeatures.map((feature) => {
+    if (feature.set) {
+      feature.set('isSelected', false);
+    }
+  });
+  selectedFeatures = features.filter((feature: any) => feature.get('context'));
   selectedFeatures.sort((f1: Feature, f2: Feature) => {
     const ctx1 = f1.get('context');
     const ctx2 = f2.get('context');
@@ -89,7 +94,7 @@ export const clickHandler = (event: any) => {
     features,
     hierarchy,
   });
-  features.map((feature: Feature<Geometry>) => {
+  selectedFeatures.map((feature: Feature<Geometry>) => {
     const id = feature.get('id');
     feature.set('isSelected', true);
     //    const geometry = feature.getGeometry();
@@ -103,7 +108,7 @@ export const clickHandler = (event: any) => {
       //      length,
     });
   });
-  if (features.length > 0) {
+  if (selectedFeatures.length > 0) {
     setOpen(true);
   }
 };