Как создать Live Flight Radar в одном HTML‑файле

Live Flight Radar в одном HTML‑файле можно собрать за 10‑15 минут, используя бесплатный API и чистый JavaScript. Это работает без серверной части, потому что все запросы отправляются напрямую из браузера. Такой подход позволяет сразу видеть полёты в реальном времени на любой карте.

Как собрать Live Flight Radar в одном HTML‑файле?

Для начала нужно подключить карту и написать скрипт, который будет запрашивать данные о полётах каждые 5 секунд.

• 1. Выберите бесплатный картографический сервис, например Leaflet (JS‑библиотека, размер 45 KB).
• 2. Получите ключ API от OpenSky Network (бесплатный план позволяет до 10 000 запросов в сутки, актуально в 2026 году).
• 3. Создайте файл radar.html и подключите стили Leaflet и ваш скрипт.
• 4. Внутри скрипта используйте fetch('https://opensky-network.org/api/states/all?apikey=YOUR_KEY') и обработайте JSON‑ответ.
• 5. Преобразуйте координаты в маркеры на карте, обновляйте их каждые 5 секунд с помощью setInterval.

Почему такой радар работает без серверной части?

Браузер может напрямую обращаться к публичному API, если тот поддерживает CORS, поэтому отдельный сервер не нужен.

API OpenSky открывает кросс‑доменные запросы, а данные передаются в формате JSON, который легко парсится в JavaScript. Это экономит до 95 % расходов на инфраструктуру, так как хостинг статического HTML стоит около 299 ₽ в месяц.

Что делать, если карта не показывает полёты?

Проверьте, что ваш API‑ключ активен и запросы не превышают лимит 10 000 в сутки.

• Убедитесь, что в консоли браузера нет ошибок CORS.
• Проверьте, что координаты полётов находятся в видимой области карты (зум 4‑6).
• Если запросы блокируются, включите прокси‑сервер на https://cors-anywhere.herokuapp.com/ (бесплатно до 500 запросов в час).

Как добавить дополнительную информацию о рейсе?

Можно расширить маркеры всплывающими окнами, где будет указана высота, скорость и авиакомпания.

Для этого в обработчике JSON добавьте свойства altitude, velocity и callsign в bindPopup Leaflet. Пример кода: marker.bindPopup(`Самолёт: ${callsign}
Высота: ${altitude} м
Скорость: ${velocity} м/с`).

Как оптимизировать загрузку и снизить нагрузку на браузер?

Используйте кластеризацию маркеров и ограничьте количество отображаемых объектов до 500‑1000.

• Подключите плагин Leaflet.markercluster (размер 30 KB).
• Фильтруйте полёты по высоте > 10 000 м, чтобы показывать только крейсерские маршруты.
• Сократите частоту запросов до 10 секунд, если сервер ограничивает запросы.

Воспользуйтесь бесплатным инструментом «HTML‑Radar Builder» на toolbox-online.ru — работает онлайн, без регистрации.