Merge pull request #213 from gregorywolanski/60

Clickable layer tooltips (#60)

package.json

@@ -33,7 +33,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^0.43.0",
-    "mapbox-gl-inspect": "^1.2.4",
+    "mapbox-gl-inspect": "^1.2.5",
     "maputnik-design": "github:maputnik/design",
     "mousetrap": "^1.6.1",
     "ol-mapbox-style": "^1.0.1",

src/components/App.jsx

@@ -249,7 +249,8 @@ export default class App extends React.Component {
     } else {
       return  <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
+        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
+        onLayerSelect={this.onLayerSelect.bind(this)} />
     }
   }
 

src/components/layers/LayerList.jsx

@@ -164,7 +164,7 @@ class LayerListContainer extends React.Component {
         const grp = <LayerListGroup
           key={[groupPrefix, idx].join('-')}
           title={groupPrefix}
-          isActive={!this.isCollapsed(groupPrefix, idx)}
+          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
         />
         listItems.push(grp)
@@ -172,9 +172,10 @@ class LayerListContainer extends React.Component {
 
       layers.forEach((layer, idxInGroup) => {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+
         const listItem = <LayerListItem
           className={classnames({
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx),
+            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
             'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
           })}
           index={idx}

src/components/map/FeatureLayerPopup.jsx

@@ -29,6 +29,7 @@ function groupFeaturesBySourceLayer(features) {
 
 class FeatureLayerPopup extends React.Component {
   static propTypes = {
+    onLayerSelect: PropTypes.func.isRequired,
     features: PropTypes.array
   }
 
@@ -40,6 +41,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
         }
       }
     })

src/styles/_popup.scss

@@ -1,6 +1,7 @@
 .maputnik-popup-layer {
   display: block;
   color: $color-lowgray;
+  cursor: pointer;
   user-select: none;
   line-height: 1.2;
   padding: $margin-2;