From e41e1eb2f1aeed9248798c13874516846043bedb Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Thu, 29 Dec 2016 16:54:58 +0100 Subject: [PATCH] Inspection map is now always aware of current layer --- src/components/App.jsx | 4 +- src/components/map/InspectionMap.jsx | 20 ++++++--- src/libs/stylegen.js | 63 +++++++++++++++++++++------- 3 files changed, 66 insertions(+), 21 deletions(-) diff --git a/src/components/App.jsx b/src/components/App.jsx index d02d62e5..0f0aecd8 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -139,7 +139,9 @@ export default class App extends React.Component { if(renderer === 'ol3') { return } else if(renderer === 'inspection') { - return + return } else { return } diff --git a/src/components/map/InspectionMap.jsx b/src/components/map/InspectionMap.jsx index 3beda19b..4b5dd736 100644 --- a/src/components/map/InspectionMap.jsx +++ b/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, }) diff --git a/src/libs/stylegen.js b/src/libs/stylegen.js index fccbdf0f..0d74b499 100644 --- a/src/libs/stylegen.js +++ b/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) - styleLayers.push(circleLayer(sourceId, layerId, color)) - styleLayers.push(lineLayer(sourceId, layerId, color)) - styleLayers.push(polygonLayer(sourceId, layerId, color)) + const color = Color(assignVectorLayerColor(layerId)) + circleLayers.push(circleLayer(sourceId, layerId, color.alpha(0.3).string())) + lineLayers.push(lineLayer(sourceId, layerId, color.alpha(0.3).string())) + polyLayers.push(polygonLayer(sourceId, layerId, color.alpha(0.2).string(), color.alpha(0.05).string())) }) }) - return styleLayers + + return polyLayers.concat(lineLayers).concat(circleLayers) }