Ensure style updates are applied after inspect

This commit is contained in:
Lukas Martinelli 2017-01-08 22:16:45 +01:00
parent c363c88f23
commit 91604afccb

View file

@ -40,6 +40,7 @@ export default class MapboxGlMap extends React.Component {
MapboxGl.accessToken = props.accessToken MapboxGl.accessToken = props.accessToken
this.state = { this.state = {
map: null, map: null,
inspect: null,
isPopupOpen: false, isPopupOpen: false,
popupX: 0, popupX: 0,
popupY: 0, popupY: 0,
@ -51,15 +52,15 @@ export default class MapboxGlMap extends React.Component {
if(!this.state.map) return if(!this.state.map) return
if(!this.props.inspectModeEnabled) { if(this.props.inspectModeEnabled !== nextProps.inspectModeEnabled) {
this.state.inspect.toggleInspector()
}
if(!nextProps.inspectModeEnabled) {
//Mapbox GL now does diffing natively so we don't need to calculate //Mapbox GL now does diffing natively so we don't need to calculate
//the necessary operations ourselves! //the necessary operations ourselves!
this.state.map.setStyle(nextProps.mapStyle, { diff: true}) this.state.map.setStyle(nextProps.mapStyle, { diff: true})
} }
if(this.props.inspectModeEnabled !== nextProps.inspectModeEnabled) {
this.inspect.toggleInspector()
}
} }
componentDidMount() { componentDidMount() {
@ -69,10 +70,10 @@ export default class MapboxGlMap extends React.Component {
hash: true, hash: true,
}) })
const nav = new MapboxGl.NavigationControl(); const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right'); map.addControl(nav, 'top-right');
this.inspect = new MapboxInspect({ const inspect = new MapboxInspect({
popup: new MapboxGl.Popup({ popup: new MapboxGl.Popup({
closeButton: false, closeButton: false,
closeOnClick: false closeOnClick: false
@ -86,10 +87,10 @@ export default class MapboxGlMap extends React.Component {
} }
} }
}) })
map.addControl(this.inspect) map.addControl(inspect)
map.on("style.load", () => { map.on("style.load", () => {
this.setState({ map }); this.setState({ map, inspect });
}) })
map.on("data", e => { map.on("data", e => {