1.0.2 • Published 2 years ago
mapboxgl-timeline v1.0.2
Mapbox GL Timeline Slider
Add a timeline slider to a mapbox map.
Get started
Install npm package
npm install mapboxgl-timelineAdd 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