chronomap
Provides functionality for syncing and interacting with a leaflet
map and a vis-timeline
.
Docs
Features
- sync leaflet marker layers with timeline groups
- synced layer toggling
- pan to timeline item on marker click
- pan map to marker on timeline item click
- hooks for manually panning timeline and map to marker
- does not bundle
leaflet
orvis-timeline
dependencies making for a light build (only 36 kb)
Use
Browser
Import chronomap.umd.js
and access it via the snake case chronoMap
window global.
Since leaflet
and vis-timeline
are depenencies, they must be loaded before chronoMap
so that the globals L
and vis
exist in the browser's namespace.
The snippet below clarifies this - see the full example at ./examples/browser/index.html
.
Chronomap - Browser UMD Example <!-- Not Required --> <!-- Required --> [...]
Node
Only one export is provided via ./dist/chronomap.ejs.js
.
See ./examples/node
for a standalone example.
Install
npm install chronomap
Importing and Usage
Similar to the umd
build, the ejs
build requires leaflet
and vis-timeline
to be imported seperately.
After importing Chronomap
, your bundling tool is responsible for bundling the leaflet
and vis-timeline
dependencies.
import L from "leaflet";
import { Chronomap } from "chronomap";
[...]
Inside chronomap.ejs.js
, the required imports from vis-timeline
will be provided by your bundler.
// inside `chronomap.ejs.js`;
Development
npm run start
Outputs a bundled build in the ./development/dist
folder and serves the ./development/index.html
file locally.
Todo
- add tests
- reduce bundle size by making
leaflet
andvis-timeline
external requirements - extract functionality to interop with other mapping libraries