mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2025-01-15 09:01:20 +01:00
Always show all features in inspect mode
This commit is contained in:
parent
853361ace7
commit
d16c3f4356
3 changed files with 10 additions and 10 deletions
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue