Daylight Map

<!DOCTYPE html>

<html>

<head>

<title>Daylight Map</title>

</head>

<body>

<h1>Daylight Map</h1>

<div class="container">

<svg id="daylight-map"></svg>

<div class="controls">

<div class="curr-time">

<a class="js-skip" data-skip="-60" href="#">‹</a>

<span class="js-time" id="clock"></span>

<a class="js-skip" data-skip="60" href="#">›</a>

</div>

<div class="clear"></div>

<div class="curr-date">

<a class="js-skip big-jump" data-skip="-43200" href="#">«</a>

<a class="js-skip" data-skip="-1440" href="#">‹</a>

<span class="js-time"></span>

<a class="js-skip" data-skip="1440" href="#">›</a>

<a class="js-skip big-jump" data-skip="43200" href="#">»</a>

</div>

<span class="animate"><a href="#" class="js-animate">Start/Pause</a></span>

<div class="clear"></div>

</div>

</div>

</div>

<script src="https://sabalico.dev/jquery.js"></script>

<script src="https://world-map.org/cartography/scripts/d3.js"></script>

<script src="https://world-map.org/cartography/scripts/d3-topojson.js"></script>

<script src="https://sabalico.dev/scripts/suncalc.js"></script>

<script src="https://sabalico.dev/scripts/moment.js"></script>

<script src="https://sabalico.dev/scripts/clock-time.js"></script>

<script src="https://world-map.org/cartography/plugins/daylight.js"></script>

</body>

</html>

Code Copied!