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; +}