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

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

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

Для начала понадобится 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,
		controls: []
	}, {
		searchControlProvider: 'yandex#search'
	});

	var coord = [55.76, 37.64];
	var myPlacemark = new ymaps.Placemark(coord);
	myMap.geoObjects.add(myPlacemark);
}
</script>
HTML

Изображение нужно задать элементу с классом ymaps-2-1-xx-inner-panes через :after.

Т.к. класс меняется в зависимости от версии, то нужно использовать селектор атрибутов с поиском по окончанию.

ymaps[class$="-inner-panes"]:after{ 
 	content: '';
	position: absolute;
	top: 0;
	left: 0; 
	width: 728px;
	height: 579px;
	background: url(/img/map-mask.png) 0 0 no-repeat;
	z-index: 1000;
}
CSS

Результат:

09.07.2019, обновлено 09.11.2021
4356

Комментарии

, чтобы добавить комментарий.

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

Верстка блока контактов с картой
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
10528
-2
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
18237
+9
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
13855
+7
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
5827
+1
Использование API Геокодера в PHP для получения координат
Сервис Яндекс.Карты предоставляет доступ к API Геокодера, который позволяет по адресу получить координаты объекта на...
1485
0
Яндекс.Доставка работа с API в PHP
Примеры работы с API Яндекс.Доставки (для заказа перевозки грузов корпоративным клиентам).
616
+1