Day and Night World Map
Seeing the visual representation of the time of day in various places in the world could be a very useful aid in business, tourism, and other areas. This demo shows you how to implement the day/night view with amCharts Maps.
Key implementation details
The sun is just a circle bullet on a MapPointSeries that we position using the open source calculation functions available here. The “night” is just 3 overlayed “geo circles” (circles defined by geographic coordinates with radius in degrees). We use 3 circles with different radii to create the transitional twilight area. The center of the circles is position on the exactly opposed side of the world to the sun position.
Related tutorials
Build this chart with AI
The prompt below can be used to build this chart with AI. For best coding results, use the most advanced AI models, like Claude Opus 4.6 and GPT-5.3-Codex. For more info and tips, check out amCharts AI docs.
Create an interactive 3D globe showing real-time day and night zones on Earth. Use a dark background with green countries. Display a yellow sun icon with a glowing effect and pulsing circle animations at the current solar position. Render a semi-transparent black night zone with a realistic twilight gradient effect. Use solar calculation algorithms to compute the sun's position based on the current UTC time. Add a timeline slider and play button that animate time progression over a 4-day span. Include a Map/Globe toggle switching between flat and 3D projections. Add a toggle for whether dragging recenters the sun or the map. Enable country selection with a smooth globe rotation animation. Show an editable time label for manual date entry. Include a rotating information panel that cycles educational facts about Earth's rotation with fade transitions. Use amCharts 5 library.
Demo source