diff --git a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
index c2337475..e1d0a28e 100644
--- a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
+++ b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
@@ -1,6 +1,4 @@
import React from 'react'
-import Block from './Block'
-import FieldString from './FieldString'
export type InspectFeature = {
id: string
@@ -21,30 +19,25 @@ function displayValue(value: string | number | Date | object) {
return value;
}
-function renderProperties(feature: InspectFeature) {
- return Object.keys(feature.properties).map(propertyName => {
- const property = feature.properties[propertyName]
- return
-
-
- })
-}
-
-function renderFeatureId(feature: InspectFeature) {
- return
-
-
+function renderKeyValueTableRow(key: string, value: string) {
+ return
+ | {key} |
+ {value} |
+
}
function renderFeature(feature: InspectFeature, idx: number) {
- return
-
{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
-
-
-
- {renderFeatureId(feature)}
- {renderProperties(feature)}
-
+ return <>
+
+ | {feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}} |
+
+ {renderKeyValueTableRow("$type", feature.geometry.type)}
+ {renderKeyValueTableRow("Feature ID", displayValue(feature.id))}
+ {Object.keys(feature.properties).map(propertyName => {
+ const property = feature.properties[propertyName];
+ return renderKeyValueTableRow(propertyName, displayValue(property))
+ })}
+ >
}
function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -78,7 +71,9 @@ class FeaturePropertyPopup extends React.Component {
render() {
const features = removeDuplicatedFeatures(this.props.features)
return
- {features.map(renderFeature)}
+
+ {features.map(renderFeature)}
+
}
}
diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss
index f9aab490..a500efb5 100644
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -36,3 +36,12 @@
margin-top: $margin-2;
}
}
+
+.maputnik-popup-table {
+ width: 100%;
+}
+
+.maputnik-popup-table-cell {
+ color: $color-lowgray;
+ padding-left: $margin-2;
+}