{"id":18153837,"url":"https://github.com/skeate/leaflet.timeline","last_synced_at":"2025-05-16T08:02:50.714Z","repository":{"id":24008703,"uuid":"27392779","full_name":"skeate/Leaflet.timeline","owner":"skeate","description":"Display arbitrary GeoJSON on a map with a timeline slider and play button","archived":false,"fork":false,"pushed_at":"2024-08-31T01:59:47.000Z","size":12061,"stargazers_count":408,"open_issues_count":31,"forks_count":67,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-16T08:01:36.281Z","etag":null,"topics":["geojson","leaflet","timeline"],"latest_commit_sha":null,"homepage":"https://skeate.github.io/Leaflet.timeline","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skeate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-01T18:16:44.000Z","updated_at":"2025-05-13T04:45:13.000Z","dependencies_parsed_at":"2024-11-23T06:45:13.276Z","dependency_job_id":null,"html_url":"https://github.com/skeate/Leaflet.timeline","commit_stats":{"total_commits":194,"total_committers":15,"mean_commits":"12.933333333333334","dds":"0.45360824742268047","last_synced_commit":"3b02e0bfc328d6815e3ee9a0316e73e467daf619"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skeate%2FLeaflet.timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skeate%2FLeaflet.timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skeate%2FLeaflet.timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skeate%2FLeaflet.timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skeate","download_url":"https://codeload.github.com/skeate/Leaflet.timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493381,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["geojson","leaflet","timeline"],"created_at":"2024-11-02T03:08:14.239Z","updated_at":"2025-05-16T08:02:50.680Z","avatar_url":"https://github.com/skeate.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/skeate/Leaflet.timeline.svg)](https://travis-ci.org/skeate/Leaflet.timeline)\n[![Code Climate](https://codeclimate.com/github/skeate/Leaflet.timeline/badges/gpa.svg)](https://codeclimate.com/github/skeate/Leaflet.timeline)\n[![Test Coverage](https://codeclimate.com/github/skeate/Leaflet.timeline/badges/coverage.svg)](https://codeclimate.com/github/skeate/Leaflet.timeline/coverage)\n[![npm version](https://img.shields.io/npm/v/leaflet.timeline.svg)](https://www.npmjs.com/package/leaflet.timeline)\n\n[![Join the chat at https://gitter.im/skeate/Leaflet.timeline](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/skeate/Leaflet.timeline?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n# Leaflet.timeline\n\nShow any changing geospatial data over time, from points to polygons.\n\nIf you want smooth motion of markers from point to point, this is not your\nplugin. Please check out [LeafletPlayback][], or for real-time data, try\n[Leaflet Realtime][], both plugins from which I may or may not have pilfered\nsome ideas.\n\n\n## Examples\n\nTo run the examples locally, run `npm run build` and then open the one of the\nexamples in `docs/examples`.\n\n### [Earthquakes][earthquakes]\n\nUSGS provides [GeoJSON(P) files][usgs] with earthquake data, including time and\nmagnitude. For this example, that data is read, parsed to the right format\n(`start` and `end` values in the GeoJSON `properties`), and added to a\n`Leaflet.timeline`.\n\n### [Country borders after WWII][borders]\n\nI found some historical country border data [here][border-data], though\nunfortunately it was not in GeoJSON. I converted it with [ogr2ogr][]:\n\n    $ ogr2ogr -f \"GeoJSON\" \\\n      -select CNTRY_NAME,COWSYEAR,COWSMONTH,COWSDAY,COWEYEAR,COWEMONTH,COWEDAY \\\n      borders.json cshapes.shp\n\nthen wrangled the data into the right format (docs/examples/borders-parse.js).\nAfter that, it was just a matter of passing the data to `Leaflet.timeline` and\nletting it handle everything.\n\n## Usage\n\nThere are actually two classes here. `L.Timeline` and `L.TimelineSliderControl`.\n\n### `L.Timeline`\n\n`L.Timeline` is a subclass of `L.GeoJSON`, so use it as you would that. The data\nyou pass in should be something like this:\n\n``` json\n{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {\n        \"start\": \"1970-01-01\",\n        \"end\": \"2014-12-04\"\n      },\n      \"geometry\": { ... }\n    }\n  ]\n}\n```\n\nThough you can also pass in a `getInterval` function to parse the data as you\nwish. (see below)\n\nThe date can really be any numerical value -- if you're using this for timed\ndata, a Unix timestamp (the ms version for easier JS usage) probably makes\nsense.\n\n#### Options\n\nsee also [all GeoJSON's options](http://leafletjs.com/reference.html#geojson)\n\n##### `getInterval` (Function -- optional)\n\nThis is a function which should return an object with `start` and `end`\nproperties. By default it assumes a structure as above.\n\nOptionally, the boolean keys `startExclusive` and `endExclusive` allow this\ninterval to be considered exclusive, i.e., only matching `time \u003e start`\n(`time \u003c end`), instead of `time \u003e= start`(`time \u003c= end`), respectively.\n\n##### `drawOnSetTime` (Boolean -- optional, default `true`)\n\nMake the layer draw as soon as `setTime` is called. If this is set to false, you\nwill need to call `updateDisplayedLayers()` manually when you want it to\nactually update.\n\n#### Events\n\n##### `change`\nFired when the selected time changes (either through manually sliding or\nthrough playback).\n\n### `L.TimelineSliderControl`\n\nThis is the actual control that allows playback and whatnot. It can control\nmultiple `L.Timeline`s.\n\n#### Options\n\n##### `start`\n*default: earliest `start` in GeoJSON*\n\nThe beginning/minimum value of the timeline.\n\n##### `end`\n*default: latest `end` in GeoJSON*\n\nThe end/maximum value of the timeline.\n\n##### `position`\n*default: bottomleft*\n\n[Position](http://leafletjs.com/reference.html#control) for the timeline\ncontrols. Probably doesn't really matter as you'll likely want to expand them\nanyway.\n\n#### `formatOutput`\n*default: `(date) -\u003e date.toString()`*\n\nA function that takes in a Unix timestamp and outputs a string. Ideally for\nformatting the timestamp, but hey, you can do whatever you want.\n\n#### `enablePlayback`\n*default: `true`*\n\nShow playback controls (i.e. prev/play/pause/next).\n\n### `enableKeyboardControls`\n*default: `false`*\n\nAllow playback to be controlled using the spacebar (play/pause) and\nright/left arrow keys (next/previous).\n\n#### `steps`\n*default: 1000*\n\nHow many steps to break the timeline into. Each step will then be `(end-start) /\nsteps`. Only affects playback.\n\n#### `duration`\n*default: 10000*\n\nMinimum time, in ms, for the playback to take. Will almost certainly actually\ntake at least a bit longer -- after each frame, the next one displays in\n`duration/steps` ms, so each frame really takes frame processing time PLUS\nstep time.\n\n#### `showTicks`\n*default: true*\n\nShow tick marks on slider (if the browser supports it), representing changes in\nvalue(s).\n\n#### `waitToUpdateMap`\n*default: false*\n\nWait until the user is finished changing the date to update the map. By default,\nboth the map and the date update for every change. With complex data, this can\nslow things down, so set this to true to only update the displayed date.\n\n#### `autoPlay`\n*default: false*\n\nSlider starts playing automatically after loading.\n\n## Methods\n\n#### `setTime`\nSets the current timeline time. Will parse any dates in just about any format\nyou throw at it.\n\n#### `getDisplayed`\nReturns the original GeoJSON of the features that are currently being displayed\non the map.\n\n## Contributing\n\nTo get the project running locally, clone this repo and run these commands\nwithin the project folder:\n\n```\nnpm install\nnpm test -- --watchAll\n```\n\nTo view the examples, you'll need to build:\n\n```\nnpm run build\n```\n\nThen open up the HTML files in the \"docs/examples\" folders in your browser.\n\nPlease create a pull request from your fork of the project, and provide details\nof the intent of the changes.\n\n## Change log\n\n### 1.4.2\n- Bugfix: Prevent keyboard controls from triggering in other inputs or textareas\n    (#146)\n\n### 1.4.1\n- Minor package change (removing extra files)\n\n### 1.4.0\n- Migrate to Typescript\n- Upgrade [Diesal][] dependency to improve performance on large datasets\n\n### 1.3.0\n- Add aria-labels (#136)\n- Add autoplay option (#116)\n\n### 1.0.0\n- 100% test coverage\n- BUGFIX: `times` is no longer shared among all Timeline instances\n- Switch to pointer events for better mobile support (hopefully)\n- More build tweaks, including setting up a dev server\n\n### 1.0.0-beta\n- Completely rewrote in ES6\n- Overhauled build system with webpack\n- Separated layer from control, allowing the control to handle multiple\n  layers at the same time\n- Added tests!\n\n### 0.4.3\n- Build tweaks\n\n### 0.4.2\n- Fixed a version check issue\n\n### 0.4.1\n- Fixed an issue where removing the L.timeline would not remove the control\n\n### 0.4.0\n- Fixed an issue where too wide of a range of dates would case playback to go\n  backwards\n- Added options to pass in methods to handle the data, so you can use a different\n  format if you want\n- Added a grunt build pipeline (thanks to @vencax for this and the two changes above)\n- Fixed a bug where next/previous buttons wouldn't work as expected if input\n  wasn't sorted (.. by sorting the input)\n\n\n### 0.3.0\n- Fixed Pause button not turning back into Play button on playback completion\n- Fixed clicks on control buttons zooming map\n- Fixed `getDisplayed` and event timing\n- Major performance improvements\n- Add `waitToUpdateMap` option to allow dragging the slider without updating\n  the map until user is done\n\n### 0.2.0\n- Added previous/next/pause\n- Change behavior of play button (will play from wherever it is rather than\n  reset to the beginning)\n- Lots of code restructuring\n- Add more extensive default styling, using Sass\n\n### 0.1.0\n- It kinda works?\n\n[Leaflet Realtime]: https://github.com/perliedman/leaflet-realtime\n[LeafletPlayback]: https://github.com/hallahan/LeafletPlayback\n[Diesal]: https://skeate.github.io/diesal\n[earthquakes]:\n    https://skeate.dev/Leaflet.timeline/examples/earthquakes.html\n[usgs]: https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php\n[borders]: https://skeate.dev/Leaflet.timeline/examples/borders.html\n[border-data]: http://nils.weidmann.ws/projects/cshapes\n[ogr2ogr]: https://www.gdal.org/ogr2ogr.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskeate%2Fleaflet.timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskeate%2Fleaflet.timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskeate%2Fleaflet.timeline/lists"}