HTML/CSS

Яндекс карты не прямоугольной формы

Пример, как сделать Яндекс карту не прямоугольной формы т.е. наложить изображение (маску) по верх карты со сохранением ее работоспособности.

Важно! По условиям использования Яндекс.Карт нельзя закрывать логотип и копирайт.

Для начала понадобится png картинка-маска с прозрачностью:

Картинка-маска с прозрачностью

Далее выводим карту на странице:

<div id="map" style="width: 728px; height: 579px;"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
ymaps.ready(init);        
function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

    ymaps.geocode("г. Истра").then(function(res) {
        var coord = res.geoObjects.get(0).geometry.getCoordinates();
        var myPlacemark = new ymaps.Placemark(coord);
        myMap.geoObjects.add(myPlacemark);
        myMap.setCenter(coord, 13);
    });
}
</script>
HTML

В кодиспекторе, в HTML разметке карты нужно найти элемент с классом ymaps-inner-panes или подобным (от версии к версии API он меняется). Например в 2.1 он называется ymaps-2-1-74-inner-panes.

ymaps-inner-panes

К этому элементу нужно добавить CSS псевдо-элемент :after с изображением маски.

.ymaps-2-1-74-inner-panes:after { 
     content: '';
    position: absolute;
    top: 0;
    left: 0; 
    width: 728px;
    height: 579px;
    background: url(https://snipp.ru/img/map-mask.png) 0 0 no-repeat;
    z-index: 1000;
}
CSS

Результат:

09 июля 2019

Темы

CSS HTML JS Яндекс

Другие публикации

Ниже представлен пример кода PHP для генерации YML файла по упрошенной схеме для выгрузки на Яндекс.Маркет.
HTML ссылки для открытия чата и других функций популярных мессенджеров.
В последнее время письма отправляемые с хостингов через функции mail() и mb_send_mail() часто попадают в спам или...
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
Сборник горизонтальных линий с тегом hr разных видов и стилей.