diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 12c4044..b080a00 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -42,11 +42,15 @@ class LayerListContainer extends React.Component { onLayerSelect: () => {}, } - state = { - collapsedGroups: {}, - areAllGroupsExpanded: false, - isOpen: { - add: false, + constructor(props) { + super(props); + this.selectedItemRef = React.createRef(); + this.state = { + collapsedGroups: {}, + areAllGroupsExpanded: false, + isOpen: { + add: false, + } } } @@ -161,6 +165,13 @@ class LayerListContainer extends React.Component { return propsChanged; } + componentDidUpdate () { + const selectedItemNode = this.selectedItemRef.current; + if (selectedItemNode && selectedItemNode.node) { + selectedItemNode.node.scrollIntoView(); + } + } + render() { const listItems = [] @@ -192,6 +203,11 @@ class LayerListContainer extends React.Component { ); }); + const additionalProps = {}; + if (idx === this.props.selectedLayerIndex) { + additionalProps.ref = this.selectedItemRef; + } + layerIdCount.set(layer.id, layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0 ); @@ -213,6 +229,7 @@ class LayerListContainer extends React.Component { onLayerDestroy={this.props.onLayerDestroy.bind(this)} onLayerCopy={this.props.onLayerCopy.bind(this)} onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)} + {...additionalProps} /> listItems.push(listItem) idx += 1 diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 3b04702..02ddc8d 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -170,7 +170,7 @@ export default class MapboxGlMap extends React.Component { if(this.props.inspectModeEnabled) { return renderPopup(, tmpNode); } else { - return renderPopup(, tmpNode); + return renderPopup(, tmpNode); } } }) @@ -208,6 +208,11 @@ export default class MapboxGlMap extends React.Component { map.on("zoomend", mapViewChange); } + onLayerSelectById = (id) => { + const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id); + this.props.onLayerSelect(index); + } + render() { if(IS_SUPPORTED) { return