Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mug-jp/maplibre-gl-temporal-control
Temporal Control plugin for MapLibre GL JS
https://github.com/mug-jp/maplibre-gl-temporal-control
Last synced: 3 months ago
JSON representation
Temporal Control plugin for MapLibre GL JS
- Host: GitHub
- URL: https://github.com/mug-jp/maplibre-gl-temporal-control
- Owner: mug-jp
- Created: 2021-08-09T04:26:21.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-04T09:16:35.000Z (about 1 year ago)
- Last Synced: 2024-05-01T16:24:49.608Z (6 months ago)
- Language: TypeScript
- Homepage: https://mug-jp.github.io/maplibre-gl-temporal-control/raster.html
- Size: 5.91 MB
- Stars: 30
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-maplibre - maplibre-gl-temporal-control - A plugin to easily animate temporal data. [demo](https://mug-jp.github.io/maplibre-gl-temporal-control/raster.html) (User Interface Plugins / JavaScript)
README
# maplibre-gl-temporal-control
## examples
- RasterTiles: https://mug-jp.github.io/maplibre-gl-temporal-control/raster.html
- VectorTiles: https://mug-jp.github.io/maplibre-gl-temporal-control/vector.html
## usage
```sh
npm install maplibre-gl-temporal-control
```
```typescript
const map = new maplibregl.Map(mapOptions)
// anyLayer is maplibre layer-object
map.addLayer(anyLayer1_1)
map.addLayer(anyLayer1_2)
map.addLayer(anyLayer2_1)
map.addLayer(anyLayer2_2)
map.addLayer(anyLayer3_1)
map.addLayer(anyLayer3_2)
// some layers...
import TemporalControl from 'maplibre-gl-temporal-control';
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]
},
{
title:'frame3',
layers:[anyLayer3_1, anyLayer3_2]
},
// add frames...
]
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
});
map.addControl(temporalControl);
```
### Tips
- In frames, You must set layer-objects corresponding to in map.
- Layers set in frames must be added in map
- when `performance: true`, not-current frames are shown as opacity=0.000000000000000000001
- this option may not be neccesary for ordinary usecases