Highlight selected layer more #62

package.json

@@ -35,7 +35,6 @@
     "mousetrap": "^1.6.0",
     "ol-mapbox-style": "1.0.1",
     "openlayers": "^3.19.1",
-    "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-autocomplete": "^1.4.0",

src/components/map/MapboxGlMap.jsx

@@ -7,6 +7,8 @@ import FeaturePropertyPopup from './FeaturePropertyPopup'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
+import colors from 'mapbox-gl-inspect/lib/colors'
+import Color from 'color'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -118,6 +120,9 @@ export default class MapboxGlMap extends React.Component {
       showMapPopupOnHover: false,
       showInspectMapPopupOnHover: true,
       showInspectButton: false,
+      assignLayerColor: (layerId, alpha) => {
+        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+      },
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {

src/libs/highlight.js

@@ -1,6 +1,3 @@
-import randomColor from 'randomcolor'
-import Color from 'color'
-
 import stylegen from 'mapbox-gl-inspect/lib/stylegen'
 import colors from 'mapbox-gl-inspect/lib/colors'
 
@@ -8,6 +5,12 @@ export function colorHighlightedLayer(layer) {
   if(!layer || layer.type === 'background' || layer.type === 'raster') return null
 
   function changeLayer(l) {
+    if(l.type === 'circle') {
+      l.paint['circle-radius'] = 3
+    } else if(l.type === 'line') {
+      l.paint['line-width'] = 2
+    }
+
     if(layer.filter) {
       l.filter = layer.filter
     } else {
@@ -17,7 +20,8 @@ export function colorHighlightedLayer(layer) {
     return l
   }
 
-  const color = colors.brightColor(layer.id, 1)
+  const sourceLayerId = layer['source-layer'] || ''
+  const color = colors.brightColor(sourceLayerId, 1)
   const layers = []
 
   if(layer.type === "fill" || layer.type === 'fill-extrusion') {

webpack.production.config.js

@@ -14,7 +14,6 @@ module.exports = {
         'mapbox-gl/dist/mapbox-gl.js',
         //TODO: Build failure because cannot resolve migrations file
         //"mapbox-gl-style-spec",
-        "randomcolor",
         "lodash.clonedeep",
         "lodash.throttle",
         'color',