Mapbox GL Timeline Slider

Add a timeline slider to a mapbox map.

Get started

Install npm package

npm install mapboxgl-timeline

Add timeline control to map

import TimelineControl from 'mapboxgl-timeline';
import 'mapboxgl-timeline/dist/style.css';

const timeline = new TimelineControl({
  start: '2022-01-01',
  end: '2022-12-31',
  step: 1000 * 3600 * 24,
  onChange: date => {
    /*  Magic happening here 🎉 */
  },
});

map.addControl(timeline, 'top-left');

Example setup file in index.html

Options

Timeline can be configured on instantiation or using the set().

option	type	default	description
start, end	Date, number, string	undefined	Bounding dates. Can be any valid parseable Date.
initial	Date, number, string	start	Initial date
step	number	1	Time distance between timeline stops in milliseconds
placeholder	string	undefined	Label placeholder
speed	number	1	Speed rate of slider play. Base running time is 1s
lazy	boolean	false	Call to onChange is done once the slider is released. Use for computationaly expensive callback operations.
stacked	boolean	false	Show label and control stacked for narrower control.
autoplay	boolean	false	Play timeline on start
autohide	boolean	false	Hide timeline when values are undefined
format	function	undefined	Label formatting function. Receives de current Date object and must return a string.
onStart, onEnd, onChange, onPause, onResume	function	undefined	Callbacks for timeline events. Receive the current Date object and the index of the stop

Styles

Timeline defaults to a simple design inspired by standard mapbox-gl controls, but can be tunned by changing CSS variables or overriding styles. Check default values in /src/timeline.scss.

.mapboxgl-ctrl-timeline {
  --color-bg: #333;
  --color-text: #eee;
  --color-track: #fff2;
  --border: 1px solid #fff2;
}

Development

Create a .env file and set your Mapbox token as VITE_MAPBOX_TOKEN.

Run the development server with the command

npm run dev