diff --git a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
index c2337475..47ebec2c 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,29 +19,24 @@ 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 renderFeature(feature: InspectFeature, idx: number) {
return
{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
-
-
-
- {renderFeatureId(feature)}
- {renderProperties(feature)}
+
+
$type
+
{feature.geometry.type}
+
+
+
feature_id
+
{displayValue(feature.id)}
+
+ {Object.keys(feature.properties).map(propertyName => {
+ const property = feature.properties[propertyName];
+ return
+
{propertyName}
+
{displayValue(property)}
+
+ })}
}
diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss
index f9aab490..df685c3f 100644
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -36,3 +36,13 @@
margin-top: $margin-2;
}
}
+
+.maputnik-popup-feature-left {
+ margin-left: $margin-2;
+ color: $color-lowgray;
+ flex: 1;
+}
+.maputnik-popup-feature-right {
+ flex: 1;
+ color: $color-lowgray;
+}