Events: so when the style loaded and ready to draw?

Nobody has claimed this yet.

For now we have [`style.load`](https://github.com/mapbox/mapbox-gl-js/blob/2020f3f9ced516086508925411bd098fbb4c3234/src/style/style.js#L265) event which is [not public](https://github.com/mapbox/mapbox-gl-js/issues/3970#issuecomment-275722197).

We are supposed to use `styledata`.

Lets take this example: https://bravecow.github.io/mapbox-gl-controls/

1. We want to add our own layers. If we use `style.load`, our layers are rendered faster, because `load` event is fired at the end:

```
styledata
style.load <-- we CAN render our layers here (at least it works and looks faster than "load" event)
styledata
styledata
load
```

Okay, we can use `load` event here and render them with some delay. At least it works.

2. But it worse if we want to render same layers after style is changed. Please, use Ruler Control and switch style by Style Control. We want to preserve the same Ruler state. Events log:

```
styledata
style.load
styledata
styledata
```

Only `style.load` event is fired once. How we can use public `styledata` event here [without some `setTimeout` hacks](https://stackoverflow.com/a/57792470/643514) to draw layers again?

Thanks ❤️

Start with the event flow in src/style/style.js at the linked style.load location, then reproduce the event sequences in the issue using the linked Ruler Control example and a style switch. Trace when styledata and style.load fire during initial loading and style changes; done should provide a public, reliable way to redraw custom layers without setTimeout hacks.

Written by the indexing model from the issue text.