Верстка интерактивной карты с помощью leafletjs.com или аналога.
3500 UAHТребуется сверстать интерактивную карту на js. Как вариант можно использовать leafletjs.com или на ваш выбор.
Карта состоит из 2 уровней:
1) Страны
2) Города
Общая задумка карты:
Основной блок - используется карта Европы (1 изображение). Слева от карты список активных стран. При клике на какую-то страну из этого списка происходит переход на 2 уровень карты (карта страны с городами, 2 изображение). Меняется также и список - появляются города и ссылка назад.
Также при клике на активную страну из 1 уровня (карта Европы) на самой карте происходит увеличение карты и переход на 2 уровень.
При клике на ссылку "назад" происходит переход на 1 уровень.
При клике на значок города на карте 2 уровня - происходит редирект на выбранную страницу. При клике на конкретный город в списке - также происходит редирект на выбранную страницу.
По стилям при наведении происходит подсвечивание контуров страны. Что-то наподобие реализовано тут:
https://codepen.io/andrewarchi/pen/jPEXyL
Сами контуры стран можно взять отсюда. Если этот источник не подходит - можно взять ваш на усмотрение, но важно, что п-ов Крым был в составе Украины.
Увеличение реализовано в этом примере этой же библиотеки:
https://leafletjs.com/examples/choropleth/example.html
Но интересует можно ли сделать только для 2-х уровней. Также в задании остальные страны должны быть не активными. Только те, что есть в списке.
В дальнейшем планируется ставить карту на wp - было бы неплохо обдумать как можно это сделать. Но это будет отдельным заданием.
Макет фигмы прикрепил
Верстка без блока с картой для общего понимания:
http://church.maxkoitsan.online
_________________________________________________
Если есть похожие примеры с работой - приоритет будет фрилансерам с ними
Приложения 3
Отзыв заказчика о сотрудничестве с Петро Свистуном
Верстка интерактивной карты с помощью leafletjs.com или аналога.Хорошая работа, даже не думал, что так можно сделать. Преодолел все ожидания.
Отзыв фрилансера о сотрудничестве с Maxim Koitsan
Верстка интерактивной карты с помощью leafletjs.com или аналога.Хорошо составленное задание, быстрые ответы и своевременная оплата. Рекомендую к сотрудничеству.
-
289 9 1 1 Здравствуйте, прикрепляю ссылку на мою работу с подобной картой https://rosagrotrade.ru/filialy/
Можем обсудить разработку вашей карты, карту разрабатывается без как либо дополнительных скриптов.
Если есть вопросы напишите мне в личные сообщения. Спасибо, ожидаю вашего решения.
-
746 15 0 Доброго времени суток!
Сделаю на Leaflet. Можно карты стран и городов сделать Geojson файлом для добавления новых локаций без изменений в коде.
Буду рад сотрудничеству.
-
826 10 1 1 Разрешите засвидетельствовать Вам моё почтение!
Я прочитал ваши требования к работе и могу отметить, что у меня есть опыт реализации крупных проектов, так и боле средних разработок. Я готов комплексно и качественно подойти к Вашему проекту. После просмотра макетов и ТЗ предлагаю сроки и цену. Всегда иду навстречу. Делаю свою работу качественно и в срок – это непоколебимый принцип, важнее которого не могут быть даже деньги. В моём багаже работ сотрудничество с многими крупными компаниями, обладание более чем 7-летним опытом разработки: веб программирование, сайты под ключ, интернет магазины, и разработка разных проектов!
Я работаю с широким спектром технологий, таких как: Бэк-енд: PHP, MySQL, React.js, Node.js, Java, Codeigniter(v2-4), Net, Vue.js, HTML, XML, CSS, JavaScript, jQuery, Ajax, RESTful_API, MVC, Laravel(5.6-8) Symfony, Yii2, Agile, SCRUM, Git, Angular(V8-11), BitBucket, VCS, Xdebug, PHPUnit.
Базы данных: MySQL(5-8), PostgreSQL, MongoDB,
Фронт-енд: CSS, HTML, JavaScript React, Angular, Vuе .
С наилучшими пожеланиями!
-
697 21 2 1 Приветствую! Могу сделать на основе svg карты. но города надо будет вручную расставлять. Сделаю без всяких дополнительных библиотек и фреймвёрков, разве что если это для WordPress можно jquery для уменьшения кода так сказать..
-
175 9 3 1 Добрый день.
Готов реализовать вашу задумку в течении 2-3х дней. Интеграция - просто как страницы, т.к. фактически все данные статичны, динамика только на js. Если нужно будет в дальнейшем для WP можно сделать плагином и редактировать данные из админки, страны, города, места и ссылки на другие страницы.
Подобный проект в реализации на гугл-картах
-
1144 39 3 4 Здравствуйте! заинтересовал ваш проект, хотелось бы обсудить детали.
Некоторые мои роботы:
https://shevron23.ru/
profsolution.org
https://lifemd.com/
https://www.vierblatt.ch/
https://nannasshopofhugs.com/
…
больше робот можете посмотреть в портфолио
Freelancehunt
-
1860 123 5 2 Доброго, готов к сотрудничеству.
Я бы сделал бы подгрузку второго уровня, через AJAX, так же можно сразу прицепить её в админку WP для удобства.
-------
С wp работаю более пяти лет.
Создание шаблонов, плагинов с нуля.
Работа с такими плагинами, а так же их кастомизация под определенные нужды:
Visual composer, Elementor, wpml (есть в наличии), acf pro (есть в наличии), cf7, wp all import\export(есть в наличии) и другие.
Актуальные фриланс-проекты в категории Javascript и Typescript
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 1 день 9 часов назад ∙ 28 ставок |
Разработка платформы AM Mobility (автосервис, парковка, страхование, аренда автомобилей)
260 189 UAH
Ищем команду или опытного Full Stack разработчика для создания MVP платформы AM Mobility. AM Mobility — это единая цифровая экосистема для автомобилистов, объединяющая в одном приложении и веб-платформе: парковку; автосервис; шиномонтаж; автомойку; аренду автомобилей;… Javascript и Typescript, Веб-программирование ∙ 6 дней 15 часов назад ∙ 116 ставок |
Gsap анимации
1000 UAH
Добрый день. Нужно внести правки в текущем проекте. Нужен специалист, который хорошо работает на gsap/lenis Нужно сделать анимацию карточек. Подробное ТЗ здесь: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Нужно… Javascript и Typescript, Веб-программирование ∙ 6 дней 21 час назад ∙ 21 ставка |
Ищу наставника по Claude Code для запуска веб-проекта с нуля**Кратко о задаче:** Я новичок без опыта в программировании. Есть готовое ТЗ на разработку сайта (42 страницы, Next.js, PostgreSQL). Хочу реализовать его самостоятельно с помощью Claude Code - нужен специалист, который настроит среду и научит меня работать с инструментом. ---… Javascript и Typescript, Обучение ∙ 8 дней 20 часов назад ∙ 23 ставки |
Обновление дизайна на сайтеНужно обновить дизайн существующего сайта используя HTML, CSS, JS: освежить внешний вид, сделать его современным и адаптивным под мобильные устройства. Требуется добавить плавные анимации и интерактивные элементы . HTML и CSS верстка, Javascript и Typescript ∙ 9 дней 14 часов назад ∙ 97 ставок |