document

Author: Kanahiro

README.md

@@ -33,6 +33,7 @@ const temporalFrames = [
         title:'frame1', // shown on control panel
         layers:[anyLayer1_1, anyLayer1_2] // set layers you want to show at one frame...
     },
+    {
         title:'frame2',
         layers:[anyLayer2_1, anyLayer2_2]
     },
@@ -46,7 +47,7 @@ const temporalFrames = [
 const temporalControl = new TemporalControl(temporalFrames, {
     interval: 100, // duration a frame is shown, in miliseconds
     position: 'top-left',
-    performance: true // set when rendering is too slow, but frames which are not current are shown mostly transparent
+    performance: true // set when rendering is too slow
 });
 map.addControl(temporalControl);
 
@@ -55,12 +56,15 @@ temporalControl.prev()
 temporalControl.next()
 temporalControl.play()
 temporalControl.pause()
+temporalControl.isPlaying()
+temporalControl.isLoopEnabled()
 temporalControl.setLoopEnabled(true)
+temporalControl.goto(5)
 ```
 
 ### Tips
 
-- In frames, You must set layer-objects corresponding to in map.
-- Layers set in frames must be added in map
+- Layers set in frames must be added in the map
+- In each frames, You have to set layer-objects corresponding to the layers added to the map.
 - when `performance: true`, not-current frames are shown as opacity=0.000000000000000000001
   - this option may not be neccesary for ordinary usecases

example/raster.html

@@ -27,6 +27,7 @@
 			<button id="btn-pause">pause</button>
 			<button id="btn-play">play</button>
 			<button id="btn-next">next</button>
+			<button id="btn-goto">goto 7th frame</button>
 		</div>
 		<script type="module" src="./raster.ts"></script>
 	</body>

example/raster.ts

@@ -151,4 +151,9 @@ nowcast.getTimeData().then((timedata) => {
 	btnLoop.addEventListener('click', () => {
 		temporalControl.setLoopEnabled(!temporalControl.isLoopEnabled());
 	});
+
+	const btnGoto = document.getElementById('btn-goto')!;
+	btnGoto.addEventListener('click', () => {
+		temporalControl.goto(6);
+	});
 });

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "maplibre-gl-temporal-control",
 	"type": "module",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "Temporal Control plugin for Maplibre GL JS",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

src/index.ts

@@ -205,6 +205,7 @@ export default class TemporalControl implements IControl {
 	isPlaying: () => boolean;
 	isLoopEnabled: () => boolean;
 	setLoopEnabled: (enabled: boolean) => void;
+	goto: (index: number) => void;
 
 	constructor(temporalFrames: TemporalFrame[], options: Options = {}) {
 		this.temporalFrames = temporalFrames;
@@ -239,6 +240,12 @@ export default class TemporalControl implements IControl {
 		this.isPlaying = isPlaying;
 		this.isLoopEnabled = isLoopEnabled;
 		this.setLoopEnabled = setLoopEnabled;
+		this.goto = (idx: number) => {
+			slider.value = String(
+				Math.min(this.temporalFrames.length - 1, Math.max(0, idx)),
+			);
+			this.refresh();
+		};
 	}
 
 	onAdd(map: Map) {