For better debuggability, actually keep one popup node around

This commit is contained in:
Alexander Clausen 2019-01-06 06:01:04 +01:00
parent 8f391d7d52
commit 1375240bfa

View file

@ -17,11 +17,9 @@ import '../../libs/mapbox-rtl'
const IS_SUPPORTED = MapboxGl.supported(); const IS_SUPPORTED = MapboxGl.supported();
function renderPopup(popup) { function renderPopup(popup, mountNode) {
var mountNode = document.createElement('div'); ReactDOM.render(popup, mountNode);
ReactDOM.render(popup, mountNode)
var content = mountNode.innerHTML; var content = mountNode.innerHTML;
ReactDOM.unmountComponentAtNode(mountNode);
return content; return content;
} }
@ -149,6 +147,8 @@ export default class MapboxGlMap extends React.Component {
const nav = new MapboxGl.NavigationControl(); const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right'); map.addControl(nav, 'top-right');
const tmpNode = document.createElement('div');
const inspect = new MapboxInspect({ const inspect = new MapboxInspect({
popup: new MapboxGl.Popup({ popup: new MapboxGl.Popup({
closeOnClick: false closeOnClick: false
@ -164,9 +164,9 @@ export default class MapboxGlMap extends React.Component {
buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer), buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
renderPopup: features => { renderPopup: features => {
if(this.props.inspectModeEnabled) { if(this.props.inspectModeEnabled) {
return renderPopup(<FeaturePropertyPopup features={features} />); return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
} else { } else {
return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />); return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, tmpNode);
} }
} }
}) })