Green Tashkent — интерактивная карта деревьев Ташкента
Сделали для Green Tashkent интерактивную карту деревьев столицы на четырёх языках: слои махаллей и районов, поиск, фильтры, карточки деревьев и статистика инвентаризации. Карта показывает больше 10 тысяч точек одновременно и держит 60 FPS.
Задача
Green Tashkent — проект по инвентаризации деревьев столицы и созданию их цифрового реестра. Его ведут Министерство экологии, охраны окружающей среды и изменения климата, хокимият Ташкента в лице Департамента цифрового развития и фонд Zamin. Данные собирают полевые специалисты и проверяют дендрологи, а карта открыта для всех жителей.
В цифровом реестре Ташкента уже больше миллиона деревьев, и у каждого есть порода, высота, толщина ствола, диаметр кроны, координаты и фото. Проекту нужна была интерактивная карта деревьев, которая показывает этот массив целиком, не тормозит в браузере и позволяет за несколько секунд добраться до конкретного дерева.
Данные меняются каждый день. Полевые специалисты вносят новые деревья, дендрологи проверяют породы, махалли переходят от ожидания инвентаризации к завершённой. Карта и статистика должны показывать этот процесс честно: что уже проверено, что ждёт проверки и сколько сделал каждый специалист.
Аудитория у карты разная. Жителю важно найти дерево по адресу и сообщить о проблеме, журналисту и городским службам — сравнить районы, породы и динамику за выбранный период. Всё это должно работать на узбекском в латинице и кириллице, на русском и английском, а для слабовидящих нужен отдельный режим.
Часть слоёв приходит не из API платформы. Деревья, махалли и парки отдаёт городской геосервер, поэтому карту нужно было собрать из внешних картографических сервисов, собственного API и нескольких подложек так, чтобы пользователь не замечал швов.
Решение
Мы сделали карту главным экраном. Махалли окрашены по плотности — сколько деревьев приходится на гектар, — поверх включаются слои районов, парков, NDVI и участков с многолетними насаждениями, а подложку можно сменить на спутник, светлую или тёмную. Внизу — шкала периода со счётчиком деревьев, слева — лента новостей проекта.
Найти дерево можно по адресу, координатам или ID, отфильтровать — по роду и породе, высоте, толщине ствола и ширине кроны. Карточка дерева показывает размеры, адрес, координаты, балансодержателя, специалиста и дендролога, а кнопка «Пожаловаться» отправляет жалобу. На странице статистики — счётчики, таблица районов, распределения по высоте, кроне и стволу и динамика инвентаризации.
Фронтенд собран на React и Vite с MobX и Leaflet. Слои деревьев, махаллей и парков приходят тайлами с городского геосервера, поэтому тяжёлая отрисовка остаётся на сервере, а браузер получает готовые изображения. Статистика, карточки и новости берутся из API на Django REST Framework, а посещаемость считает Яндекс Метрика.
Слои карты и плотность озеленения
Махалли окрашены по числу деревьев на гектар — от пустых участков до зон, где их больше 400. В настройках включаются районы, парки, индекс NDVI и участки с многолетними насаждениями, меняется прозрачность районов, а деревья, саженцы и кустарники показываются по отдельности.
Поиск и фильтры по деревьям
Искать можно по адресу, координатам или ID дерева. Фильтры сужают карту по роду и породе, высоте, толщине ствола и ширине кроны. Инструмент измерения считает деревья в выделенной области, а ссылку на найденное дерево можно скопировать и отправить.
Карточка дерева
В карточке — род, высота, толщина ствола, диаметр кроны, район, махалля, адрес и координаты, а также балансодержатель, специалист и дендролог. Статус проверки дендрологом виден сразу, а даты добавления и последнего обновления показывают, насколько свежи данные.
Статистика инвентаризации
Страница статистики показывает, сколько деревьев добавлено и проверено, сколько специалистов и дендрологов задействовано. Здесь же рейтинг районов, распределение по породам, гистограммы высоты, кроны и толщины ствола и график динамики, который сужается до периода и района.
Специалисты и ход работ по махаллям
Рейтинг специалистов строится по числу внесённых деревьев за весь период, год, квартал, месяц, неделю, вчера и сегодня. Для каждой махалли видны площадь, число деревьев на гектар и статус: ожидает инвентаризации, в процессе, на проверке или завершена.
Обратная связь и доступность
Жители пишут через форму обратной связи: можно указать координаты, определить геопозицию и приложить до пяти фотографий. Для слабовидящих есть отдельный режим с крупным шрифтом, а интерфейс переключается между узбекским в латинице и кириллице, русским и английским.
Результаты
Главные итоги проекта в цифрах.
- 10k+Точек на карте
Карта держит больше десяти тысяч точек в кадре одновременно и не теряет отзывчивости.
- 60 FPSПлавность карты
Перемещение и масштабирование идут без рывков, потому что слои приходят готовыми тайлами.
- 4Языка платформы
Узбекский в латинице и кириллице, русский и английский — для жителей и гостей города.
- 5Слоёв на карте
Махалли, районы, парки, индекс NDVI и общий слой деревьев включаются в настройках карты.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Yandex Metrica
- Python
- Django
- Django REST Framework
- Nginx
- React
- Vite
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.