# MapView Component - Leaflet карта с зонами и тепловой картой

## Дата: 2026-05-05

### Созданные файлы:

1. MapView.jsx (9.5 KB) - основной компонент
2. MapView.css (2.1 KB) - стили
3. index.jsx - экспорт

### Функционал:

#### 1. Базовая карта
- Leaflet + OpenStreetMap тайлы
- Инициализация с центром на ТНП
- Zoom level: 13 (по умолчанию)
- maxZoom: 19

#### 2. Маркер ТНП (Точка Начала Поиска)
- Красный круглый маркер с текстом ТНП
- Цвет: #ff4d00 (ЦОУ accent)
- Белая рамка 3px
- Popup с координатами
- Размер: 40x40px (32x32px на мобильных)

#### 3. Стрелка направления
- Пунктирная линия от ТНП (1 км)
- Цвет: #ff4d00
- Стрелка на конце с поворотом
- Направления: N, NE, E, SE, S, SW, W, NW
- Скрывается если direction = unknown

#### 4. Секторные зоны (полигоны)
- НЕ окружности, а секторы (угол 90°, ±45° от направления)
- Цвета из §5 ЦОУ палитры:
  Зона 1 (0-500м): #ff4d00 (красный)
  Зона 2 (500-1500м): #ff9f1a (оранжевый)
  Зона 3 (1500-2500м): #ffd166 (желтый)
- fillOpacity: 0.2
- weight: 2, opacity: 0.6
- Popup с информацией: название, приоритет, оценка, расстояние, reasoning

#### 5. Тепловая карта (Leaflet.heat)
- Переключаемый слой (кнопка в правом верхнем углу)
- Параметры: radius 25, blur 15, maxZoom 17, max 1.0
- Градиент (ЦОУ палитра):
  0.0: #0d1117 (темный)
  0.3: #238636 (зеленый)
  0.5: #ffd166 (желтый)
  0.7: #ff9f1a (оранжевый)
  1.0: #ff4d00 (красный)

### Props:

- tnpLat: number - Широта ТНП (обязательно)
- tnpLon: number - Долгота ТНП (обязательно)
- zones: Array - Массив зон с полями: name, priority, score, distance_km, direction, reasoning
- direction: string - Направление: N, NE, E, SE, S, SW, W, NW, unknown
- heatmapData: Array - Массив точек с полями: lat, lon, intensity
- showHeatmap: boolean - Показывать тепловую карту по умолчанию

### Математика:

Вычисление точки назначения (Haversine):
- R = 6371000 м (радиус Земли)
- Преобразование lat/lon в радианы
- Вычисление новой точки по азимуту и дистанции

Секторный полигон:
- Начало в ТНП
- Угол сектора: 90° (±45° от направления)
- Шаг генерации точек: 5°
- Замыкание полигона обратно в ТНП

### Стилизация:

Контейнер:
- height: 600px (400px на мобильных)
- background: #0a0c0f
- border-radius: 12px
- border: 1px solid #21262d

Кнопка управления:
- position: absolute, top: 16px, right: 16px
- z-index: 1000
- background: #161b22
- active: #ff4d00

Popup:
- background: #161b22
- color: #e6edf3
- border: 1px solid #30363d

### Зависимости (package.json):

Требуется установить:
- leaflet: ^1.9.4
- leaflet.heat: ^0.2.0

### Особенности реализации:

1. useRef для слоев - избегаем пересоздания при ререндере
2. useEffect с зависимостями - обновление только при изменении props
3. Cleanup - удаление старых слоев перед добавлением новых
4. calculateDestination - точное вычисление координат по азимуту
5. Секторы вместо окружностей - более точное отображение зон поиска

### Файлы:
- /root/vector/frontend/src/components/MapView/MapView.jsx
- /root/vector/frontend/src/components/MapView/MapView.css
- /root/vector/frontend/src/components/MapView/index.jsx

### Статус:
Leaflet + OpenStreetMap
Маркер ТНП с popup
Стрелка направления (8 сторон света)
Секторные полигоны (не окружности)
Цвета зон из §5 ЦОУ (#ff4d00, #ff9f1a, #ffd166)
Leaflet.heat с переключением
Градиент тепловой карты (ЦОУ палитра)
Адаптивный дизайн

Дата создания: 2026-05-05