Тёмная Яндекс-карта для вашего сайта на Tilda

Со своей меткой / иконкой

Доброго времени суток! Сегодня хочу поделиться с вами бесплатной модификацией для ваших сайтов на Tilda.

Передо мной неоднократно стоял вопрос — как сделать тёмную Яндекс-карту на Tilda. В поисках ответа была найдена видео-инструкция на просторах интернета. Но, к сожалению, на момент написания данной статьи, метод, описанный в видео, уже не работает. Пришлось переписать код. Но помимо тёмной Яндекс-карты, хотелось также установить на неё свою иконку (и эта возможность также была добавлена в код).

По ссылке вы можете найти генератор кода:

Также я продублирую инструкцию здесь.

1. Создаёте Zero-block с необходимой высотой, удаляете из него все элементы и помещаете в него html-блок (нажимаете на "+" в левом верхнем углу экрана в созданном вами zero-блоке и выбираете "Add HTML");

2. Созданному HTML-блоку задаете высоту, ширину, расположение по осям X и Y (в дальнейшем, ваша карта будет располагаться внутри данного HTML-блока);

3. Вставляете в созданный HTML-блок код №1;

4. В вашем Zero-блоке создаёте белый(!) shape (нажимаете на "+" в левом верхнем углу экрана в созданном вами zero-блоке и выбираете "Add Shape"), задаёте ему ширину, высоту, а также расположения по осям X и Y точно такое же(!) как у вашего html-блока;

ВАЖНО! Данный шейп должен располагаться на самом верху в слоях (нажимаете правую кнопку мыши на данном шейпе, а затем выбираете "Bring to front)";

5. Сохраняете изменения и публикуете страницу;

6. Открываете опубликованную страницу по ссылке (как обычный пользователь), наводите курсор мыши на ваш белый shape, нажимаете правую кнопку мыши и выбираете «посмотреть код» (в браузере Google Chrom). После этого, вы попадёте в код страницы, а ваш белый shape (на который вы предварительно навели курсор) будет подсвечен в коде(!);

7. Здесь вам необходимо найти класс вашего элемента, он должен быть вида "tn-elem__4346096441649723484272"(цифры у вас будут другие);

8. Копируете класс вашего элемента (например, tn-elem__4346096441649723484272) и вставляете его в код №2;

9. Вставляете полученный HTML-код (код №2) на вашу страницу в блок T123 (библиотека блоков, вкладка «другое»);

10. Загружаете ваш логотип, который хотите разместить на карте (можно загрузить как на тильду, так и на любой сайт в интернете) — в дальнейшем мы будем использовать ссылку на этот логотип в коде №3;

11. Узнаёте координаты необходимой точки на Яндекс карте (место, где будет располагаться ваш логотип);

Чтобы узнать координаты точки на Яндекс карте, нажмите правой кнопкой мыши на эту точку, затем выберите пункт «Что здесь?». В левом верхнем углу появятся координаты, скопируйте их.

12. Подставляете свои значения в код №3;

ВАЖНО! При подставлении значений в код №3, обратите внимание в каком формате эти значения указаны в моём примере (подсказка внутри поля для ввода). Вы должны вставлять всё точно также, чтобы код сработал.

Перед использованием кода №3, настоятельно рекомендую ознакомиться с дополнением к инструкции!!!

В данной модификации мы использовали режим наложения "difference" на наш белый шейп. Но этот эффект будет также накладываться на ваш логотип (поскольку логотип находится над картой, но под шейпом). Чтобы это исправить, нужно пойти от обратного. Ниже прилагаю краткую инструкцию, как это сделать:

Заходим в "Figma", создаём новый проект или используем существующий;

Загружаем в проект ваш логотип;

Создаём белый прямоугольник с заливкой 100%, помещаем его поверх вашего логотипа;

Выбираем созданный прямоугольник и справа, во вкладке "Layer", меняем значение "Pass through" на "Difference";

Вы получите ваш логотип с наложением "Difference". Теперь вам необходимо пересоздать свой логотип, но в тех цветах, которые вы получили при наложении "Difference". Например, на моём логотипе буквы жёлтые, но при наложении они становятся синими. Я пересоздаю свой логотип, но вместо жёлтого цвета букв, я использую синий цвет. И логотип такого вида я загружаю на сервер, копирую ссылку, и использую эту ссылку в коде №3. В результате, при наложении эффекта "difference" (уже на самой карте), буквы логотипа будут менять свой цвет с синего на жёлтый.

Благодарю за внимание и буду рад, если модификация окажется для вас полезной!

Больше моих модификаций вы можете найти по ссылке:

А если вам необходима разработка уникальной модификации или создание сайта для вашего бизнеса, свяжитесь со мной