https://github.com/jonathanlurie/crepuscule
A Maplibre and MapTiler SDK layer for ☀️ day and 🌙 night time
https://github.com/jonathanlurie/crepuscule
daylight layer map maplibre maptiler
Last synced: 3 months ago
JSON representation
A Maplibre and MapTiler SDK layer for ☀️ day and 🌙 night time
- Host: GitHub
- URL: https://github.com/jonathanlurie/crepuscule
- Owner: jonathanlurie
- License: other
- Created: 2023-07-27T20:45:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-11T09:04:07.000Z (about 2 years ago)
- Last Synced: 2025-10-20T06:35:48.193Z (8 months ago)
- Topics: daylight, layer, map, maplibre, maptiler
- Language: JavaScript
- Homepage: https://me.jonathanlurie.fr/crepuscule/examples
- Size: 17 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
Day/Night layer with twilight zone for [**MapLibre GL JS**](https://maplibre.org/maplibre-gl-js/docs/) and [**MapTiler SDK**](https://docs.maptiler.com/sdk-js/).
Tiles are dynamically generated in the browser (no fetch from API) from zoom level `0` to `22`. The twilight zone (smooth gradient) appears when the sun is between the horizon and -6° below horizon.
```bash
npm install crepuscule
```
This is how it looks like:
Coupled with the `TemperatureLayer` [MapTiler Weather library](https://docs.maptiler.com/sdk-js/modules/weather/):
Crepuscule comes with two different kinds of layers:
- a fixed one that can programmatically be updated to any date and time (`Crepuscule`)
- an automatic one that is being refreshed every 5 seconds to show realtime conditions (`CrepusculeLive`)
Usage of `Crepuscule` with ES Module:
```ts
import {
Crepuscule
} from "crepuscule";
// You first need to instanciate your Map object from MapLibre or MapTiler SDK.
// Instanciate the Crepuscule instance:
const crepObj = new Crepuscule(map);
// Alternatively with some options:
const crepObj = new Crepuscule(map, {
color: [0, 12, 55], // RGB in [0, 255]
opacity: 0.7, // in [0, 1]
date: new Date(), // any date
debug: true, // removes the twilight gradient
});
// You can hide and show the Crepuscule layer:
crepObj.hide();
crepObj.show();
// Alternatively, both hide and show can take some option to make smooth transitions:
crepObj.show({
duration: 1000, // Millisconds it takes to fade in or out
delay: 100, // Milliseconds it takes to start showing/hiding
});
// You can update the date of the Crepuscule instance
crepObj.setDate(new Date(...));
// Remove the layers and source created by this Crepuscule instance
crepObj.unmount();
// crepObj will no longer be usable after unmounting!
```
Usage of `CrepusculeLive` with ES Module:
```ts
import {
CrepusculeLive
} from "crepuscule";
// You first need to instanciate your Map object from MapLibre or MapTiler SDK.
// Instanciate the Crepuscule instance:
const crepLiveObj = new crepuscule.CrepusculeLive(map);
// Alternatively with the same options as the simple Crepuscule instance:
const crepLiveObj = new crepuscule.CrepusculeLive(map, {...});
// Once instanciated, the CrepusculeLive will start updating every 5sec
// automatically. Yet it can be stopped and restarted:
crepLiveObj.stop();
crepLiveObj.start();
// A CrepusculeLive can also be unmounted
crepLiveObj.unmount();
```