---
type: trz
work_item_id: ET-002
title: "ТЗ: Чекбокс показа/скрытия POI в попапе рельефа"
version: 1
status: approved
created_at: 2026-05-20
authors:
  - "agent:analyst"
---

# ТЗ — ET-002: Чекбокс показа/скрытия POI в попапе рельефа

## 1. Функциональные требования

### REQ-F-01: Чекбокс POI в попапе рельефа

Система должна отображать чекбокс «POI» в попапе кнопки «Рельеф» (`terrain-popup`), расположенный после чекбокса «Тропы» (`trails-path-cb`), отделённый горизонтальной линией (`<hr>`).

### REQ-F-02: Состояние по умолчанию

При первом посещении (отсутствие ключа в localStorage) чекбокс POI должен быть включён (checked), маркеры POI видимы.

### REQ-F-03: Скрытие POI

При снятии чекбокса система должна установить `visibility: 'none'` для слоёв `poi-circles` и `poi-labels` через `map.setLayoutProperty()`.

### REQ-F-04: Показ POI

При установке чекбокса система должна установить `visibility: 'visible'` для слоёв `poi-circles` и `poi-labels`.

### REQ-F-05: Сохранение состояния

Система должна сохранять состояние чекбокса в `localStorage` под ключом `poi-visible` (значения: `'1'` — показывать, `'0'` — скрывать).

### REQ-F-06: Восстановление состояния при загрузке

При загрузке страницы система должна:
1. Прочитать значение `localStorage.getItem('poi-visible')`
2. Если значение `'0'` — снять чекбокс и скрыть слои POI
3. Если значение `'1'` или отсутствует (null) — установить чекбокс и показать слои POI

### REQ-F-07: Синхронизация с layerState

Изменение чекбокса должно обновлять `layerState.poi` (true/false), чтобы состояние было консистентно с внутренней моделью приложения.

## 2. Нефункциональные требования

### REQ-NF-01: Производительность

Переключение видимости POI должно происходить мгновенно (< 50 мс), без перезагрузки тайлов.

### REQ-NF-02: Совместимость

Решение должно работать во всех браузерах, поддерживающих MapLibre GL JS (Chrome 80+, Firefox 78+, Safari 14+, Edge 80+).

### REQ-NF-03: Мобильная адаптация

Чекбокс должен быть доступен и нажимаем на мобильных устройствах (touch target ≥ 44px).

### REQ-NF-04: Отсутствие регрессий

Существующие чекбоксы (Тени рельефа, Перепады, Грунтовки, Тропы) должны продолжать работать без изменений.

## 3. UI-спецификация

### Расположение в HTML

```html
<!-- Внутри #terrain-popup, после trails-path-cb -->
<hr style="margin:6px 0;border-color:rgba(128,128,128,0.3)">
<label class="terrain-checkbox">
  <input type="checkbox" id="poi-visible-cb" onchange="onPoiCheckbox()" checked>
  <span>POI</span>
</label>
```

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

Использовать существующий класс `terrain-checkbox` — единообразие с остальными чекбоксами в попапе.

## 4. Данные

- localStorage ключ: `poi-visible`
- Значения: `'1'` (показывать) | `'0'` (скрывать)
- MapLibre слои: `poi-circles`, `poi-labels`
- Состояние в JS: `layerState.poi`

## 5. API

Нет изменений в backend API. Вся логика — клиентская.

## 6. Затрагиваемые файлы

| Файл | Изменение |
|------|-----------|
| `src/web/index.html` | Добавить чекбокс в `terrain-popup` |
| `src/web/app.js` | Добавить функцию `onPoiCheckbox()`, логику восстановления состояния при загрузке |