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)
}