Always show all features in inspect mode

This commit is contained in:
Lukas Martinelli 2016-12-29 17:30:01 +01:00
parent 853361ace7
commit d16c3f4356
3 changed files with 10 additions and 10 deletions

View file

@ -24,13 +24,14 @@ const Panel = (props) => {
} }
function renderFeature(feature) { function renderFeature(feature) {
console.log(feature)
return <div> return <div>
<Panel>{feature.layer['source-layer']}</Panel> <Panel>{feature.layer['source-layer']}</Panel>
{renderProperties(feature)} {renderProperties(feature)}
</div> </div>
} }
class FeatureLayerTable extends React.Component { class FeaturePropertyPopup extends React.Component {
render() { render() {
const features = this.props.features const features = this.props.features
@ -41,4 +42,4 @@ class FeatureLayerTable extends React.Component {
} }
export default FeatureLayerTable export default FeaturePropertyPopup

View file

@ -10,12 +10,10 @@ import 'mapbox-gl/dist/mapbox-gl.css'
import '../../mapboxgl.css' import '../../mapboxgl.css'
function convertInspectStyle(mapStyle, sources, highlightedLayer) { function convertInspectStyle(mapStyle, sources, highlightedLayer) {
let coloredLayers = generateColoredLayers(sources) const coloredLayers = generateColoredLayers(sources)
const layer = colorHighlightedLayer(highlightedLayer)
const layer = colorHighlightedLayer(highlightedLayer)
if(layer) { if(layer) {
const idx = style.indexOfLayer(coloredLayers, layer.id)
coloredLayers.splice(idx, 1)
coloredLayers.push(layer) coloredLayers.push(layer)
} }

View file

@ -75,12 +75,13 @@ function lineLayer(source, vectorLayer, color) {
export function colorHighlightedLayer(layer) { export function colorHighlightedLayer(layer) {
if(!layer || layer.type === 'background' || layer.type === 'raster') return null if(!layer || layer.type === 'background' || layer.type === 'raster') return null
function changeFilter(l) { function changeLayer(l) {
if(layer.filter) { if(layer.filter) {
l.filter = layer.filter l.filter = layer.filter
} else { } else {
delete l['filter'] delete l['filter']
} }
l.id = l.id + '_highlight'
return l return l
} }
@ -88,15 +89,15 @@ export function colorHighlightedLayer(layer) {
const layers = [] const layers = []
if(layer.type === "fill" || layer.type === 'fill-extrusion') { if(layer.type === "fill" || layer.type === 'fill-extrusion') {
return changeFilter(polygonLayer(layer.source, layer['source-layer'], color, Color(color).alpha(0.2).string())) return changeLayer(polygonLayer(layer.source, layer['source-layer'], color, Color(color).alpha(0.2).string()))
} }
if(layer.type === "symbol" || layer.type === 'circle') { if(layer.type === "symbol" || layer.type === 'circle') {
return changeFilter(circleLayer(layer.source, layer['source-layer'], color)) return changeLayer(circleLayer(layer.source, layer['source-layer'], color))
} }
if(layer.type === 'line') { if(layer.type === 'line') {
return changeFilter(lineLayer(layer.source, layer['source-layer'], color)) return changeLayer(lineLayer(layer.source, layer['source-layer'], color))
} }
return null return null