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

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

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

Для начала понадобится 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.07.2019, обновлено 16.09.2019 188

Поделится

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

Если требуется сделать импорт или обновление товаров по XML файлу Яндекс Маркета, можно применить расширении PHP...
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю...
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4,...
Ниже представлен пример кода PHP для генерации YML файла по упрошенной схеме для выгрузки на Яндекс.Маркет.
HTML ссылки для открытия чата и других функций популярных мессенджеров.
В последнее время письма отправляемые с хостингов через функции mail() и mb_send_mail() часто попадают в спам или...