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
Watch video Web компонент для добавления OpenStreetMap на сайт online without registration, duration hours minute second in high quality. This video was added by user Easy IT 21 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 685 once and liked it 29 people.