Added color swatch to <FeatureLayerPopup/>

src/components/map/FeatureLayerPopup.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import LayerIcon from '../icons/LayerIcon'
+import {latest, expression, function as styleFunction} from '@mapbox/mapbox-gl-style-spec'
 
 function groupFeaturesBySourceLayer(features) {
   const sources = {}
@@ -36,21 +37,72 @@ class FeatureLayerPopup extends React.Component {
 
     const items = Object.keys(sources).map(vectorLayerId => {
       const layers = sources[vectorLayerId].map((feature, idx) => {
-        return <label
+        const paintProps = feature.layer.paint;
-          key={idx}
+        let propName;
-          className="maputnik-popup-layer"
+        
-          onClick={() => {
+        if(paintProps.hasOwnProperty("text-color") && paintProps["text-color"]) {
-            this.props.onLayerSelect(feature.layer.id)
+          propName = "text-color";
-          }}
+        }
+        else if (paintProps.hasOwnProperty("fill-color") && paintProps["fill-color"]) {
+          propName = "fill-color";
+        }
+        else if (paintProps.hasOwnProperty("line-color") && paintProps["line-color"]) {
+          propName = "line-color";
+        }
+        else if (paintProps.hasOwnProperty("fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
+          propName = "fill-extrusion-color";
+        }
+
+        let swatchColor;
+
+        if(propName) {
+          const propertySpec = latest["paint_"+feature.layer.type][propName];
+
+          let color = feature.layer.paint[propName];
+
+          if(typeof(color) === "object") {
+            if(color.stops) {
+              color = styleFunction.convertFunction(color, propertySpec);
+            }
+
+            const exprResult = expression.createExpression(color, propertySpec);
+            const val = exprResult.value.evaluate({
+              zoom: this.props.zoom
+            }, feature);
+            swatchColor = val.toString();
+          }
+          else {
+            swatchColor = color;
+          }
+        }
+        else {
+          // Default color
+          swatchColor = "black";
+        }
+
+        return <div
+            key={idx}
+            className="maputnik-popup-layer"
         >
-          <LayerIcon type={feature.layer.type} style={{
+          <div
-            width: 14,
+            className="maputnik-popup-layer__swatch" 
-            height: 14,
+            style={{background: swatchColor}}
-            paddingRight: 3
+          ></div>
-          }}/>
+          <label
-          {feature.layer.id}
+            className="maputnik-popup-layer__label"
-          {feature.counter && <span> × {feature.counter}</span>}
+            onClick={() => {
-        </label>
+              this.props.onLayerSelect(feature.layer.id)
+            }}
+          >
+            <LayerIcon type={feature.layer.type} style={{
+              width: 14,
+              height: 14,
+              paddingRight: 3
+            }}/>
+            {feature.layer.id}
+            {feature.counter && <span> × {feature.counter}</span>}
+          </label>
+        </div>
       })
       return <div key={vectorLayerId}>
         <div className="maputnik-popup-layer-id">{vectorLayerId}</div>

src/components/map/MapboxGlMap.jsx

@@ -156,7 +156,7 @@ export default class MapboxGlMap extends React.Component {
           return renderPropertyPopup(features)
         } else {
           var mountNode = document.createElement('div');
-          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
+          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, mountNode)
           return mountNode
         }
       }
@@ -164,7 +164,11 @@ export default class MapboxGlMap extends React.Component {
     map.addControl(inspect)
 
     map.on("style.load", () => {
-      this.setState({ map, inspect });
+      this.setState({
+        map,
+        inspect,
+        zoom: map.getZoom()
+      });
     })
 
     map.on("data", e => {
@@ -173,6 +177,12 @@ export default class MapboxGlMap extends React.Component {
         map: this.state.map
       })
     })
+
+    map.on("zoom", e => {
+      this.setState({
+        zoom: map.getZoom()
+      });
+    })
   }
 
   render() {