Web компонент для добавления OpenStreetMap на сайт #easyit
Изучаем как написать веб компонент интегрирующий работу с 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 • Особенности стрелочных функций #easyit #n... Телеграм канал: https://t.me/+RFW7SglaGM0wZjhi
Сериал "Создание простой игры на JavaScript" • Game Martian attack Сериал "Создание SPA приложения на чистом JS": https://www.youtube.com/watch?list=PL...
Видео по работе с vite.js: • Знакомимся с Vitejs. Портирование проекта,... Полезные видео по настройке webpack: Минимальная конфигурация - • Настраиваем сборку проекта с помощью webpack Настройка горячей перезагрузки - • Webpack 5 Настройка горячей перезагрузки |... Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сборки проекта с подгр... Настройка сборки мультистраничного сайта - • Пример конфигурации сборки мульти-страничн... Самый простой способ установить nodejs на Linux и Mac: • Установка Nodejs на Linux и MacOS. #easyit #javascript #reacthooks #reactjs #reactjsforbeginners #vitejs @EasyITChannel
