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

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

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

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

Комментарии

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

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

Верстка блока контактов с картой
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
4204
0
Ускорение загрузки Яндекс Карт
Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.
10304
+2
Как вывести метки на Яндекс.Картах из MySQL+PHP
В статье рассмотрены примеры как вывести метку на карту из БД и вывод других объектов, которые находятся рядом.
7654
+5
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
2329
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
6948
+10
Список Mime
Ниже приведён список MIME-заголовков и расширений файлов.
1759
+1