Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @joergdietrich/leaflet.terminator with all npm packages installed. Try it out:

require("leaflet/package.json"); // leaflet is a peer dependency. var leafletTerminator = require("@joergdietrich/leaflet.terminator")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@joergdietrich/leaflet.terminator v1.1.0

Night and day regions on Earth

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

<script src="https://unpkg.com/leaflet"></script>
<script src="https://unpkg.com/@joergdietrich/leaflet.terminator"></script>
var map = L.map('map').addLayer(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
L.terminator().addTo(map)

Or with npm:

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.

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:

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:

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free