Надо же, подобные уроки в платных курсах только можно встретить, если ещё постараться, конечно) Или самому разбираться, что много времени уходит. Спасибо тебе MaxGragh что делишься такими подобными вещами, тем более на чистом JS!
Огромное спасибо. Если вдруг у кого в svg файле нет полигонов - не проблема. Я использовал path. В JS коде закомментил строки с polygon, и скрипт заработал. Все прекрасно отображается. Желаю этому каналу 5 млн подписчиков. Вот: globalyouth.com.ua/contacts.php Хотелось бы еще, чтоб по клику на .left-menu li тоже выводилось описание в .info блок.
Спасибо за решение! Делал карту на реакте, но с библиотеками как-то не задалось пока, а тут есть отличный вариант) Подскажите, а где можно найте полигоны или пути (polygon / path) для новых областей? И как можно реализовать масштабирование карты?
Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.
Конечно очень годный контент, но мне бы было больше интересно узнать, как склепать из всех 85 SVG файлов единую карту России в том виде (виде, а не цвете) как сделали это вы
Спасибо за урок! Но лучше наверное один раз получить массив с сервера, сохранить его в переменную и работать с неё, чем каждый раз дергать сервер чтобы получать один и тот же массив . Но это так лирика)
Много где учил, на разных курсах :) На самом деле можно просто идти по learn.javascript.ru и изучать все. Но там задачек мало, нужна практика. В идеале конечно на какой-то курс пойти, где и наставник будет.
Спасибо огромное за видео. Очень полезное! Хотела спросить: как вы делали адаптив для мобильных, делали ли возможность увеличения/уменьшения карты? Буду благодарена за ссылку на адаптивную версию карты (если есть, конечно). И, конкретно в моей текущей задаче, когда карта увеличена и ты выбираешь округ по клику на списке округов - на карте эта область должна центрироваться. Единственное, что придумала: задать через data-атрибуты каждому элементу карты параметры где он находится на карте и относительно их показывать нужную область карты при клике. Если есть какие-то идеи - буду рада)
@@truedivan Я ничего не навязывал, просто предложил идею, кончено из той области что мне интересна, конечно не факт что оно вам тоже по душе. И за этот урок спасибо, очень полезно было для образования новых извилин в наших головах.
Хорошее видео. Как сделать так- выводится слово, если нажать на согласные буквы они отлетают влево,если гласные буквы,то вправо. Если все правильно,то включается какая-то анимированная картинка,например собака прыгает.
Очень актуальный контент. Попробовал добавить js код в js-файл общих скриптов (common.js), сразу кучу ошибок в консоли, не работает. Сайт на jQuery, как быть?
@@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 вот поэтому вас на собеседованиях и заставляют деревья вертеть. Взять и чисто по привычке зарезать на 1-2 порядка выч.ресурсы, и даже не понимать где и в чём проблема 8)
Надо же, подобные уроки в платных курсах только можно встретить, если ещё постараться, конечно) Или самому разбираться, что много времени уходит. Спасибо тебе MaxGragh что делишься такими подобными вещами, тем более на чистом JS!
Рад помочь)) спасибо за отзыв
Огромное спасибо. Если вдруг у кого в svg файле нет полигонов - не проблема. Я использовал path. В JS коде закомментил строки с polygon, и скрипт заработал. Все прекрасно отображается. Желаю этому каналу 5 млн подписчиков.
Вот: globalyouth.com.ua/contacts.php
Хотелось бы еще, чтоб по клику на .left-menu li тоже выводилось описание в .info блок.
Спасибо! круто получилось, делал подобную карту самостоятельно в илюстрейте ух намучился с path ! спасибо за такой контент! лайк подписка
Пожалуйста)
Спасибо! Все четко и понятно, лайк и подписка
Дождались наконец то 🔥
Благодарю вас
Спасибо за решение! Делал карту на реакте, но с библиотеками как-то не задалось пока, а тут есть отличный вариант) Подскажите, а где можно найте полигоны или пути (polygon / path) для новых областей? И как можно реализовать масштабирование карты?
Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.
Полезное видео! Спасибо!
Конечно очень годный контент, но мне бы было больше интересно узнать, как склепать из всех 85 SVG файлов единую карту России в том виде (виде, а не цвете) как сделали это вы
Спасибо за урок!
Но лучше наверное один раз получить массив с сервера, сохранить его в переменную и работать с неё, чем каждый раз дергать сервер чтобы получать один и тот же массив .
Но это так лирика)
Очень доходчиво и интересно, спасибо!
Пожалуйста =
Однозначно годный контент!
спасибо )
Добрый вечер, очень классные видосы, не подскажешь как ты сделал полигоны для округов?
Нашёл готовую карту в свг
Очччччччччччччччч круто!!
Спасибо)
круто , спасибо
Пожалуйста)
Спасибо! Где вы взяли данные для полигонов ?
Дизайнер дал)
Привет Макс, где ты учил JS? И как лучше сейчас стоит его изучать, спасибо!
Много где учил, на разных курсах :)
На самом деле можно просто идти по learn.javascript.ru и изучать все. Но там задачек мало, нужна практика. В идеале конечно на какой-то курс пойти, где и наставник будет.
Упс... Новый видосик. Что я пропустил?
Спасибо!
пожалуйста :)
Это карта бесплатная? В свободном доступе? Я могу использовать ее для сайта компании?
Да
Спасибо огромное за видео. Очень полезное! Хотела спросить: как вы делали адаптив для мобильных, делали ли возможность увеличения/уменьшения карты? Буду благодарена за ссылку на адаптивную версию карты (если есть, конечно). И, конкретно в моей текущей задаче, когда карта увеличена и ты выбираешь округ по клику на списке округов - на карте эта область должна центрироваться. Единственное, что придумала: задать через data-атрибуты каждому элементу карты параметры где он находится на карте и относительно их показывать нужную область карты при клике. Если есть какие-то идеи - буду рада)
Здравствуйте, адекватного адаптива тут не сделать, карта не поместится все равно.
Конкретно данный сайт мне заказали без адаптива вовсе
@@maxgraph спасибо)
Привет!Спасибо за видео) У меня при клике на регионы не переключается выводящая инфа:(((
Привет) сверься с кодом в гите, где-то ошибка
Круто! Спасибо огромное! 🙏🏻Однозначно пригодится 👍🏻 Процветания каналу 😉
Спасибо)
Привет, а где вообще берутся такие карты в формате свг, есть какие-то генераторы или ты сам рисовал?
Это дал дизайнер)
@@maxgraph спасибо, а можно ли сделать всплывающие подсказки на самих областях при наведении?
@@katerinak5387да, там же ссылки. ссылкам позишн релатив, внутрь подсказку пишете и абсолютом как надо располагаете
@@maxgraph еще бы поподробнее, для ламера)) подскажите, текст подсказки в html расположить в виде дива?
@@katerinak5387 да, можно так)
мне такой же но как вы говорили в конце и еще городы тоже нужны. Смог и город выбрать и регион там как вы сделали. Не могули бы помогать
Сможете коды скинут на это видео ???
А, сделайте урок про создание карты офиса. Чтобы там можно было расставлять столы и указывать какие сотрудники за каким сидят. И какая оргтехника.
Это всё ТЗ? Или ещё чего на халяву накинуть?
@@truedivan Я ничего не навязывал, просто предложил идею, кончено из той области что мне интересна, конечно не факт что оно вам тоже по душе. И за этот урок спасибо, очень полезно было для образования новых извилин в наших головах.
Как эту карту добавить на готовый сайт вордпресс
Хорошее видео. Как сделать так- выводится слово, если нажать на согласные буквы они отлетают влево,если гласные буквы,то вправо. Если все правильно,то включается какая-то анимированная картинка,например собака прыгает.
ну нужно каждую букву делать отдельным блоком с классами. если кликнули по классу согласной - улетает. чт-то такое
Очень актуальный контент.
Попробовал добавить js код в js-файл общих скриптов (common.js), сразу кучу ошибок в консоли, не работает.
Сайт на jQuery, как быть?
Тут надо понимать, какие там ошибки вообще
@@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 файлом,
в коммон.джс нет уже
кстати через сборщик галп
ну а саму свгшку (точно такую же, со всеми классами) сделали? здесь js пишет что не может найти элементы, потому что их в html не существует.
@@maxgraph проблема в том что в моем svg нет полигонов, структура вобще другая (только path).
Ну js должен ссылаться на существующие элементы. иначе ошибки будут, это не Jquery)
Вся портянка кода будет полностью отрабатывать на каждое событие мыши? Почему нельзя один раз по document.onload структуру страницы отработать?
есть разница?
@@maxgraph на мобильнике?
Я показывал что-то на мобильнике?
@@maxgraph вот поэтому вас на собеседованиях и заставляют деревья вертеть.
Взять и чисто по привычке зарезать на 1-2 порядка выч.ресурсы, и даже не понимать где и в чём проблема 8)
@@dmitryponyatov2158 кого нас?)
Вы кажется совсем не понимаете, о чем и куда пишете.
Нужен видос по правильности написания и оптимизации кода)
Оптимизация сайта уже есть на канале
слишком много копипасты, а так для новичков пойдёт
Копипасты из своего же кода) так что не считается 😀
Крым это Украина!
Мой канал не про это :)
@@maxgraph але це факт :)
У тебя карта неправильная. Крим -Украина!