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

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

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

Для начала понадобится 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.

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

.ymaps-2-1-74-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 , обновлено 17.03.2020

Комментарии

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

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

Верстка блока контактов с картой
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
12.01.2019
3384
0
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
26.01.2019
8937
+2
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
17.09.2019
1723
+1
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
07.02.2018
6617
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
4816
+7
Список Mime
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019
1351
+1