Clickable layer tooltips (#60)

src/components/map/FeatureLayerPopup.jsx

@@ -16,6 +16,7 @@ function groupFeaturesBySourceLayer(features) {
 
 class FeatureLayerPopup extends React.Component {
   static propTypes = {
+    onLayerSelect: PropTypes.func.isRequired,
     features: PropTypes.array
   }
 
@@ -27,6 +28,9 @@ class FeatureLayerPopup extends React.Component {
         return <label
           key={idx}
           className="maputnik-popup-layer"
+          onClick={() => {
+            this.props.onLayerSelect(feature.layer.id)
+          }}
         >
           <LayerIcon type={feature.layer.type} style={{
             width: 14,

src/components/map/MapboxGlMap.jsx

@@ -15,12 +15,6 @@ import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 import '../../libs/mapbox-rtl'
 
-function renderLayerPopup(features) {
-  var mountNode = document.createElement('div');
-  ReactDOM.render(<FeatureLayerPopup features={features} />, mountNode)
-  return mountNode.innerHTML;
-}
-
 function renderPropertyPopup(features) {
   var mountNode = document.createElement('div');
   ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
@@ -60,6 +54,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
     onDataChange: PropTypes.func,
+    onLayerSelect: PropTypes.func.isRequired,
     mapStyle: PropTypes.object.isRequired,
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
@@ -68,6 +63,7 @@ export default class MapboxGlMap extends React.Component {
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
+    onLayerSelect: () => {},
     mapboxAccessToken: tokens.mapbox,
   }
 
@@ -133,7 +129,9 @@ export default class MapboxGlMap extends React.Component {
         if(this.props.inspectModeEnabled) {
           return renderPropertyPopup(features)
         } else {
-          return renderLayerPopup(features)
+          var mountNode = document.createElement('div');
+          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
+          return mountNode
         }
       }
     })