Надо же, подобные уроки в платных курсах только можно встретить, если ещё постараться, конечно) Или самому разбираться, что много времени уходит. Спасибо тебе MaxGragh что делишься такими подобными вещами, тем более на чистом JS!
Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.
Спасибо за решение! Делал карту на реакте, но с библиотеками как-то не задалось пока, а тут есть отличный вариант) Подскажите, а где можно найте полигоны или пути (polygon / path) для новых областей? И как можно реализовать масштабирование карты?
Огромное спасибо. Если вдруг у кого в svg файле нет полигонов - не проблема. Я использовал path. В JS коде закомментил строки с polygon, и скрипт заработал. Все прекрасно отображается. Желаю этому каналу 5 млн подписчиков. Вот: globalyouth.com.ua/contacts.php Хотелось бы еще, чтоб по клику на .left-menu li тоже выводилось описание в .info блок.
Спасибо за урок! Но лучше наверное один раз получить массив с сервера, сохранить его в переменную и работать с неё, чем каждый раз дергать сервер чтобы получать один и тот же массив . Но это так лирика)
Конечно очень годный контент, но мне бы было больше интересно узнать, как склепать из всех 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!
Рад помочь)) спасибо за отзыв
Спасибо! Все четко и понятно, лайк и подписка
Дождались наконец то 🔥
Привет, очень полезный контент, мы для университета делаем виар тур по лабораториям,где хотим также интегрировать карту, слушай,есть ли у тебя исходных код или гайд ,или ты снимал видео на табуляцию, чтобы была возможность кликнуть на конкретную часть карты,она увеличилась ?Буду благодарен за ответ.
Спасибо за решение! Делал карту на реакте, но с библиотеками как-то не задалось пока, а тут есть отличный вариант) Подскажите, а где можно найте полигоны или пути (polygon / path) для новых областей? И как можно реализовать масштабирование карты?
Огромное спасибо. Если вдруг у кого в svg файле нет полигонов - не проблема. Я использовал path. В JS коде закомментил строки с polygon, и скрипт заработал. Все прекрасно отображается. Желаю этому каналу 5 млн подписчиков.
Вот: globalyouth.com.ua/contacts.php
Хотелось бы еще, чтоб по клику на .left-menu li тоже выводилось описание в .info блок.
Спасибо! круто получилось, делал подобную карту самостоятельно в илюстрейте ух намучился с 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 але це факт :)