diff --git a/examples/leaflet/multiphaseplay.html b/examples/leaflet/multiphaseplay.html
index 3ec45dfcb..7fc0a68bb 100644
--- a/examples/leaflet/multiphaseplay.html
+++ b/examples/leaflet/multiphaseplay.html
@@ -116,7 +116,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {
@@ -149,8 +149,8 @@
       myChart.on('timelinechanged', function (params) {
         var url = wmsUrlCache[params.currentIndex];
         layer.setUrl(url);
-        changeTimelinePlay(false);
         layer.once("load", changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/mapboxgl/multiphaseplay.html b/examples/mapboxgl/multiphaseplay.html
index 5a00dd681..f62b1bd9d 100644
--- a/examples/mapboxgl/multiphaseplay.html
+++ b/examples/mapboxgl/multiphaseplay.html
@@ -122,8 +122,15 @@
     }
 
     function start() {
+      map.on('sourcedata', onSourceData);
       addStaticImageLayer();
-      map.on('load', addTimeLine);
+    }
+
+    function onSourceData(e) {
+      if (e.sourceId === 'static-image-layer' && e.isSourceLoaded) {
+        map.off('sourcedata', onSourceData);
+        addTimeLine();
+      }
     }
 
     function addStaticImageLayer() {
@@ -142,7 +149,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {
@@ -177,8 +184,8 @@
         map.getSource('static-image-layer').updateImage({
           url: url
         });
-        changeTimelinePlay(false);
         map.once('idle', changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/maplibregl/multiphaseplay.html b/examples/maplibregl/multiphaseplay.html
index 5c4ef453e..00b210bc9 100644
--- a/examples/maplibregl/multiphaseplay.html
+++ b/examples/maplibregl/multiphaseplay.html
@@ -122,8 +122,15 @@
     }
 
     function start() {
+      map.on('sourcedata', onSourceData); 
       addStaticImageLayer();
-      map.on('load', addTimeLine)
+    }
+
+    function onSourceData(e) {
+      if (e.sourceId === 'static-image-layer' && e.isSourceLoaded) {
+        map.off('sourcedata', onSourceData);
+        addTimeLine();
+      }
     }
 
     function addStaticImageLayer() {
@@ -177,8 +184,8 @@
         map.getSource('static-image-layer').updateImage({
           url: url
         });
-        changeTimelinePlay(false);
         map.once('idle', changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/openlayers/multiphaseplay.html b/examples/openlayers/multiphaseplay.html
index ebf7e6588..3e2d42c92 100644
--- a/examples/openlayers/multiphaseplay.html
+++ b/examples/openlayers/multiphaseplay.html
@@ -135,7 +135,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {