diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index cba1350..e76c984 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -198,7 +198,7 @@ export default class Toolbar extends React.Component { <ToolbarSelect wdKey="nav:inspect"> <MdFindInPage /> <IconText>View </IconText> - <select onChange={(e) => this.handleSelection(e.target.value)}> + <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}> {views.map((item) => { return ( <option key={item.id} value={item.id}> diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx index 5d5c9e5..71b9983 100644 --- a/src/components/map/FeaturePropertyPopup.jsx +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -22,7 +22,7 @@ function renderProperties(feature) { } function renderFeature(feature) { - return <div key={feature.id}> + return <div key={`${feature.sourceLayer}-${feature.id}`}> <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div> <InputBlock key={"property-type"} label={"$type"}> <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} /> @@ -43,7 +43,7 @@ function removeDuplicatedFeatures(features) { if(featureIndex === -1) { uniqueFeatures.push(feature) } else { - if(uniqueFeatures[featureIndex].hasOwnProperty('counter')) { + if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) { uniqueFeatures[featureIndex].inspectModeCounter++ } else { uniqueFeatures[featureIndex].inspectModeCounter = 2 diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 0a482f9..5765f84 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/src/components/map/MapboxGlMap.jsx @@ -17,10 +17,10 @@ import '../../libs/mapbox-rtl' const IS_SUPPORTED = MapboxGl.supported(); -function renderPropertyPopup(features) { - var mountNode = document.createElement('div'); - ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode) - return mountNode.innerHTML; +function renderPopup(popup, mountNode) { + ReactDOM.render(popup, mountNode); + var content = mountNode.innerHTML; + return content; } function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) { @@ -77,9 +77,6 @@ export default class MapboxGlMap extends React.Component { this.state = { map: null, inspect: null, - isPopupOpen: false, - popupX: 0, - popupY: 0, } } @@ -150,6 +147,8 @@ export default class MapboxGlMap extends React.Component { const nav = new MapboxGl.NavigationControl(); map.addControl(nav, 'top-right'); + const tmpNode = document.createElement('div'); + const inspect = new MapboxInspect({ popup: new MapboxGl.Popup({ closeOnClick: false @@ -165,11 +164,9 @@ export default class MapboxGlMap extends React.Component { buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer), renderPopup: features => { if(this.props.inspectModeEnabled) { - return renderPropertyPopup(features) + return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode); } else { - var mountNode = document.createElement('div'); - ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode) - return mountNode + return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, tmpNode); } } }) @@ -177,6 +174,9 @@ export default class MapboxGlMap extends React.Component { map.on("style.load", () => { this.setState({ map, inspect }); + if(this.props.inspectModeEnabled) { + inspect.toggleInspector(); + } }) map.on("data", e => {