Лендинги 2025

Интерактивная карта РФ

Интерактивная карта присутствия членов Нефтегазстройпрофсоюза России

О проекте

Веб-приложение для визуализации присутствия членов Нефтегазстройпрофсоюза России на карте страны. Отображает регионы с членами профсоюза, объекты нефтегазовой отрасли, магистральные трубопроводы и города. Рассчитано на демонстрацию на экранах, стендах, презентациях, а также на использование внутри эко-системы клиента.

Функционал:
- Интерактивная SVG-карта России. Панорамирование перетаскиванием, зум колесом мыши и кнопками (+/-/сброс). Плавные анимации трансформаций.
- Цветовая индикация регионов. Градиентная заливка регионов по количеству членов профсоюза. Легенда с маркером текущего значения при наведении. Регионы без членов профсоюза отображаются нейтральным цветом и не кликабельны.
- Детализация по региону. Клик по региону: автоматический зум к границам региона, отображение только объектов этого региона, фильтрация доступных типов объектов в панели. Повторный клик возвращает к общему виду.
- Объекты нефтегазовой отрасли. База из 100+ объектов с координатами, типами, регионами, компаниями-владельцами.
- Типы объектов: газовые месторождения (Gas field), нефтяные месторождения (Oil field), газоконденсатные месторождения (Gas condensate field), нефтегазоконденсатные месторождения (Gas-oil condensate field), НПЗ и перерабатывающие заводы (Refinery), терминалы (Terminal).
- Магистральные трубопроводы. Газопроводы (голубой цвет) и нефтепроводы (черный цвет). Включение/выключение через панель фильтров. При активации трубопроводов отображаются города, объекты скрываются.
- Фильтрация по типам объектов. Панель с иконками типов объектов. Множественный выбор. При зуме в регион показываются только типы, присутствующие в этом регионе, остальные блокируются.
- Кластеризация объектов. При отдалении близко расположенные объекты группируются в кластеры со счетчиком. При приближении кластеры распадаются на отдельные объекты.
- Тултипы объектов. При наведении на объект появляется всплывающая подсказка с логотипом компании-владельца и названием объекта.
- Счетчик членов профсоюза. Общее количество членов профсоюза отображается в углу карты.

Стек:
HTML + CSS + JavaScript (vanilla). SVG-карта России с регионами. Все данные (объекты, координаты, членство) встроены в HTML.