https://github.com/joergdietrich/Leaflet.Terminator

Night and day regions on Earth
https://github.com/joergdietrich/Leaflet.Terminator

days earth leaflet leaflet-map mapping night sunrise sunset

Last synced: 2 months ago
JSON representation

Night and day regions on Earth

• Host: GitHub
• URL: https://github.com/joergdietrich/Leaflet.Terminator
• Owner: joergdietrich
• License: mit
• Created: 2013-10-05T14:48:42.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2024-05-11T12:15:01.000Z (5 months ago)
• Last Synced: 2024-07-27T16:46:13.922Z (2 months ago)
• Topics: days, earth, leaflet, leaflet-map, mapping, night, sunrise, sunset
• Language: CSS
• Size: 41 KB
• Stars: 119
• Watchers: 9
• Forks: 20
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Leaflet.Terminator

==================

Overlay day and night regions on a Leaflet Earth map.

Demo: http://joergdietrich.github.io/Leaflet.Terminator/

Leaflet.Terminator extends the Polygon class. Adding the terminator to a leaflet map is as easy as 

```html

```

```js

var map = L.map('map').addLayer(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

L.terminator().addTo(map)

```

Or with npm:

```js

import L from 'leaflet';

import terminator from '@joergdietrich/leaflet.terminator';

var map = L.map('map').addLayer(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'))

terminator().addTo(map);

```

In addition to all Polygon options, Leaflet.Terminator has a new

option `resolution`, which gives the step size at which the terminator

points are computed. The step size is 1°/resolution, i.e. higher

resolution values have smaller step sizes and more points in the

polygon. The default value is 2.

Leaflet.Terminator computes the terminator from longitudes -360° to +360°

(a range of 720°), covering the Earth twice. To limit the terminator

longitude range, the `longitudeRange` option is available.

```js

var sunlightOverlay = L.terminator({resolution: 5, longitudeRange:360});

```

You can pass the `time` option in the constructor or use the `setTime()`

method to control the reference time and date for the terminator; the

value can be anything accepted by the `Date()` constructor. By default,

the current time will be used.

In the same way, you can use the `setTime()` method without an argument

to refresh the terminator to the current time. This can be done

automatically, for example using a timer:

```js

var map = L.map('map').addLayer(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

var terminator = L.terminator().addTo(map);

setInterval(function() {

	terminator.setTime();

}, 60000); // Every minute

```

If you don't like background timers running even when the page is

inactive, you can also set the terminator to be refreshed only when the

user interacts with the map:

```js

var map = L.map('map').addLayer(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

var terminator = L.terminator().addTo(map);

map.addEventListener('zoomstart movestart popupopen', function(e) {

	terminator.setTime();

});

```

You can customize and complete this code by listing

additional map interaction events, described in the Leaflet

[documentation](https://leafletjs.com/reference-1.6.0.html#map-event).