An air alarm map — development of a website for the official air alarm map

At the beginning of the full-scale invasion, there was no convenient method to view active alarms across the country.

The main goal of the Ukraine Alarm Map website is to provide real-time information about air alerts in different regions of Ukraine. The website lets users learn about current and past alarms quickly, helping citizens respond quickly to dangers.

We decided to develop a map allowing users to track alarm states by region. In the initial version of the map, we displayed only alert states from our API. Later, we expanded the map functionality. We added the ability to view information about the last 30 alarms in the selected area and statistics for the day/month/all time.

We also added information about all types of threats: air alert, artillery fire, street fighting, and chemical and nuclear hazards. The final stage displayed information from the media about explosions in the regions, MiG-31K takeoffs, strategic aviation takeoffs, and threats from the sea.

The alarm map is written in C# and Javascript using Asp.net core technology. It uses Redis for data caching, Centrifugo for updating the map on clients, and AWS SQS for data exchange between the API and the map.

The most challenging task was to collect all the geojson files for each region, district, and ATC and link them to our internal identifiers.

The Alarm Map UI supports both light and dark themes: the light theme uses a bright, neutral background with bright accent colors, while the dark theme uses a muted map background to reduce glare in low light conditions. Thanks to the consistent use of a palette (alarming reds, warning oranges, and selective greens) across both themes, as well as clean sans-serif typography and minimalist iconography, the design provides quick visual perception and high contrast regardless of ambient light.