constmap=newmaplibregl.Map(mapOptions)// anyLayer is maplibre layer-objectmap.addLayer(anyLayer1_1)map.addLayer(anyLayer1_2)map.addLayer(anyLayer2_1)map.addLayer(anyLayer2_2)map.addLayer(anyLayer3_1)map.addLayer(anyLayer3_2)// some layers...importTemporalControlfrom'maplibre-gl-temporal-control';consttemporalFrames=[{title:'frame1',// shown on control panellayers:[anyLayer1_1,anyLayer1_2]// set layers you want to show at one frame...},title:'frame2',layers:[anyLayer2_1,anyLayer2_2]},{title:'frame3',layers:[anyLayer3_1,anyLayer3_2]},// add frames...]consttemporalControl=newTemporalControl(temporalFrames,{interval: 100,// duration a frame is shown, in milisecondsposition: 'top-left',performance: true// set when rendering is too slow, but frames which are not current are shown mostly transparent});map.addControl(temporalControl);
Tips
In frames, You must set layer-objects corresponding to in map.
Layers set in frames must be added in map
when performance: true, not-current frames are shown as opacity=0.000000000000000000001
this option may not be neccesary for ordinary usecases