diff --git a/app/src/FeatureTable.tsx b/app/src/FeatureTable.tsx index 3a28050..7f5f81e 100644 --- a/app/src/FeatureTable.tsx +++ b/app/src/FeatureTable.tsx @@ -1,9 +1,9 @@ -import { For } from "solid-js"; +import { For, Show } from "solid-js"; export interface InspectableFeature { layerName: string; type: number; - id: number; + id: number | undefined; properties: { [key: string]: string | number | boolean }; } @@ -15,21 +15,28 @@ const intToGeomType = (n: number) => { export const FeatureTable = (props: { features: InspectableFeature[] }) => { return ( -
| {key} | -+ | + {key} + | +{typeof value === "boolean" ? JSON.stringify(value) : value.toString()} diff --git a/app/src/PageMap.tsx b/app/src/PageMap.tsx index 48bb10e..af4da7c 100644 --- a/app/src/PageMap.tsx +++ b/app/src/PageMap.tsx @@ -66,7 +66,7 @@ function MapView(props: { return hoveredFeatures().map((h) => { return { layerName: h.sourceLayer || "unknown", - id: (h.id as number) || 0, + id: h.id ? (h.id as number) : undefined, properties: h.properties, type: h._vectorTileFeature.type, }; @@ -169,7 +169,8 @@ function MapView(props: { "source-layer": vectorLayer, paint: { "circle-color": colorForIdx(i), - "circle-radius": 3, + "circle-radius": ["interpolate", ["linear"], ["zoom"], 4, 2, 12, 4], + "circle-opacity": 0.5, "circle-stroke-color": "white", "circle-stroke-width": [ "case", @@ -355,6 +356,7 @@ function MapView(props: { } for (const hoveredFeature of hoveredFeatures()) { + if (hoveredFeature.id === undefined) continue; map.setFeatureState(hoveredFeature, { hover: false }); } @@ -367,6 +369,7 @@ function MapView(props: { features = features.filter((feature) => feature.source === "tileset"); for (const feature of features) { + if (feature.id === undefined) continue; map.setFeatureState(feature, { hover: true }); } @@ -387,7 +390,7 @@ function MapView(props: { ), hiddenRef, |