Rename to FeatureLayerPopup

src/components/map/FeatureLayerPopup.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+import LayerIcon from '../icons/LayerIcon'
+import input from '../../config/input'
+
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+const Panel = (props) => {
+  return <div style={{
+    backgroundColor: colors.gray,
+    padding: margins[0],
+    fontSize: fontSizes[5],
+    lineHeight: 1.2,
+  }}>{props.children}</div>
+}
+
+function renderFeature(feature) {
+  return <div>
+    <Panel>{feature.layer['source-layer']}</Panel>
+  </div>
+}
+
+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 FeatureLayerPopup extends React.Component {
+  render() {
+    const sources = groupFeaturesBySourceLayer(this.props.features)
+
+    const items = Object.keys(sources).map(vectorLayerId => {
+      const layers = sources[vectorLayerId].map((feature, idx) => {
+        return <label
+          key={idx}
+          style={{
+            ...input.label,
+            display: 'block',
+            width: 'auto',
+          }}>
+          <LayerIcon type={feature.layer.type} style={{
+            width: fontSizes[4],
+            height: fontSizes[4],
+            paddingRight: margins[0],
+          }}/>
+          {feature.layer.id}
+        </label>
+      })
+      return <div>
+        <Panel>{vectorLayerId}</Panel>
+        {layers}
+      </div>
+    })
+
+    return <div>
+      {items}
+    </div>
+  }
+}
+
+
+export default FeatureLayerPopup