diff --git a/examples/reuse-map/src/bart-map.js b/examples/reuse-map/src/bart-map.js index e4a57d47..12cf2194 100644 --- a/examples/reuse-map/src/bart-map.js +++ b/examples/reuse-map/src/bart-map.js @@ -19,6 +19,9 @@ export default class BartMap extends Component { _onViewportChange = viewState => this.setState({viewState}); + // eslint-disable-next-line no-alert + _onMapLoad = (event) => alert('Fire MapGL onLoad event'); + _renderMarker(station, i) { const {name, coordinates} = station; return ( @@ -40,6 +43,7 @@ export default class BartMap extends Component { width="100%" height="100%" onViewportChange={this._onViewportChange} + onLoad={this._onMapLoad} reuseMaps={true} > diff --git a/src/mapbox/mapbox.js b/src/mapbox/mapbox.js index 4304f1dc..f81527a4 100644 --- a/src/mapbox/mapbox.js +++ b/src/mapbox/mapbox.js @@ -224,7 +224,7 @@ export default class Mapbox { } // PRIVATE API - + // eslint-disable-next-line max-statements _create(props: Props) { // Reuse a saved map, if available if (props.reuseMaps && Mapbox.savedMap) { @@ -242,13 +242,26 @@ export default class Mapbox { this._map._container = newContainer; Mapbox.savedMap = null; - // Update style - if (props.mapStyle) { - this._map.setStyle(props.mapStyle); - } + // Step3: update style and call onload again + const fireLoadEvent = () => props.onLoad({ + type: 'load', + target: this._map + }); - // TODO - need to call onload again, need to track with Promise? - props.onLoad(); + if (props.mapStyle) { + this._map.setStyle(props.mapStyle, { + diff: true + }); + + // call onload event handler after style fully loaded when style needs update + if (this._map.isStyleLoaded()) { + fireLoadEvent(); + } else { + this._map.once('styledata', fireLoadEvent); + } + } else { + fireLoadEvent(); + } } else { if (props.gl) { const getContext = HTMLCanvasElement.prototype.getContext;