Web компонент для добавления OpenStreetMap на сайт
Изучаем как написать веб компонент интегрирующий работу с OpenStreetMap и библиотекой OpenLayer. Как разместить маркер на карте, как добавить всплывающее информационное окно, как найти точку на карте по адресу и наоборот.
Рабочий сайт с этим примером здесь:
https://easy-linux.github.io/osm1/
Тайм коды:
00:11 Вступление
01:20 Чем будем пользоваться при работе
02:19 Инициализация проекта и установка пакетов
03:11 Создаем файл компонента и подключаем его к проекту
03:30 Импортируем необходимые модули в компоненте
05:35 Константы для атрибутов компонента
06:00 Класс компонента, конструктор
10:13 Метод жизненного цикла connectedCallback
15:05 Создаем объект карты
18:15 Обработчик для события singleclick для объекта map
18:55 Получение всех fetures на которых кликнул пользователь и отображение оверлея
19:55 Вывод широты и долготы точки клика в консоль.
20:28 Вызов функции обратного геокодирования
20:50 Добавление слоя маркеров на карту
21:10 Добавляем обработчик для запуска поиска точки по заданному адресу (прямое геокодирование)
22:12 Пишем статический геттер observedAttributes
22:37 Пишем метод жизненного цикла attributeChangedCallback
24:16 Пишем метод обновления компонента после изменения атрибутов
25:21 Регистрируем web компонент
25:39 Модифицируем файл index.html для работы с web компонентом
29:30 Добавляем файл маркера
29:59 Первый запуск и просмотр полученного результата
30:15 Поиск и устранение ошибок
33:05 Рабочая версия после исправления ошибок
33:44 Первое знакомство с движком для прямого и обратного геокодирования
34:50 Пишем метод обратного геокодирования (получение адреса по точке на карте)
35:44 Пишем метод прямого геокодирования (получение точки на карте по поисковому запросу)
36:33 Пишем обработчики на события прямого и обратного геокодирования
38:03 Исправляем отсутствие отправки событий геокодирования
38:21 Добавляем отображение адреса, полученного с помощью клика по карте
38:58 Добавляем получение точки на карте для поискового запроса прямого геокодирования
39:43 Проверяем поиск точки на карте по поисковому запросу
40:22 Преобразуем компонент в самодостаточную библиотеку, подключаемую просто по ссылке в head страницы
41:30 Запускаем сборку проекта и смотрим что получилось
41:54 Подключаем библиотеку и проверяем как это все работает
42:57 Заключение
Исходники тут:
https://github.com/easy-linux/openstr...
По стрелочным функциям:
• Стрелочные функции | Arrow functions
• Особенности стрелочных функций #easy...
Телеграм канал:
https://t.me/+RFW7SglaGM0wZjhi
Сериал "Создание простой игры на JavaScript"
• Game Martian attack
Сериал "Создание SPA приложения на чистом JS":
https://www.youtube.com/watch?list=PL...
Видео по работе с vite.js:
• Знакомимся с Vitejs. Портирование про...
Полезные видео по настройке webpack:
Минимальная конфигурация - • Настраиваем сборку проекта с помощью ...
Настройка горячей перезагрузки - • Webpack 5 Настройка горячей перезагру...
Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сборки проекта с ...
Настройка сборки мультистраничного сайта - • Пример конфигурации сборки мульти-стр...
Самый простой способ установить nodejs на Linux и Mac:
• Установка Nodejs на Linux и MacOS.
#easyit #javascript #reacthooks #reactjs #reactjsforbeginners #vitejs @EasyITChannel
Смотрите видео Web компонент для добавления OpenStreetMap на сайт онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Easy IT 21 Март 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 685 раз и оно понравилось 29 людям.