Привет! Как сделать карту Яндекса монохромной (черно-белой), а картинки поставить свои и цветные? Небольшим кодом и следуя пункт за пунктом в описании. Поехали! НО! Сначала скажу, что сервис Яндекс.Карты не одобряет модификации своих карт (прописано в соглашении) и для UX такое решение не самое правильное. Такое решение больше для тех, кто за визуальную часть сайта (топим за дизайн).
Эта инструкция написана для работы в платформе Tilda Publishing, но код универсален для любого сайта.
Погнали.
1. Создаем в любой подходящей программе свой маркер на карту. Лично я использую Figma почти для всех задач, связанных с дизайном. Сохраняем его в SVG формате.
2. Открываем Тильду. Добавлен новый блок IM01 (изображение). Вставляем в него наш маркер. Кликаем на текст ссылки и копируем ссылку в буфер (или копипастим куда удобно). Прячем отображение блока, нажав иконку HIDE справа сверху. Она посередине.
4. Добавляем Zero Block. Задаем ему необходимую высоту в настройках. После этого слева сверху нажимаем плюс и добавляем html блок.
5. В настройках этого блока делаем отображение по window — center — center, ширину и высоту блока меняем на 100%.
6. Нажимаем кнопку EDIT CODE и добавляем туда наш код.
7. Правим код под свой маркер. Для начала пропишем путь к картинке маркеру. Если забыли ссылку, откройте скрытый блок IM01 и скопируйте путь к картинке оттуда. Если делаете так, не забудьте потом опять спрятать этот блок.
8. Теперь временно создадим любой блок с картой, чтобы найти навигационные точки. Например блок CN402. Нажимаем на кнопку «контент« этого блока, заходим ниже в меню ТОЧКА НА КАРТЕ 1 и кликаете на ссылку «Найти на карте»
9. В поле поиска на карте вводите нужный адрес и нажимаете ОК. После этого открываете еще раз настройки точки и копируете широту и долготу вашего адреса.
10. Возвращаемся к блоку с кодом и во все места с цифрами широты и долготы вставляете свои значения.
11. Для тото, чтобы всплывал нужный вам текст при наведении на иконку на карте — добавьте текст в строку с hint.
12. Поправляем иконку на карте. Внизу кода есть значения, изменив которые можно изменить размер иконки и подвинуть отображение вашего маркера на карте, если это необходимо.
Итог:
Сохраняем блок. Публикуем страницу и наслаждаемся ЧБ картой со своим цветным маркером.
И последнее. Код взят из сети и немного поправлен под свои нужды. Если вы хотите экспериментировать с цветом карты, дерзайте и выкладывайте свои результаты в комментариях к этому посту! Удачи.
Спасибо Андрею Балыбердину за помощь в правке кода.
Меня можно найти здесь: https://manon.design
Я в Телеграм: @TaoTrip
Андрей в Телеграм: @Andrey041
На кой вам этот тяжелый JS-комбайн Яндекса?
Ставьте Leaflet и подключайте tiles с любого картографического сервиса.
Да хоть кнопкой переключайтесь между слоями Google Maps, Yandex, 2GIS, OSM.
У Leaflet невероятное количество различных плагинов, документации, к тому же весь код под открытой лицензией.
Комментарий недоступен
Спасибо ) Перепишу
А потом яндекс блокирует доступ к сайту. Не учите дизайнеров как делать не надо
Спасибо за комментарий, а вы знаете лично проекты, где так случилось?
Если да - поделитесь, если нет - не пишите того, чего не знаете.
Как раз я и пишу то, что знаю. Таких проектов море.
Лучше прикрепите ссылки на рабочие проекты, которые яндекс не заблочил за изменение дизайна своей карты.
Еще раз. Если знаете, напишите проекты. Пожалуйста.
Яндекс не может НИЧЕГО заблочить, кроме доступа к своим картам через API.
Ценю ваше рвение всех спасти без запроса, но у многих своя голова на плечах. Как считаете, справятся с ответственностью? Или спасать надо?
Прошу прощения за сложившееся недопонимание. Когда написала «запретит доступ к сайту» имела ввиду «к карте»
(Но сути дела в общем не меняет)
Я не супермен, чтобы спасать))) Просто предупреждаю, что если есть продвижение у проекта через яндекс и карту они используют тоже яндекс, то быть беде 😉
А так, конечно, делайте что хотите.
Надеюсь, адекватные дизы примут правильное решение 👌🏼 Всех благ, не болейте!
p.s. Жаль, что у вас нет ссылок на рабочие проекты
Какой беде-то? Вы отлично научились пугать обтекаемыми фразами, но нет никакой конкретики.
Если нет ссылок на проекты - прикрепите ссылки на статьи хоть о таких случаях.
А вообще вы правы, дизайнеры сами примут решение. ПыСы. Жаль что и вы ссылками не поделились. И конечно же не болейте. Время такое, сложное )
А как насчёт Гугл карт?
Для модификации Гугл Карт есть сервис Snazzy Maps!
Автор, подскажите пожалуйста, все получилось с вашем скриптом, но не пойму как добавить возможность скроллинга (зумирования) карты колесиком мышки?? :(
Спасибо! Полезно! Изучу сейчас
ЯД и правда очень тяжелый. Особенно для мобильных версий.
Не работает вообще
Подскажите пожалуйста, а как добавить в этот код возможность скроллинга и стандартные элементы управления от яндекса?
myMap.controls
.add('mapTools') // стандартные кнопки
.add('typeSelector') // переключатель типа карты
.add('zoomControl'); // изменение масштаба
Добавляю их в скрипт и карта перестает открываться((
"Открываем Тильду..." фу6ля :-))))