Как я сделал интерактивную карту, где каждый может оставить свою точку. Рассказываю про техническую сторону
Всем привет! Хочу поделиться опытом создания одного пет-проекта, над которым я провёл последний месяц. Возможно, кому-то будет полезно, а кому-то просто интересно, как такое вообще делается.
Откуда взялась идея
Я часто смотрю на карту России и думаю: за каждым названием города или деревни стоят люди, истории, судьбы. Но на обычной карте это просто географические объекты. Мне захотелось сделать что-то, что добавило бы туда человеческого измерения.
Так родилась идея - "Огни России": сделать карту, где каждый человек может поставить метку в любой точке — как символ того, что он здесь есть. Технически это выглядит как огонёк, который загорается в выбранном месте.
Сначала хотел сделать всё бесплатно, но быстро понял, что без минимальной платы проект завалит спам и боты. Поэтому добавил символическую сумму в 10 рублей. Это не бизнес, скорее — фильтр.
Сразу отвечу на вопрос, который наверняка возникнет. Да, можно было сделать всё бесплатно. Но у платы есть несколько причин:
Защита от ботов и спама. Бесплатный проект с публичной картой мгновенно засрут автоматическими точками. 10 рублей — минимальный порог, который отсекает 99% спама.
Расходы на инфраструктуру. Сервер, база данных, домен — всё это стоит денег. При большой нагрузке (а я надеюсь, она будет) нужны более мощные мощности. Символическая плата покрывает эти расходы, а не уходит в чей-то карман.
Честность. Я самозанятый, все реквизиты открыты, никаких офшоров и скрытых схем. Проект — не бизнес, скорее социальный эксперимент, который я веду на свои и собранные средства.
Техническая архитектура
Расскажу про стек, потому что это самое интересное.
Фронтенд:
Обычный HTML/CSS/JS, без фреймворков (хотелось минимизировать зависимость от сторонних библиотек)
Карта — на Яндекс.Картах. API удобный, документация понятная, есть всё необходимое
Данные подгружаются через fetch, карта обновляется без перезагрузки страницы
Бэкенд:
PHP, никаких фреймворков;
Три основных эндпоинта:
получение всех точек с карты (с пагинацией)
создание платежа через ЮKassa
вебхук для подтверждения оплаты
База данных:
MySQL, самые обычные таблицы
Хранит координаты, имена, ссылки на соцсети, ID платежа
Отдельное поле для региона — определяется автоматически по координатам через OpenStreetMap Nominatim
Самые сложные моменты
1. Вебхуки ЮKassa
Это была боль. Нужно было сделать так, чтобы после успешной оплаты точка появлялась на карте автоматически, без задержек. ЮKassa присылает уведомление на указанный URL, его нужно правильно принять, обработать и записать в базу.
Главная проблема была в отладке — локально вебхук не протестировать, только на боевом сервере. Пришлось писать подробное логирование всего, что приходит, и разбираться по логам.
2. Оптимизация загрузки точек
При добавлении тысячи тестовых огней карта начала заметно тормозить. Пришлось реализовать кластеризацию — объединение близких точек в группы. Яндекс.Карты поддерживают это из коробки, но нужно правильно настроить, чтобы кластеры выглядели адекватно и не мешали взаимодействию.
Ещё добавил кэширование на клиенте — точки подгружаются раз в 30 секунд, а не при каждом движении карты.
3. Определение страны по координатам
Нужно было запретить ставить точки за пределами России. Сначала использовал только Яндекс.геокодер, но он иногда выдавал неверные результаты на границах. Добавил fallback на OpenStreetMap — теперь проверка двойная, и точность почти 100%.
4. Домен на кириллице
Выглядит красиво, но возникла проблема: некоторые мессенджеры и соцсети некорректно обрабатывали кириллические ссылки. Пришлось добавить автоматическое сокращение ссылок через клик ру чтобы при шеринге всё открывалось как надо.
Что я вынес из этого проекта
Простые идеи часто работают лучше сложных. Минималистичная механика (выбрать место — зажечь огонь) оказалась более понятна.
Символическая плата — отличный фильтр. Без неё проект быстро заспамили бы. А так — люди осознанно участвуют.
Логирование — это святое. Без подробных логов я бы никогда не отладил вебхуки и не поймал бы баги с геокодированием.
Готовые API экономят тонну времени. Яндекс.Карты, ЮKassa, OpenStreetMap — всё это работает из коробки, не нужно изобретать велосипед.
Что в планах
Сейчас в процессе добавление нескольких новых типов точек:
Огни в честь 9 Мая — бесплатные, чтобы любой мог почтить память (акция со 2 по 31 мая)
Огни в поддержку профсоюзного движения — временная акция с 1 апреля по 1 мая (по просьбе людей из профсоюзов).
Технически это просто разные иконки на карте, но смысловая нагрузка разная.
Заключение
Этот проект я сделал на свои деньги, как самозанятый, и — что самое интересное — полностью с помощью нейросети DeepSeek. Мне было интересно проверить, смогу ли я довести до ума полноценный веб-сервис с платежами, картами и базой данных.
Если есть вопросы по технической реализации — спрашивайте, с удовольствием отвечу. Всем удачи в ваших проектах!
























