Fun of JavaScript: Dynamic Day'n'Night Worldmap

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: Day'n'Night Worldmap
Where is night right now? Where is day? Day'n'night worldmap paints the current nightzones and dayzones straight into a tiny worldmap! You may put the worldmap anywhere into your webpage. You may use a worldmap of your own - the script will adjust to its size automatically. Crossbrowser: Internet Explorer 6x/7x/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x and Google Chrome 3x/4x/5x/6x/7x/8x/9x.

Configuration:

Step 1: Open your webpage and paste the following code where you want to display your day'n'night map.

<script>
// CREDITS:
// Dynamic Day'n'Night Worldmap by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.24fun.com on the webpage 
// where this script will be running.

var globalmapimage="daynight/globalmap.gif"
var path=""
var globalmapwidth=105
var globalmapheight=62
var nightzonewidth=globalmapwidth
var nightzoneheight=globalmapheight
var clipnighttop
var clipnightbottom
var clipnightright=0
var clipnightleft=0
var clipnightpoints
var differencehours
var differencepixels
var now=new Date()
var utchours=now.getUTCHours()
var monthimage=now.getMonth()

if (monthimage==0) {monthimage="january"}
else if (monthimage==1) {monthimage="february"}
else if (monthimage==2) {monthimage="march"}
else if (monthimage==3) {monthimage="april"}
else if (monthimage==4) {monthimage="may"}
else if (monthimage==5) {monthimage="june"}
else if (monthimage==6) {monthimage="july"}
else if (monthimage==7) {monthimage="august"}
else if (monthimage==8) {monthimage="september"}
else if (monthimage==9) {monthimage="october"}
else if (monthimage==10) {monthimage="november"}
else if (monthimage==11) {monthimage="december"}

var preloadmonthimage=new Image()
preloadmonthimage.src=path+monthimage+".png"

var preloadglobalmap=new Image()
preloadglobalmap.src=globalmapimage

function initiatedaynight() {
	clipnighttop=0
	clipnightbottom=globalmapheight
	document.getElementById("globalmap").style.visibility="visible"
	document.getElementById("nightzoneright").innerHTML="<img src='"+path+monthimage+".png' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	document.getElementById("nightzoneleft").innerHTML="<img src='"+path+monthimage+".png' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	setnightstripes()
}

function setnightstripes() {
	differencepixels=globalmapwidth/24*utchours
	clipnightright=globalmapwidth

clipnightleft=parseInt(document.getElementById("globalmap").style.left)-parseInt(document.getElementById("nightzoneleft").style.left)
clipnightpoints="rect("+clipnighttop+"px "+clipnightright+"px "+clipnightbottom+"px "+clipnightleft+"px)"
document.getElementById("nightzoneleft").style.left=parseInt(document.getElementById("nightzoneleft").style.left)-differencepixels+"px"
	document.getElementById("nightzoneleft").style.clip=clipnightpoints
	document.getElementById("nightzoneleft").style.visibility="visible"
	document.getElementById("nightzoneright").style.left=parseInt(document.getElementById("nightzoneleft").style.left)+globalmapwidth+"px"
	clipnightleft=0+"px"
		clipnightright=globalmapwidth-(parseInt(document.getElementById("nightzoneright").style.left)-parseInt(document.getElementById("globalmap").style.left))
	clipnightpoints="rect("+clipnighttop+"px "+clipnightright+"px "+clipnightbottom+"px "+clipnightleft+"px)"
	document.getElementById("nightzoneright").style.clip=clipnightpoints
	document.getElementById("nightzoneright").style.visibility="visible"
}
window.onload=initiatedaynight

</script>
<div id="roofmap" style="position:relative;width:105px;height:62px;overflow:hidden">
<span id="globalmap" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden"><img src="globalmap.gif" width=105 height=62></span>
<span id="nightzoneleft" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden;"></span>
<span id="nightzoneright" style="position:absolute;top:0px;left:0px;width:105px;height:62px;visibility:hidden;"></span>
</div>

Step 2: Save the 13 images below und put them into the same folder as the webpage that features your day'n'night map. Do not change their names!

If you prefer a to use a worldmap of your own take care:
- that you name it "globalmap.gif"
- that London is the horizontal center of the worldmap.
- that the north pole marks the top of the worldmap
- that the bottom of South America marks the bottom of the worldmap