Terra: интерактивная карта эко-инициатив на WebGL с 3D-сценой и визуализацией данных

Клиент: Terra — проект интерактивной карты эко-инициатив. На карте собраны сами инициативы и территории, к которым они относятся.

Ситуация: у проекта два слоя информации — данные об инициативах и территории. Их нужно было показать вместе, в одном интерфейсе, чтобы по карте было видно, где проходит каждая инициатива, и можно было перейти от общей картины к конкретной точке.

Задача: разработать интерактивную карту на WebGL: 3D-сцену, интерфейс карты и визуализацию данных по инициативам. Критерий готовности — все инициативы проекта нанесены на карту и доступны через её интерфейс. Срок — 7 недель.

Данные и территории

Свели в одну карту два слоя: эко-инициативы и территории, к которым они привязаны. Каждая инициатива получила своё место на карте — всего их 118.

3D-сцена на WebGL

Карта отрисовывается на WebGL как 3D-сцена: территории и данные показаны в объёме прямо в браузере.

Интерфейс карты

Спроектировали интерфейс поверх 3D-сцены: навигацию по карте и доступ к данным инициатив.

Визуализация данных

Данные по инициативам вывели на саму карту, рядом с территориями, к которым они относятся.

Визуальный язык

Тёмно-зелёная палитра и топографические изолинии. Служебные подписи набраны моноширинным шрифтом, как картографические пометки:

• название — «terra · eco map»;

• координаты — 56° 50′ N · 60° 35′ E;

• счётчик — «118 initiatives».

Технологии

Карта на WebGL с 3D-сценой, интерфейс и визуализация данных работают в браузере. Интерфейс спроектирован в Figma, вёрстка — HTML и CSS.

За 7 недель собрали интерактивную карту Terra: 118 эко-инициатив нанесены на 3D-карту на WebGL вместе с территориями, к которым они относятся.

Что получил клиент

• Интерактивную карту на WebGL с 3D-сценой.

• 118 эко-инициатив на карте.

• Интерфейс карты для навигации по территориям и инициативам.

• Визуализацию данных по инициативам.

• Визуальный язык карты: палитру, изолинии и систему подписей.