544 слова | 2 минуты

Интерактивная Карта

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

Демо версия

Обзор

Это интерактивная карта на базе Яндекс.Карт с удобным интерфейсом для просмотра и управления точками на карте. Приложение предоставляет функционал поиска адресов, быстрой навигации по городам и динамического отображения видимых точек.

Ключевые возможности

• Интерактивная карта на базе Яндекс.Карт API
• Отображение множественных точек с метками
• Поиск по адресу с геокодированием
• Быстрая навигация по городам (Москва, Санкт-Петербург, Новосибирск)
• Динамический список видимых точек на карте
• Skeleton loader для плавной загрузки
• Консоль логирования всех событий
• Адаптивный дизайн на Bootstrap 5

Функционал

1. Навигация по городам

Три предустановленных кнопки для быстрого перехода:

• Москва - центр карты: 55.7558, 37.6173
• Санкт-Петербург - центр карты: 59.9343, 30.3351
• Новосибирск - центр карты: 55.0084, 82.9357

При клике на кнопку карта анимированно перемещается к выбранному городу с увеличением (zoom: 12).

2. Поиск по адресу

Поле поиска использует геокодирование Яндекс.Карт:

1. Введите адрес в поле поиска
2. Нажмите Enter или потеряйте фокус
3. Карта переместится к найденному адресу
4. На карте появится синяя метка с названием адреса

Примеры запросов:

• "Красная площадь, Москва"
• "Невский проспект, 1"
• "Новосибирск, площадь Ленина"

3. Точки на карте

На карте отображается 10 предустановленных точек, распределенных по трем городам:

Взаимодействие с точками:

• Клик на метку - открывает балун с названием
• Клик на карточку внизу - центрирует карту на точке
• При движении карты список карточек обновляется автоматически

4. Динамический список точек

Под картой отображаются карточки только тех точек, которые видны в текущих границах карты:

Точка 5
Координаты: 55.01, 82.93

Особенности:

• Автоматическое обновление при перемещении/масштабировании карты
• Hover-эффекты для лучшей визуализации
• Клик по карточке перемещает карту к точке

5. Система логирования

Консоль внизу страницы отображает все события в реальном времени:

[14:23:45]: Инициализация карты...
[14:23:46]: API Яндекс.Карт загружен
[14:23:46]: Карта создана с центром в Москве
[14:23:46]: Добавлено 10 точек на карту
[14:23:47]: Карта полностью загружена и готова к работе
[14:24:15]: Переход к городу: Санкт-Петербург
[14:24:20]: Видимых точек: 2
[14:25:03]: Поиск адреса: "Красная площадь"
[14:25:04]: Найдено: Красная площадь (55.7539, 37.6208)

Технические детали

Используемые технологии

• Яндекс.Карты API 2.1 - основа карты и геокодирование
• Bootstrap 5.3.2 - UI фреймворк
• Vanilla JavaScript - логика приложения
• CSS3 Animations - skeleton loader и эффекты

Skeleton Loader

Плавная загрузка с анимированным скелетоном:

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

Отображается для:

• Карты (500px высота)
• Списка карточек (3 заглушки)

Структура данных точек

const points = [
  { 
    id: 1, 
    name: "Точка 1", 
    coords: [55.75, 37.57] 
  },
  // ... остальные точки
];

Поля:

• id - уникальный идентификатор
• name - название точки
• coords - координаты [широта, долгота]

Визуальные элементы

Метки на карте:

• Красные метки (islands#redIcon) - предустановленные точки
• Синяя метка (islands#blueIcon) - результат поиска

Стили карточек:

• Белый фон с тенью
• Hover-эффект: поднятие и увеличение тени
• Синяя рамка при наведении
• Плавные переходы (transition: 0.3s)

Консоль:

• Темная тема (#1e1e1e фон)
• Зеленый текст (#00ff00) в стиле терминала
• Автоматическая прокрутка к последнему сообщению
• Временные метки для каждого события

Примеры использования

Сценарий 1: Просмотр точек в Москве

1. Откройте страницу (по умолчанию центр - Москва)
2. Увидите 2 красные метки
3. Внизу отобразятся 2 карточки с точками
4. Кликните на любую карточку для навигации

Сценарий 2: Поиск адреса и добавление метки

1. Введите в поиск "Эрмитаж, Санкт-Петербург"
2. Нажмите Enter
3. Карта переместится к Эрмитажу
4. Появится синяя метка с названием
5. В консоли отобразится лог поиска

Сценарий 3: Исследование Новосибирска

1. Нажмите кнопку "Новосибирск"
2. Карта переместится с анимацией
3. Отобразятся 6 точек в области
4. Масштабируйте карту для изменения видимых точек
5. Список карточек обновится автоматически

Сценарий 4: Отслеживание событий

1. Откройте консоль внизу страницы
2. Выполняйте различные действия:
   • Переключение городов
   • Поиск адресов
   • Клики на точки
3. Наблюдайте логи в реальном времени с временными метками

Настройка и расширение

Добавление новых точек

Отредактируйте массив points в JavaScript:

const points = [
  { id: 11, name: "Новая точка", coords: [55.77, 37.58] },
  // добавьте свои точки...
];

Добавление новых городов

Добавьте кнопку в HTML:

<button class="city-btn" data-coords="56.8389,60.6057">Екатеринбург</button>

Изменение стиля меток

Замените preset в коде создания Placemark:

preset: 'islands#greenIcon'  // зеленая метка
preset: 'islands#yellowIcon' // желтая метка
preset: 'islands#nightIcon'  // ночной стиль

Настройка начального положения

Измените параметры создания карты:

map = new ymaps.Map("map", {
  center: [59.93, 30.34],  // Санкт-Петербург
  zoom: 12,                 // больше увеличение
  controls: ['zoomControl', 'fullscreenControl'] // добавить контролы
});