Встраивание Карты климатологии в своё приложение

Карту можно открыть внутри <iframe> в своём веб-приложении и использовать как выбор населённого пункта. Как только пользователь выбирает город, ваше окно получает его климатические параметры сообщением postMessage. Регистрация, ключи и серверная часть не нужны.

1. Встроить iframe

<iframe
  src="https://картаклиматологии.рф/?app=myapp"
  width="100%"
  height="640"
  style="border: 1px solid #ccc; border-radius: 8px"
  title="Карта климатологии">
</iframe>

Карта сама определяет, что открыта во фрейме (window.self !== window.top) — специальный параметр для этого не нужен. Необязательный параметр ?app= задаёт имя вашего приложения: оно подставляется в подсказку над панелью («Выберите город — данные передадутся в myapp»). Если параметр не передан, будет нейтральный текст «…передадутся в приложение».

Карта доступна по двум адресам — они равнозначны, отдают одно и то же приложение и одинаковые данные:

Встраивайте тот, который вам удобнее, но в allowlist добавьте оба, если адрес iframe может измениться. Обратите внимание: домен кириллический, и в event.origin браузер отдаёт его в punycode — https://xn--80aaamxcajckck1abv6ag.xn--p1ai, а не https://картаклиматологии.рф. Сравнение со строкой в кириллице не сработает.

2. Принять сообщение

// Кириллический домен в event.origin приходит в punycode — см. раздел 1
const ALLOWED_ORIGINS = [
  'https://xn--80aaamxcajckck1abv6ag.xn--p1ai', // картаклиматологии.рф
  'https://map.teploov.ru',
];

window.addEventListener('message', (event) => {
  // Обязательно проверяйте источник сообщения
  if (!ALLOWED_ORIGINS.includes(event.origin)) return;

  const msg = event.data;
  if (!msg || msg.type !== 'climamap:selection') return;
  if (msg.schemaVersion !== 1) return;

  console.log(msg.city.name);              // "Москва"
  console.log(msg.climate.temp_cold_098);  // -31
  console.log(msg.humidityZone.zoneType);  // 2
});

3. Формат сообщения

Тип climamap:selection, текущая версия схемы — 1.

{
  "type": "climamap:selection",
  "schemaVersion": 1,
  "dataset": { "id": "sp131_2025", "name": "СП 131.13330.2025 (Актуальный)" },
  "point": { "lat": 55.753215, "lon": 37.622504 },
  "city": {
    "name": "Москва",
    "region": "Московская область",
    "coordinates": [55.753215, 37.622504],
    "isNearest": false,
    "distanceKm": null
  },
  "climate": {
    "temp_cold_098": -31,
    "temp_cold_092": -28,
    "wind_cold_direction": "З"
    /* ... остальные параметры выбранного СП ... */
  },
  "humidityZone": { "zoneType": 2, "zoneName": "2 зона - Нормальная" },
  "radiation": null
}

4. Справочник ключей climate

Ключи одинаковы для обеих редакций СП — их всегда 31. Названия ключей стабильны и являются частью контракта: переименовываться они не будут. Значения передаются «как в норме», без единиц измерения в самой строке — единица берётся из таблицы ниже.

Холодный период (19 параметров)

Тёплый период (11 параметров)

Общий параметр

5. Как обрабатывать значения climate

Значения передаются ровно так, как напечатаны в таблицах СП. Обе базы приведены к единому виду, поэтому особенностей осталось всего две — но их нужно учесть обязательно.

5.1. «Нет данных» — это строка "-"

В таблицах СП отсутствующие значения помечены прочерком. В обеих базах он передаётся одинаково — строкой "-", в том числе в числовых полях. Ключи при этом всегда присутствуют: у каждого пункта передаются все 31.

Пример: у Сочи, Ялты и Феодосии нет периода со средней суточной температурой ≤ 0 °С, поэтому temp_cold_avg_0 равно "-".

5.2. Направление ветра — строка, а не румб

wind_cold_direction и wind_warm_direction содержат один или несколько равнозначных румбов, если в норме указано несколько. Разделитель — запятая, одинаково в обеих редакциях: "Ю", "СЗ, ЮВ", "С, В, СЗ".

Румбы кириллические: С, СВ, В, ЮВ, Ю, ЮЗ, З, СЗ. Не разбирайте это поле как перечисление с фиксированным набором значений — показывайте строкой; если нужен разбор, режьте по запятой и обрезайте пробелы.

5.3. Готовый нормализатор

// Число или null — годится для любого числового ключа climate
function num(climate, key) {
  const v = climate?.[key];
  if (v === undefined || v === null || v === '-') return null;
  const n = typeof v === 'number' ? v : parseFloat(String(v).replace(',', '.'));
  return Number.isFinite(n) ? n : null;
}

// Направление ветра: массив румбов
function windDirection(climate, key) {
  const v = climate?.[key];
  if (typeof v !== 'string' || v === '-') return [];
  if (v.trim() === '0,0') return ['С'];   // Элиста, СП 2020 — см. 5.2
  return v.split(',').map(s => s.trim()).filter(Boolean);
}

num(msg.climate, 'temp_cold_5day_092');            // -28
num(msg.climate, 'temp_cold_avg_0');               // null, если в норме прочерк
windDirection(msg.climate, 'wind_cold_direction'); // ["СЗ", "ЮВ"]

6. Когда приходит сообщение

• Пользователь выбрал город — на карте, в списке подсказок или через поиск.
• Пользователь искал пункт, которого нет в нормах — придёт ближайший город с isNearest: true.
• Пользователь переключил редакцию СП, когда город уже выбран — придут пересчитанные данные того же города.

Каждый выбор перезаписывает предыдущий: храните у себя последнее полученное сообщение.

7. Совместимость

Параллельно с climamap:selection отправляется устаревшее сообщение KAVRIS_CLIMATE_SELECTED — оно сохранено для ранее подключённых приложений. В новых интеграциях используйте только climamap:selection, а сообщения других типов отфильтровывайте по полю type.

8. Вопросы и подключение

Формат открытый: подключить карту может любой желающий, согласование не требуется. Если нужны дополнительные поля или у вас есть замечания к контракту — напишите через раздел «Контакты» на главной странице.