Интерактивная карта из любого изображения на чистом JavaScript!

Показать описание

Приветствую, друзья, сегодня покажу как сделать интерактивную карту для сайта на чистом JS, на основе любой картинки. Работать наша карта на сайте будет с помощью JS и SVG. В видео я наглядно показываю, как происходит взаимодействие с интерактивной картой, поэтому вам не составит труда реализовать ваш собственный вариант. По примеру из видео вы сможете создать сколько угодно интерактивных элементов на карте и добавить к ним любой функционал, который вам нужен.

Таймкоды:
00:00 Вступление
1:00 Разбор проекта
2:18 Базовая настройка карты
3:12 Установка Inkscape
4:05 Инструкция для Inkscape
4:58 Разметка интерактивных элементов
8:17 Добавление интерактивных элементов на карту
13:22 Подсвечивание интерактивных элементов
15:30 Показ названия при наведении
23:18 Пока информации при клике по интерактивному элементу
31:28 Завершение

Рекомендации по теме

Комментарии

Бро, огромное спасибо, ты буквально сделал 80% моей дипломной работы)

exoticdrgsstash

Огромное спасибо за урок, очень нужна была такая карта для личного проекта)

knefmix

Воспользовался твоим примером. Очень помогла твоя информация!

ebzgqpl

Очень хорошо подносишь материал, приятно тебя слушать, чем большинство недопрогеров.
С удовольствием посмотрел бы целый курс по JS от тебя.
Желаю кучи подписчиков и просмотров.

Akream

Спасибо тебе дружище! Долго искал хороший материал по этой теме. Очень полезное видео)

ncxpkli

Редко ставлю лайки, но ты их точно заслужил

ChellyMonkust

Красава! Очень полезное видео, спасибо))

genamorozov

Если у кого-то tooltip появляется далеко, при этом вы увеличивали фото через width и height. Попробуйте использовать вместо e.x и e.y использовать e.pageX и y.pageY. Также это может быть решит какую-то другую проблему ведь в этом случае мы получаем координаты относительно страницы, а не экрана пользователя.

Zaryad-odqm

Видео топ, только жаль что подпишиков мало

vtchjqs

SVG при масштабировании карты тоже масштабируется?

CrazyTVnet

Спасибо за видео! До написания настоящего кода в Js все шло хорошо, но почему то тултип не отображается, может ли быть от подключенной Bootstrap?

lalaaskarova

Привет помогу мне сделать так что по клику что бы вышла не фотка а инфо о нем. или с свяска с базы данных

burabaxtv

Спасибо за видео! А можно ли выводить вместо data-title ссылку? Хочу сделать так, чтобы в всплывающей подсказке была ссылка на другую страницу сайта.

gribovamag

Доброго времени суток! Что то вместо обводки, в Inkscape сразу вся картинка по границе заливается, и не получается их на карту посадить. Иду пошагово по видео.

alexmir