Карты для веба: каталог мест на Leaflet

Создадим «Рядом» — учебный каталог вымышленных мастерских и библиотек. Двенадцать уроков проходят от контейнера карты до импорта данных и подготовки выпуска. Каждый шаг продолжает тот же набор мест, а архив содержит полное состояние каждого урока.

Что нужно до начала

Нужны основы HTML, CSS, браузерного JavaScript и ES modules. При необходимости начните с JavaScript и HTML/CSS. Установка серверного фреймворка не требуется. Выбран профиль Leaflet 1.9.4, подтверждённый его тегом; это не утверждение о latest. Текущие примеры 2.0 alpha требуют другого API.

Для самостоятельного исполнения используйте локальный HTTP-сервер и браузер. CDN библиотеки и подложка потребуют сети; публичная геолокация — безопасного контекста и разрешения. Приложение не запрашивает положение автоматически.

Уроки

1. Карта на веб-странице: координаты, контейнер и Leaflet — Страница с контейнером карты и выбранной камерой без тайлов.
2. Подложка карты: тайлы, поставщик и атрибуция — Подложка подключается явно, её источник и атрибуция вынесены в конфигурацию.
3. GeoJSON: модель мест и порядок координат — Четыре вымышленных места представлены и проверены как Point FeatureCollection.
4. Маркеры и безопасные всплывающие карточки — Маркеры содержат карточки с текстом, который не интерпретируется как HTML.
5. Карта и список: общий выбор и клавиатура — Список и карта выбирают один объект по устойчивому идентификатору.
6. Фильтры мест: категории, поиск и слои — Один набор предикатов определяет результаты списка и карты.
7. Камера карты: границы, масштаб и адрес страницы — Публичное состояние камеры и фильтров читается из фрагмента URL.
8. Геолокация по запросу: разрешения и точность — Положение запрашивается кнопкой и не сохраняется в URL или хранилище.
9. Места рядом: расстояние и фильтр по радиусу — Результаты ограничиваются расстоянием по поверхности Земли до выбранной точки.
10. Много точек: область просмотра и ограничение отрисовки — Маркеры обновляются по идентификаторам и ограничиваются видимой областью.
11. Импорт и экспорт GeoJSON без повреждения каталога — Новый набор принимается целиком после проверки; текущие результаты экспортируются.
12. Подготовка карты к выпуску: отказы, приватность и договоры — Текстовый каталог остаётся доступным при отказе карты; выпуск описан без исполнения.

Исходники и пределы примера

Скачать двенадцать состояний проекта. Папки lesson-01…lesson-12 самостоятельны. README описывает зависимости, договор данных и ограничения. Все места синтетические: это не справочник организаций и не реальные адреса.

Примеры не запускались, тесты не выполнялись, публикация учебных приложений не производилась. Результаты в уроках описаны как ожидаемые по коду. CDN, карта, геолокация и импорт требуют отдельной проверки при будущем самостоятельном запуске. Последний шаг сохраняет клиентский список при отказе Leaflet; полная текстовая версия без JavaScript не реализована.

Нет geocoding autocomplete, массовой загрузки тайлов, маршрутизации, хранения личной позиции или постоянного серверного сохранения импортированного набора. Для настоящего выпуска нужно выбрать поставщика подложки, проверить права данных и измерить поведение устройств.

Другие практические серии этой партии находятся в общем оглавлении.