diff --git a/package.json b/package.json index 7b0d037..4fb265c 100644 --- a/package.json +++ b/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", diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 244492c..729585e 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/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) { diff --git a/src/libs/highlight.js b/src/libs/highlight.js index 5e050ef..6390dcd 100644 --- a/src/libs/highlight.js +++ b/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') { diff --git a/webpack.production.config.js b/webpack.production.config.js index 218b109..185fb9a 100644 --- a/webpack.production.config.js +++ b/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',