Компонент GeoMap: карты мира и регионов

GeoMap в Nivo представляет собой специализированный компонент для визуализации географических данных в виде хороплет-карт, точечных слоёв и комбинированных геопространственных представлений. В основе лежит работа с географическими проекциями, TopoJSON/GeoJSON-структурами и сопоставлением пользовательских данных с географическими объектами через идентификаторы (например, ISO-коды стран или регионов).

Географические карты в Nivo строятся на нескольких ключевых слоях, каждый из которых отвечает за отдельный аспект визуализации:

  • базовая карта (страны, регионы, границы);
  • слой данных (choropleth-раскраска или значения);
  • интерактивные элементы (hover, click);
  • дополнительные слои (точки, маркеры, грид-линии).

GeoMap использует декларативную модель: разработчик описывает данные и правила отображения, а библиотека самостоятельно выполняет трансформацию географических координат в экранные.

Основой выступает географическая проекция, чаще всего Mercator или Equal Earth, которая преобразует сферическую поверхность Земли в плоское изображение.

Подключение и структура данных

Компонент GeoMap находится в пакете @nivo/geo. В типичной конфигурации ему передаются два ключевых типа данных:

  1. Географические объекты (features)
  2. Пользовательские данные (data)

Географические объекты обычно импортируются из TopoJSON:

import { ResponsiveGeoMap } from '@nivo/geo'
import countries from 'world-countries.json'

Структура features содержит набор объектов формата GeoJSON:

{
  "type": "Feature",
  "id": "KZ",
  "properties": {
    "name": "Kazakhstan"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": []
  }
}

Пользовательские данные связываются с географическими объектами через идентификатор:

const data = [
  { id: 'KZ', value: 123 },
  { id: 'RU', value: 456 },
  { id: 'CN', value: 789 }
]

Сопоставление происходит автоматически по полю id.

Базовая конфигурация GeoMap

Компонент ResponsiveGeoMap адаптируется под размер контейнера и является основным способом использования:

<ResponsiveGeoMap
  features={countries.features}
  data={data}
  margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
  projectionType="mercator"
  fillColor="value"
  valueFormat=".2f"
  unknownColor="#666666"
  borderWidth={0.5}
  borderColor="#152538"
/>

Ключевые параметры:

  • features — географические объекты
  • data — набор значений
  • projectionType — тип проекции
  • fillColor — правило окрашивания
  • unknownColor — цвет для объектов без данных
  • borderColor и borderWidth — стили границ

Проекции и их влияние на визуализацию

GeoMap поддерживает различные географические проекции, каждая из которых влияет на форму и искажения карты:

  • mercator — стандартная веб-карта
  • natural earth — сбалансированная проекция без сильных искажений
  • orthographic — сферическое представление
  • equal earth — равноплощадная проекция

Пример настройки:

projectionType="naturalEarth1"
projectionScale={160}
projectionTranslation={[0.5, 0.5]}

Параметры управления проекцией:

  • projectionScale — масштаб карты
  • projectionTranslation — смещение центра
  • projectionRotation — поворот сферы (для 3D-проекций)

Цветовое отображение данных

Один из ключевых механизмов GeoMap — визуальное кодирование данных через цветовые шкалы. Поддерживаются как фиксированные палитры, так и динамическое вычисление цвета.

Пример использования предустановленной схемы:

colors={['#e8f5e9', '#66bb6a', '#1b5e20']}

При использовании fillColor="value" значения автоматически интерполируются по диапазону.

Дополнительно можно использовать функции:

fillColor={(feature) => {
  if (!feature.data) return '#ccc'
  return feature.data.value > 100 ? '#2e7d32' : '#81c784'
}}

Связывание данных и географии

Связь между географией и данными осуществляется через ключ id. Это требует строгого соответствия форматов:

  • ISO 3166-1 alpha-2 (страны)
  • региональные коды
  • пользовательские идентификаторы

При отсутствии совпадения объект считается “без данных” и окрашивается в unknownColor.

Особенность реализации заключается в том, что GeoMap предварительно индексирует данные для оптимизации поиска, что важно при работе с большими наборами (сотни и тысячи объектов).

Интерактивность: hover и click

GeoMap предоставляет событийную модель для взаимодействия с картой:

onCl ick={(feature) => {
  console.log(feature.id, feature.data)
}}

onMouseEn ter={(feature) => {
  console.log('hover:', feature.properties.name)
}}

Каждый географический объект передаётся в обработчики с расширенной структурой:

  • id
  • properties
  • geometry
  • data (если есть совпадение)

Hover-эффекты часто используются для подсветки регионов:

enableGraticule={true}
graticuleLineColor="#dddddd"

Слои (layers) и кастомизация

GeoMap построен на концепции слоёв, что позволяет переопределять визуализацию:

layers={[
  'features',
  'graticule',
  'labels',
  CustomLayer
]}

Стандартные слои:

  • features — сами географические объекты
  • graticule — сетка координат
  • labels — подписи
  • markers — точки

Пользовательский слой:

const CustomLayer = ({ features }) => {
  return features.map(f => (
    <circle
      key={f.id}
      cx={f.centroid[0]}
      cy={f.centroid[1]}
      r={3}
      fill="red"
    />
  ))
}

Слои позволяют добавлять поверх карты:

  • тепловые точки
  • кластеры
  • аннотации
  • пользовательскую геометрию

Подписи и текстовые элементы

Подписи регионов управляются через label и labelTextColor:

label="properties.name"
labelTextColor="#000000"

В сложных случаях используется функция:

label={(feature) => feature.properties.name.toUpperCase()}

При большом количестве объектов подписи часто отключаются из-за перегрузки визуального пространства.

Масштабирование и производительность

GeoMap оптимизирован для работы с большими наборами геоданных, однако производительность зависит от:

  • количества features
  • сложности геометрии
  • количества слоёв
  • наличия анимаций

Для оптимизации используются:

  • мемоизация данных
  • упрощённые GeoJSON (simplified topology)
  • отключение лишних слоёв

Рекомендуется предварительная обработка TopoJSON через topojson-client для уменьшения размера данных.

Границы, сетка и визуальные ориентиры

Graticule — это сетка меридианов и параллелей, которая добавляет географическую читаемость:

enableGraticule={true}
graticuleLineColor="#ccc"

Также доступны настройки:

  • границ стран
  • толщины линий
  • прозрачности слоёв

Эти элементы особенно важны при использовании проекций с искажениями.

Маркеры и точечные данные

GeoMap поддерживает отображение точек поверх карты, что позволяет визуализировать события или метрики:

markers={[
  {
    markerOffsetX: 0,
    markerOffsetY: 0,
    coordinates: [69.2401, 53.2145],
    data: { value: 100 }
  }
]}

Типичные сценарии:

  • распределение пользователей
  • точки продаж
  • события
  • геолокации устройств

Маркеры могут быть стилизованы через SVG-компоненты.

Комбинирование с другими компонентами Nivo

GeoMap часто используется вместе с:

  • BarChart (сравнение регионов)
  • LineChart (динамика по странам)
  • HeatMap (региональная интенсивность)

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

Обработка отсутствующих данных

Отсутствие данных является штатным сценарием. GeoMap обрабатывает его через:

  • unknownColor
  • условные стили
  • фильтрацию features

Пример условного отображения:

if (!feature.data) {
  return '#f0f0f0'
}

Это позволяет визуально отделять пустые регионы от активных.

Стилизация и визуальная консистентность

GeoMap поддерживает строгую SVG-стилизацию, где ключевыми параметрами являются:

  • fill
  • stroke
  • strokeWidth
  • opacity

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

Типовые ошибки при работе с GeoMap

Часто встречающиеся проблемы:

  • несоответствие id между data и features
  • слишком детализированные GeoJSON (тормоза рендера)
  • отсутствие проекции при кастомных слоях
  • конфликт координат при добавлении маркеров

Корректная подготовка данных критична для стабильной визуализации.

Применение в аналитических интерфейсах

GeoMap используется в интерфейсах, где важна пространственная интерпретация данных:

  • аналитика продаж по регионам
  • мониторинг активности пользователей
  • логистика и маршрутизация
  • эпидемиологические модели
  • финансовая география (рынки, регионы)

Главное преимущество — мгновенное восприятие распределения значений на глобальном или региональном уровне

Оглавление