Изменение цвета Яндекс карты в zero-блоке на Tilda
С помощью данной модификации вы сможете добавить в ZeroBlock Яндекс карту, а также изменить её цвет
Примеры использования данной модификации ↓
Зелёная
Синяя
Розовая
Чёрно-белая
Затемнённая
Инверсия
Инструкция по установке модификации
1. Создаёте Zero-block с необходимой высотой, удаляете из него все элементы и помещаете в него html-блок (нажимаете на «+» в левом верхнем углу экрана в созданном вами zero-блоке и выбираете «Add HTML»);
2. Созданному HTML-блоку задаете высоту, ширину, расположение по осям X и Y (в дальнейшем, ваша карта будет располагаться внутри данного HTML-блока);
3. Вставляете в созданный HTML-блок код №1;
Код №1
<div id="map"></div>
4. В вашем Zero-блоке создаёте белый (!) shape (нажимаете на «+» в левом верхнем углу экрана в созданном вами zero-блоке и выбираете "Add Shape"), задаёте ему ширину, высоту, а также расположения по осям X и Y точно такое же (!) как у вашего html-блока;
ВАЖНО! Данный шейп должен располагаться на самом верху в слоях (нажимаете правую кнопку мыши на данном шейпе, а затем выбираете «Bring to front)»;
5. Сохраняете изменения и публикуете страницу;
6. Открываете опубликованную страницу по ссылке (как обычный пользователь), наводите курсор мыши на ваш белый shape, нажимаете правую кнопку мыши и выбираете «посмотреть код» (в браузере Google Chrom). После этого, вы попадёте в код страницы, а ваш белый shape (на который вы предварительно навели курсор) будет подсвечен в коде (!);
7. Здесь вам необходимо найти класс вашего элемента, он должен быть такого вида:
"tn-elem__8415861081734354364619" (цифры у вас будут другие);
8. Копируете класс вашего элемента (например, tn-elem__8415861081734354364619) и вставляете его в код №2;
Код №2
<style> /*Изменение цвета Яндекс карты в zero-блоке на Tilda: https://vladislav-land.ru/ymapcolor*/ #map .ymaps-2-1-79-ground-pane { filter: hue-rotate(90deg); -ms-filter: hue-rotate(90deg); -webkit-filter: hue-rotate(90deg); -moz-filter: hue-rotate(90deg); -o-filter: hue-rotate(90deg); } .tn-elem__4346096441649723484272 { mix-blend-mode: multiply; background: rgba(255, 0, 0, 0.5); display: flex !important; pointer-events: none; } </style> 9. Вставляете скопированный css-код (код №2) на вашу страницу в блок T123 (библиотека блоков, вкладка «другое»);
10. Загружаете ваш логотип, который хотите разместить на карте (можно загрузить как на тильду, так и на любой сайт в интернете) — в дальнейшем мы будем использовать ссылку на этот логотип в коде №3;
11. Узнаёте координаты необходимой точки на Яндекс карте (место, где будет располагаться ваш логотип);
Чтобы узнать координаты точки на Яндекс карте, нажмите правой кнопкой мыши на эту точку, затем выберите пункт «Что здесь?». В левом верхнем углу появятся координаты, скопируйте их.
Нажмите сюда, чтобы увидеть пример
12. Подставляете свои значения в код №3;
ВАЖНО!
При подставлении значений в код №3, обратите внимание в каком формате эти значения указаны в моём примере (подсказка внутри поля для ввода). Вы должны вставлять всё точно также, чтобы код сработал.
- Ширина задаётся в пикселях, но аббревиатура «px» не указывается, просто цифра;
- Координаты нужно указывать через запятую, а после запятой обязательно должен быть пробел;
- В поле «приближение карты при запуске» задаётся просто число.
Код №3
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <style> /*Изменение цвета Яндекс карты в zero-блоке на Tilda: https://vladislav-land.ru/ymapcolor*/ #map { width: 100%; height:800px; padding: 0; margin: 0; } </style> <script> ymaps.ready(function () { var myMap = new ymaps.Map('map', { center: [53.902284, 27.561831], zoom: 11 }, { searchControlProvider: 'yandex#search' }), MyIconContentLayout = ymaps.templateLayoutFactory.createClass( '<div style="color: #FFFFFF; font-weight: medium;">$[properties.iconContent]</div>' ), myPlacemarkWithContent = new ymaps.Placemark([53.902284, 27.561831], { hintContent: 'город Минск' }, { iconLayout: 'default#imageWithContent', iconImageHref: 'https://static.tildacdn.com/tild3066-3565-4363-b939-313335623561/photo.png', iconImageSize: [55, 55], iconImageOffset: [0, 0], iconContentOffset: [15, 15], iconContentLayout: MyIconContentLayout }); myMap.geoObjects .add(myPlacemarkWithContent); }); </script> Видеоинструкция:
YouTube
RuTube
Помогла модификация?
Нужна уникальная модификация?
Просто заполните форму и я свяжусь с вами
Там я делюсь полезной информацией и бесплатно учу дизайнеров продавать на высокие чеки
Подпишитесь на telegram-канал Vladislav Land, чтобы всегда быть в курсе всех обновлений
