Делаем черно-белую карту Яндекс для сайта и маркер любой картинкой

В закладки

Привет! Как сделать карту Яндекса монохромной (черно-белой), а картинки поставить свои и цветные? Небольшим кодом и следуя пункт за пунктом в описании. Поехали! НО! Сначала скажу, что сервис Яндекс.Карты не одобряет модификации своих карт (прописано в соглашении) и для UX такое решение не самое правильное. Такое решение больше для тех, кто за визуальную часть сайта (топим за дизайн).

Эта инструкция написана для работы в платформе Tilda Publishing, но код универсален для любого сайта.

Погнали.

1. Создаем в любой подходящей программе свой маркер на карту. Лично я использую Figma почти для всех задач, связанных с дизайном. Сохраняем его в SVG формате.

2. Открываем Тильду. Добавлен новый блок IM01 (изображение). Вставляем в него наш маркер. Кликаем на текст ссылки и копируем ссылку в буфер (или копипастим куда удобно). Прячем отображение блока, нажав иконку HIDE справа сверху. Она посередине.

4. Добавляем Zero Block. Задаем ему необходимую высоту в настройках. После этого слева сверху нажимаем плюс и добавляем html блок.

5. В настройках этого блока делаем отображение по window — center — center, ширину и высоту блока меняем на 100%.
6. Нажимаем кнопку EDIT CODE и добавляем туда наш код.

<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script> <div id="map" style="width:100%; height:100%;"></div> <script>ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [55.751979, 37.617499], zoom: 15 }), // Создаем метку с помощью вспомогательного класса. myPlacemark1 = new ymaps.Placemark([55.751979, 37.617499], { // Свойства. // Содержимое хинта. hintContent: 'Надпись, которая всплаывет при наведении на метку' }, { // Опции // Своё изображение иконки метки. iconImageHref: 'https://static.tildacdn.com/tild3061-3235-4537-b066-616662373363/Group_783.svg', // Размеры метки. iconImageSize: [130, 130], // Смещение левого верхнего угла иконки относительно // её "ножки" (точки привязки). iconImageOffset: [-65, -110] }) // Добавляем все метки на карту. myMap.geoObjects .add(myPlacemark1) } </script> <style>.ymaps-layers-pane { -webkit-filter: grayscale(100%); }</style>

7. Правим код под свой маркер. Для начала пропишем путь к картинке маркеру. Если забыли ссылку, откройте скрытый блок IM01 и скопируйте путь к картинке оттуда. Если делаете так, не забудьте потом опять спрятать этот блок.

8. Теперь временно создадим любой блок с картой, чтобы найти навигационные точки. Например блок CN402. Нажимаем на кнопку «контент« этого блока, заходим ниже в меню ТОЧКА НА КАРТЕ 1 и кликаете на ссылку «Найти на карте»

9. В поле поиска на карте вводите нужный адрес и нажимаете ОК. После этого открываете еще раз настройки точки и копируете широту и долготу вашего адреса.

10. Возвращаемся к блоку с кодом и во все места с цифрами широты и долготы вставляете свои значения.

11. Для тото, чтобы всплывал нужный вам текст при наведении на иконку на карте — добавьте текст в строку с hint.

12. Поправляем иконку на карте. Внизу кода есть значения, изменив которые можно изменить размер иконки и подвинуть отображение вашего маркера на карте, если это необходимо.

Итог:

Сохраняем блок. Публикуем страницу и наслаждаемся ЧБ картой со своим цветным маркером.

И последнее. Код взят из сети и немного поправлен под свои нужды. Если вы хотите экспериментировать с цветом карты, дерзайте и выкладывайте свои результаты в комментариях к этому посту! Удачи.

Спасибо Андрею Балыбердину за помощь в правке кода.

Меня можно найти здесь: https://manon.design

Я в Телеграм: @TaoTrip
Андрей в Телеграм: @Andrey041

{ "author_name": "Александр Киршин", "author_type": "self", "tags": [], "comments": 13, "likes": 6, "favorites": 92, "is_advertisement": false, "subsite_label": "design", "id": 117708, "is_wide": false, "is_ugc": true, "date": "Sat, 04 Apr 2020 15:36:13 +0300", "is_special": false }
Сервисы
Разбираем мобильные приложения аптек: «Максавит», «Горздрав», «еАптека», «Планета Здоровья», АСНА и «36,6»
Surf проверили готовность аптечного ритейла к наплыву онлайн-покупок через приложения.
Объявление на vc.ru
0
13 комментариев
Популярные
По порядку
Написать комментарий...
1

На кой вам этот тяжелый JS-комбайн Яндекса?
Ставьте Leaflet и подключайте tiles с любого картографического сервиса.
Да хоть кнопкой переключайтесь между слоями Google Maps, Yandex, 2GIS, OSM.
У Leaflet невероятное количество различных плагинов, документации, к тому же весь код под открытой лицензией.

Ответить
1

Комментарий удален по просьбе пользователя

Ответить
0

Спасибо ) Перепишу

Ответить
–1

А потом яндекс блокирует доступ к сайту. Не учите дизайнеров как делать не надо

Ответить
0

Спасибо за комментарий, а вы знаете лично проекты, где так случилось?
Если да - поделитесь, если нет - не пишите того, чего не знаете.

Ответить
0

Как раз я и пишу то, что знаю. Таких проектов море.
Лучше прикрепите ссылки на рабочие проекты, которые яндекс не заблочил за изменение дизайна своей карты.

Ответить
0

Еще раз. Если знаете, напишите проекты. Пожалуйста.
Яндекс не может НИЧЕГО заблочить, кроме доступа к своим картам через API.
Ценю ваше рвение всех спасти без запроса, но у многих своя голова на плечах. Как считаете, справятся с ответственностью? Или спасать надо?

Ответить
1

Прошу прощения за сложившееся недопонимание. Когда написала «запретит доступ к сайту» имела ввиду «к карте»
(Но сути дела в общем не меняет)

Ответить
0

Я не супермен, чтобы спасать))) Просто предупреждаю, что если есть продвижение у проекта через яндекс и карту они используют тоже яндекс, то быть беде 😉
А так, конечно, делайте что хотите.
Надеюсь, адекватные дизы примут правильное решение 👌🏼 Всех благ, не болейте!

p.s. Жаль, что у вас нет ссылок на рабочие проекты

Ответить
2

Какой беде-то? Вы отлично научились пугать обтекаемыми фразами, но нет никакой конкретики.
Если нет ссылок на проекты - прикрепите ссылки на статьи хоть о таких случаях.
А вообще вы правы, дизайнеры сами примут решение. ПыСы. Жаль что и вы ссылками не поделились. И конечно же не болейте. Время такое, сложное )

Ответить
0

А как насчёт Гугл карт?

Ответить
0

Для модификации Гугл Карт есть сервис Snazzy Maps!

Ответить
0

Спасибо! Полезно! Изучу сейчас
ЯД и правда очень тяжелый. Особенно для мобильных версий.

Ответить

Прямой эфир