Synchronize with sprite image loading

js/japan-eq-locator.js

@@ -282,6 +282,19 @@ Object.assign(panel, {
 });
 mapElement.appendChild(panel);
 
+Promise.all([
+    new Promise(resolve => map.once('load', resolve)),
+    new Promise(resolve => map.on('data', e => {
+        if (e.dataType === 'style' &&
+            e.style.imageManager.listImages().length === Object.keys(INTENSITY_LOOKUP).length) {
+            resolve();
+        }
+    }))
+]).then(() => {
+    loaded = true;
+    map.fire({type: 'allload'});
+});
+
 Promise.all([
     fetch('https://www.jma.go.jp/bosai/quake/data/list.json').then(res => res.json()),
     fetch('data/hypocenters.json').then(res => res.json()).then(data =>
@@ -315,12 +328,7 @@ Promise.all([
     }).catch(err => {
         initialParams.id = undefined;
     }) : Promise.resolve(),
-    new Promise(resolve => {
-        map.once('styledata', resolve);
-        map.once('load', () => {
-            loaded = true;
-        });
-    })
+    new Promise(resolve => map.once('styledata', resolve))
 ]).then(([quakes, hypocenterLayer]) => {
     map.addLayer(hypocenterLayer, 'waterway');
 
@@ -709,7 +717,7 @@ Promise.all([
     if (!auto) {
         hypocenterLayer.setProps({onHover});
     } else {
-        map.once(loaded ? 'idle' : 'load', () => {
+        map.once(loaded ? 'idle' : 'allload', () => {
             setHypocenter(initialParams);
             updateIntensity().then(() => {
                 if (!interactive) {