Bug fix: implement onLoad event calling when reuseMaps is set to true (#704)

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}
       >

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;