JS-решения №10. Интерактивная svg карта на чистом JS

Подписаться 30 тыс.

Просмотров 18 тыс.

50% 1

Привет! В новой, уже десятой части js-решений я расскажу, как сделать интерактивную (с возможностью наведения и клика) карту на чистом js! Также немного коснемся получения данных из json-файла. Поехали)
github.com/maxdenaro/maxgraph... - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #svg #svgкарта

Опубликовано:

11 окт 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

@nikitaspasatelev7049 3 года назад

Надо же, подобные уроки в платных курсах только можно встретить, если ещё постараться, конечно) Или самому разбираться, что много времени уходит. Спасибо тебе MaxGragh что делишься такими подобными вещами, тем более на чистом JS!

@maxgraph 3 года назад

Рад помочь)) спасибо за отзыв

@muborizDev 3 года назад

Дождались наконец то 🔥

@RustamBEKO 3 года назад

Спасибо! Все четко и понятно, лайк и подписка

@AlexYablochkinWebDesign Год назад

Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.

@grigoriyrodionov9525 2 месяца назад

Спасибо за решение! Делал карту на реакте, но с библиотеками как-то не задалось пока, а тут есть отличный вариант) Подскажите, а где можно найте полигоны или пути (polygon / path) для новых областей? И как можно реализовать масштабирование карты?

@sws12 3 года назад

Полезное видео! Спасибо!

@user-xs5cb1dc6s 2 года назад

Очень доходчиво и интересно, спасибо!

@maxgraph 2 года назад

Пожалуйста =

@mariamartseniuk8862 3 года назад

Спасибо огромное за видео. Очень полезное! Хотела спросить: как вы делали адаптив для мобильных, делали ли возможность увеличения/уменьшения карты? Буду благодарена за ссылку на адаптивную версию карты (если есть, конечно). И, конкретно в моей текущей задаче, когда карта увеличена и ты выбираешь округ по клику на списке округов - на карте эта область должна центрироваться. Единственное, что придумала: задать через data-атрибуты каждому элементу карты параметры где он находится на карте и относительно их показывать нужную область карты при клике. Если есть какие-то идеи - буду рада)

@maxgraph 3 года назад

Здравствуйте, адекватного адаптива тут не сделать, карта не поместится все равно. Конкретно данный сайт мне заказали без адаптива вовсе

@mariamartseniuk8862 3 года назад

@@maxgraph спасибо)

@VA94-54r 2 года назад

Спасибо! круто получилось, делал подобную карту самостоятельно в илюстрейте ух намучился с path ! спасибо за такой контент! лайк подписка

@maxgraph 2 года назад

Пожалуйста)

@truedivan 2 года назад

Спасибо за урок! Но лучше наверное один раз получить массив с сервера, сохранить его в переменную и работать с неё, чем каждый раз дергать сервер чтобы получать один и тот же массив . Но это так лирика)

@evgeny421 3 года назад

Однозначно годный контент!

@maxgraph 3 года назад

спасибо )

@BMikel 3 года назад

Огромное спасибо. Если вдруг у кого в svg файле нет полигонов - не проблема. Я использовал path. В JS коде закомментил строки с polygon, и скрипт заработал. Все прекрасно отображается. Желаю этому каналу 5 млн подписчиков. Вот: globalyouth.com.ua/contacts.php Хотелось бы еще, чтоб по клику на .left-menu li тоже выводилось описание в .info блок.

@miraclearb 3 года назад

Привет Макс, где ты учил JS? И как лучше сейчас стоит его изучать, спасибо!

@maxgraph 3 года назад

Много где учил, на разных курсах :) На самом деле можно просто идти по learn.javascript.ru и изучать все. Но там задачек мало, нужна практика. В идеале конечно на какой-то курс пойти, где и наставник будет.

@marishakarpova8278 3 года назад

Круто! Спасибо огромное! 🙏🏻Однозначно пригодится 👍🏻 Процветания каналу 😉

@maxgraph 3 года назад

Спасибо)

@user-bl9lm4xh3g 5 месяцев назад

Конечно очень годный контент, но мне бы было больше интересно узнать, как склепать из всех 85 SVG файлов единую карту России в том виде (виде, а не цвете) как сделали это вы

@bersagiev8233 Год назад

Добрый вечер, очень классные видосы, не подскажешь как ты сделал полигоны для округов?

@maxgraph Год назад

Нашёл готовую карту в свг

@alexandy1344 3 года назад

Упс... Новый видосик. Что я пропустил?

@alexvimpel9015 Месяц назад

Спасибо! Где вы взяли данные для полигонов ?

@maxgraph Месяц назад

Дизайнер дал)

@lessons3141 2 года назад

круто , спасибо

@maxgraph 2 года назад

Пожалуйста)

@user-kg6fz5tz2b 3 года назад

Спасибо!

@maxgraph 3 года назад

пожалуйста :)

@user-fs3yr9yk6n 2 года назад

Очччччччччччччччч круто!!

@maxgraph 2 года назад

Спасибо)

@maksymbelogonov5326 3 года назад

Привет, а где вообще берутся такие карты в формате свг, есть какие-то генераторы или ты сам рисовал?

@maxgraph 3 года назад

Это дал дизайнер)

@katerinak5387 3 года назад

@@maxgraph спасибо, а можно ли сделать всплывающие подсказки на самих областях при наведении?

@maxgraph 3 года назад

@@katerinak5387да, там же ссылки. ссылкам позишн релатив, внутрь подсказку пишете и абсолютом как надо располагаете

@katerinak5387 3 года назад

@@maxgraph еще бы поподробнее, для ламера)) подскажите, текст подсказки в html расположить в виде дива?

@maxgraph 3 года назад

@@katerinak5387 да, можно так)

@venom2200 Год назад

Как эту карту добавить на готовый сайт вордпресс

@BMikel 3 года назад

Очень актуальный контент. Попробовал добавить js код в js-файл общих скриптов (common.js), сразу кучу ошибок в консоли, не работает. Сайт на jQuery, как быть?

@maxgraph 3 года назад

Тут надо понимать, какие там ошибки вообще

@BMikel 3 года назад

@@maxgraph Uncaught TypeError: Cannot read property 'classList' of null at SVGAElement. Uncaught TypeError: Cannot read property 'querySelectorAll' of null at HTMLAnchorElement. Uncaught TypeError: Cannot read property 'querySelectorAll' of null at HTMLAnchorElement. Uncaught TypeError: Cannot read property 'dataset' of null at SVGAElement. это основные 4 типа, и таких много я подключил отдельным js файлом, в коммон.джс нет уже кстати через сборщик галп

@maxgraph 3 года назад

ну а саму свгшку (точно такую же, со всеми классами) сделали? здесь js пишет что не может найти элементы, потому что их в html не существует.

@BMikel 3 года назад

@@maxgraph проблема в том что в моем svg нет полигонов, структура вобще другая (только path).

@maxgraph 3 года назад

Ну js должен ссылаться на существующие элементы. иначе ошибки будут, это не Jquery)

@user-tw5nh3xb6k 3 года назад

Хорошее видео. Как сделать так- выводится слово, если нажать на согласные буквы они отлетают влево,если гласные буквы,то вправо. Если все правильно,то включается какая-то анимированная картинка,например собака прыгает.

@maxgraph 3 года назад

ну нужно каждую букву делать отдельным блоком с классами. если кликнули по классу согласной - улетает. чт-то такое

@tovjukov 2 года назад

А, сделайте урок про создание карты офиса. Чтобы там можно было расставлять столы и указывать какие сотрудники за каким сидят. И какая оргтехника.

@truedivan 2 года назад

Это всё ТЗ? Или ещё чего на халяву накинуть?

@tovjukov 2 года назад

@@truedivan Я ничего не навязывал, просто предложил идею, кончено из той области что мне интересна, конечно не факт что оно вам тоже по душе. И за этот урок спасибо, очень полезно было для образования новых извилин в наших головах.

@burabaxtv3426 2 года назад

мне такой же но как вы говорили в конце и еще городы тоже нужны. Смог и город выбрать и регион там как вы сделали. Не могули бы помогать

@burabaxtv3426 2 года назад

Сможете коды скинут на это видео ???

@dmitryponyatov2158 3 года назад

Вся портянка кода будет полностью отрабатывать на каждое событие мыши? Почему нельзя один раз по document.onload структуру страницы отработать?

@maxgraph 3 года назад

есть разница?

@dmitryponyatov2158 3 года назад

@@maxgraph на мобильнике?

@maxgraph 3 года назад

Я показывал что-то на мобильнике?

@dmitryponyatov2158 3 года назад

@@maxgraph вот поэтому вас на собеседованиях и заставляют деревья вертеть. Взять и чисто по привычке зарезать на 1-2 порядка выч.ресурсы, и даже не понимать где и в чём проблема 8)

@maxgraph 3 года назад

@@dmitryponyatov2158 кого нас?) Вы кажется совсем не понимаете, о чем и куда пишете.