Inspection map is now always aware of current layer

src/components/App.jsx

@@ -139,7 +139,9 @@ export default class App extends React.Component {
     if(renderer === 'ol3') {
       return <OpenLayers3Map {...mapProps} />
     } else if(renderer === 'inspection') {
-      return  <InspectionMap {...mapProps} sources={this.state.sources} />
+      return  <InspectionMap {...mapProps}
+        sources={this.state.sources}
+        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]} />
     } else {
       return  <MapboxGlMap {...mapProps} />
     }

src/components/map/InspectionMap.jsx

@@ -5,11 +5,20 @@ import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import colors from '../../config/colors'
 import style from '../../libs/style'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
-import { generateColoredLayers } from '../../libs/stylegen'
+import { colorHighlightedLayer, generateColoredLayers } from '../../libs/stylegen'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
 
-function convertInspectStyle(mapStyle, sources) {
+function convertInspectStyle(mapStyle, sources, highlightedLayer) {
+  let coloredLayers = generateColoredLayers(sources)
+  const layer = colorHighlightedLayer(highlightedLayer)
+
+  if(layer) {
+    const idx = style.indexOfLayer(coloredLayers, layer.id)
+    coloredLayers.splice(idx, 1)
+    coloredLayers.push(layer)
+  }
+
   const newStyle = {
     ...mapStyle,
     layers: [
@@ -20,7 +29,7 @@ function convertInspectStyle(mapStyle, sources) {
           "background-color": colors.black,
         }
       },
-      ...generateColoredLayers(sources),
+      ...coloredLayers,
     ]
   }
   return newStyle
@@ -37,6 +46,7 @@ export default class InspectionMap extends React.Component {
     onDataChange: React.PropTypes.func,
     sources: React.PropTypes.object,
     originalStyle: React.PropTypes.object,
+    highlightedLayer: React.PropTypes.object,
     style: React.PropTypes.object,
   }
 
@@ -53,7 +63,7 @@ export default class InspectionMap extends React.Component {
   componentWillReceiveProps(nextProps) {
     if(!this.state.map) return
 
-    this.state.map.setStyle(convertInspectStyle(nextProps.mapStyle, this.props.sources), { diff: true})
+    this.state.map.setStyle(convertInspectStyle(nextProps.mapStyle, this.props.sources, nextProps.highlightedLayer), { diff: true})
   }
 
   componentDidMount() {
@@ -61,7 +71,7 @@ export default class InspectionMap extends React.Component {
 
     const map = new MapboxGl.Map({
       container: this.container,
-      style: convertInspectStyle(this.props.mapStyle, this.props.sources),
+      style: convertInspectStyle(this.props.mapStyle, this.props.sources, this.props.highlightedLayer),
       hash: true,
     })
 

src/libs/stylegen.js

@@ -28,10 +28,9 @@ function assignVectorLayerColor(layerId) {
 
 function circleLayer(source, vectorLayer, color) {
   return {
-    id: vectorLayer + Math.random(),
+    id: `${source}_${vectorLayer}_circle`,
     source: source,
     'source-layer': vectorLayer,
-    interactive: true,
     type: 'circle',
     paint: {
       'circle-color': color,
@@ -41,15 +40,14 @@ function circleLayer(source, vectorLayer, color) {
   }
 }
 
-function polygonLayer(source, vectorLayer, color) {
+function polygonLayer(source, vectorLayer, color, fillColor) {
   return {
-    id: vectorLayer + Math.random(),
+    id: `${source}_${vectorLayer}_polygon`,
     source: source,
     'source-layer': vectorLayer,
-    interactive: true,
     type: 'fill',
     paint: {
-      'fill-color': Color(color).alpha(0.15).string(),
+      'fill-color': fillColor,
       'fill-antialias': true,
       'fill-outline-color': color,
     },
@@ -59,30 +57,65 @@ function polygonLayer(source, vectorLayer, color) {
 
 function lineLayer(source, vectorLayer, color) {
   return {
-    id: vectorLayer + Math.random(),
+    id: `${source}_${vectorLayer}_line`,
     source: source,
     'source-layer': vectorLayer,
-    interactive: true,
     layout: {
       'line-join': 'round',
       'line-cap': 'round'
     },
     type: 'line',
-    paint: {'line-color': color},
+    paint: {
+      'line-color': color,
+    },
     filter: ["==", "$type", "LineString"]
   }
 }
 
+export function colorHighlightedLayer(layer) {
+  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
+
+  function changeFilter(l) {
+    if(layer.filter) {
+      l.filter = layer.filter
+    } else {
+      delete l['filter']
+    }
+    return l
+  }
+
+  const color = assignVectorLayerColor(layer.id)
+  const layers = []
+
+  if(layer.type === "fill" || layer.type === 'fill-extrusion') {
+    return changeFilter(polygonLayer(layer.source, layer['source-layer'], color, Color(color).alpha(0.2).string()))
+  }
+
+  if(layer.type === "symbol" || layer.type === 'circle') {
+    return changeFilter(circleLayer(layer.source, layer['source-layer'], color))
+  }
+
+  if(layer.type === 'line') {
+    return changeFilter(lineLayer(layer.source, layer['source-layer'], color))
+  }
+
+  return null
+}
+
 export function generateColoredLayers(sources) {
-  const styleLayers = []
+  const polyLayers = []
+  const circleLayers = []
+  const lineLayers = []
+
   Object.keys(sources).forEach(sourceId => {
     const layers = sources[sourceId]
     layers.forEach(layerId => {
-      const color = assignVectorLayerColor(layerId)
+      const color = Color(assignVectorLayerColor(layerId))
-      styleLayers.push(circleLayer(sourceId, layerId, color))
+      circleLayers.push(circleLayer(sourceId, layerId, color.alpha(0.3).string()))
-      styleLayers.push(lineLayer(sourceId, layerId, color))
+      lineLayers.push(lineLayer(sourceId, layerId, color.alpha(0.3).string()))
-      styleLayers.push(polygonLayer(sourceId, layerId, color))
+      polyLayers.push(polygonLayer(sourceId, layerId, color.alpha(0.2).string(), color.alpha(0.05).string()))
     })
   })
-  return styleLayers
+
+  return polyLayers.concat(lineLayers).concat(circleLayers)
 }