{
function renderFeature(feature) {
return
-
Source
-
-
-
Layers
-
-
-
Properties
- {renderProperties(feature)}
+
{feature.layer['source-layer']}
}
-class FeatureLayerTable extends React.Component {
+function groupFeaturesBySourceLayer(features) {
+ const sources = {}
+ features.forEach(feature => {
+ sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
+ sources[feature.layer['source-layer']].push(feature)
+ })
+ return sources
+}
+class FeatureLayerTable extends React.Component {
render() {
- const features = this.props.features
+ const sources = groupFeaturesBySourceLayer(this.props.features)
+
+ const items = Object.keys(sources).map(vectorLayerId => {
+ const layers = sources[vectorLayerId].map(feature => {
+ return
+ })
+ return
+
{vectorLayerId}
+ {layers}
+
+ })
+
return
- {features.map(renderFeature)}
+ {items}
}
}
diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx
new file mode 100644
index 00000000..b862b722
--- /dev/null
+++ b/src/components/map/FeaturePropertyPopup.jsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+function renderProperties(feature) {
+ return Object.keys(feature.properties).map(propertyName => {
+ const property = feature.properties[propertyName]
+ return
+
+
+ })
+}
+
+const Panel = (props) => {
+ return
{props.children}
+}
+
+function renderFeature(feature) {
+ return
+
{feature.layer['source-layer']}
+ {renderProperties(feature)}
+
+}
+
+class FeatureLayerTable extends React.Component {
+
+ render() {
+ const features = this.props.features
+ return
+ {features.map(renderFeature)}
+
+ }
+}
+
+
+export default FeatureLayerTable
diff --git a/src/components/map/InspectionMap.jsx b/src/components/map/InspectionMap.jsx
index 6a5029b7..9f58e89a 100644
--- a/src/components/map/InspectionMap.jsx
+++ b/src/components/map/InspectionMap.jsx
@@ -4,9 +4,10 @@ import MapboxGl from 'mapbox-gl'
import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
import colors from '../../config/colors'
import style from '../../libs/style'
-import FeatureLayerTable from './FeatureLayerTable'
+import FeaturePropertyPopup from './FeaturePropertyPopup'
import { generateColoredLayers } from '../../libs/stylegen'
import 'mapbox-gl/dist/mapbox-gl.css'
+import '../../mapboxgl.css'
function convertInspectStyle(mapStyle, sources) {
const newStyle = {
@@ -27,7 +28,7 @@ function convertInspectStyle(mapStyle, sources) {
function renderPopup(features) {
var mountNode = document.createElement('div');
- ReactDOM.render(
, mountNode)
+ ReactDOM.render(
, mountNode)
return mountNode.innerHTML;
}
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index 967c5a3b..a0105325 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -5,6 +5,7 @@ import FeatureLayerTable from './FeatureLayerTable'
import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
import style from '../../libs/style.js'
import 'mapbox-gl/dist/mapbox-gl.css'
+import '../../mapboxgl.css'
function renderPopup(features) {
var mountNode = document.createElement('div');
@@ -74,7 +75,7 @@ export default class MapboxGlMap extends React.Component {
layers: this.layers
});
- console.log('Click on features', features)
+ if(features.length < 1) return
const popup = new MapboxGl.Popup()
.setLngLat(e.lngLat)
.setHTML(renderPopup(features))
diff --git a/src/index.css b/src/index.css
index f82c04f8..22fbc7c6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,10 @@
font-style: normal;
}
+html {
+ background-color: rgb(28, 31, 36);
+}
+
.chrome-picker {
background-color: #1c1f24 !important;
font-family: inherit !important;
@@ -15,31 +19,3 @@
color: rgb(142, 142, 142) !important;
box-shadow: none !important;
}
-
-.mapboxgl-popup-tip {
- border-top-color: rgb(28, 31, 36) !important;
-}
-
-.mapboxgl-popup-content {
- background-color: rgb(28, 31, 36) !important;
- border-radius: 0px !important;
- box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
- padding: 0px !important;
-}
-
-.mapboxgl-popup-close-button {
- color: white !important;
-}
-
-.mapboxgl-ctrl-group {
- background: rgb(28, 31, 36) !important;
-}
-
-.mapboxgl-ctrl-group > button {
- background-color: rgb(28, 31, 36) !important;
- border-color: rgb(28, 31, 36) !important;
-
- &:hover {
- background-color: rgb(86, 83, 83);
- }
-}
diff --git a/src/mapboxgl.css b/src/mapboxgl.css
new file mode 100644
index 00000000..b3477a34
--- /dev/null
+++ b/src/mapboxgl.css
@@ -0,0 +1,39 @@
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+ border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+ border-right-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+ border-left-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+ border-top-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-content {
+ background-color: rgb(28, 31, 36);
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
+ padding: 0px;
+}
+
+.mapboxgl-popup-close-button {
+ color: white;
+}
+
+.mapboxgl-ctrl-group {
+ background: rgb(28, 31, 36);
+}
+
+.mapboxgl-ctrl-group > button {
+ background-color: rgb(28, 31, 36);
+ border-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-ctrl-group > button:hover {
+ background-color: rgb(86, 83, 83);
+}