Dirty display of vector tiles feature properties in Infos.tsx

src/components/gpx/styles.ts

@@ -102,7 +102,7 @@ const textFillSel = new Fill({
 });
 
 const trksegStroke = new Stroke({
-  color: 'blue',
+  color: [11, 16, 71, 0.8],
   width: 3,
 });
 
@@ -112,7 +112,7 @@ const trksegStrokeSel = new Stroke({
 });
 
 const rteStroke = new Stroke({
-  color: 'green',
+  color: [18, 71, 11, 0.8],
   width: 3,
 });
 
@@ -288,16 +288,16 @@ const styles = {
       }),
       nwn: new Stroke({
         color: [174, 33, 219, 0.8],
-        width: 4,
+        width: 5,
       }),
       rwn: new Stroke({
         color: [174, 33, 219, 0.8],
-        width: 4,
+        width: 5,
         lineDash: [10, 10],
       }),
       lwn: new Stroke({
         color: [174, 33, 219, 0.8],
-        width: 2,
+        width: 3,
         lineDash: [10, 10],
       }),
     },
@@ -332,12 +332,13 @@ const styles = {
         isSelected: feature.get('isSelected') ?? false,
         name: feature.get('name'),
         klass: feature.get('class'),
-        isHidden: zoom() < 14,
+        isTextHidden: zoom() < 19,
+        isHidden: zoom() < 16,
       };
     },
     getStyle: memoize((params: any) => {
       console.log({ caller: 'getStyle', params });
-      const { isSelected, name, klass, isHidden } = params;
+      const { isSelected, name, klass, isHidden, isTextHidden } = params;
       if (isHidden) {
         return null;
       }
@@ -352,18 +353,19 @@ const styles = {
           opacity: 1,
           //          anchor: [0, 0],
         }),
-        text: name
+        text:
-          ? new Text({
+          name && !isTextHidden
-              text: name,
+            ? new Text({
-              font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+                text: name,
-              offsetY: +20,
+                font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
-              padding: [0, 0, 0, 0],
+                offsetY: +40,
-              fill: new Fill({
+                padding: [0, 0, 0, 0],
-                color: 'black',
+                fill: new Fill({
-              }),
+                  color: 'black',
-              backgroundFill: poiTextFill,
+                }),
-            })
+                backgroundFill: poiTextFill,
-          : undefined,
+              })
+            : undefined,
       });
     }, memoizeOptions),
   },

src/components/infos/Infos.tsx

@@ -21,6 +21,7 @@ const Item = styled(Paper)(({ theme }) => ({
 const [open, setOpen] = createSignal(false);
 
 let selectedFeatures: Feature[] = [];
+let vectorLayerFeatures: Feature[] = [];
 let hierarchy: any = {};
 
 const level2Key = (feature: Feature) =>
@@ -39,6 +40,10 @@ export const clickHandler = (event: any) => {
     }
   });
   selectedFeatures = features.filter((feature: any) => feature.get('context'));
+  vectorLayerFeatures = features.filter(
+    (feature: any) => !feature.get('context')
+  );
+
   selectedFeatures.sort((f1: Feature, f2: Feature) => {
     const ctx1 = f1.get('context');
     const ctx2 = f2.get('context');
@@ -93,6 +98,7 @@ export const clickHandler = (event: any) => {
     event,
     features,
     hierarchy,
+    vectorLayerFeatures,
   });
   selectedFeatures.map((feature: Feature<Geometry>) => {
     const id = feature.get('id');
@@ -108,7 +114,7 @@ export const clickHandler = (event: any) => {
       //      length,
     });
   });
-  if (selectedFeatures.length > 0) {
+  if (selectedFeatures.length > 0 || vectorLayerFeatures.length > 0) {
     setOpen(true);
   }
 };
@@ -118,7 +124,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
 }) => {
   return (
     <Tree
-      title={featuresHierarchy.type || 'root'}
+      title={featuresHierarchy.type || 'voyages'}
       content={undefined}
       subTree={Object.keys(featuresHierarchy)
         .filter((key: string) => key.startsWith('gpx/'))
@@ -143,7 +149,50 @@ const Infos: Component<{}> = (props) => {
         alignItems='center'
         sx={{ width: 'calc(100% - 5px)' }}
       >
-        <FeaturesTree featuresHierarchy={hierarchy} />
+        <Tree
+          title='everything'
+          content={undefined}
+          subTree={
+            <>
+              <Tree
+                title='osm'
+                content={undefined}
+                subTree={
+                  <>
+                    <For each={vectorLayerFeatures}>
+                      {(feature) => (
+                        <Tree
+                          title={`${feature.get('class')} ${
+                            feature.get('name') || ''
+                          }`}
+                          content={
+                            <>
+                              <>
+                                {console.log({
+                                  caller: 'Infos / vector layer feature',
+                                  properties: feature.getProperties(),
+                                })}
+                              </>
+                              <For each={Object.keys(feature.getProperties())}>
+                                {(key: string) => (
+                                  <div>{`${key}: ${
+                                    feature.getProperties()[key]
+                                  }`}</div>
+                                )}
+                              </For>
+                            </>
+                          }
+                          subTree={undefined}
+                        />
+                      )}
+                    </For>
+                  </>
+                }
+              />
+              <FeaturesTree featuresHierarchy={hierarchy} />
+            </>
+          }
+        />
       </Stack>
     </Dialog>
   );

src/components/map/Map.tsx

@@ -237,7 +237,7 @@ const Map: Component = () => {
 
     const vectorTileSource1 = new VectorTileSource({
       format: new MVT(),
-      url: 'http://localhost:8081/services/aragon/tiles/{z}/{x}/{y}.pbf',
+      url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
       maxZoom: 14,
     });