Вот макет
То есть карта под полупрозрачной синей подложкой. А балун над подложкой. Как такое сделать на сайте используя яндекс карту?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуРазработчики API Яндекс.Карт разрешают кастомизировать элементы карты через CSS-фильтры. В вашем случае нужно что-то вроде комбинации фильтров invert и grayscale, которые применяются к классу подложки (точное название селектора различно в зависимости от версии, но всегда заканчивается на *-ground-pane)
Ниже кликабельный пример:
var myMap;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [55.76, 37.64], // Москва
zoom: 10
}, {
searchControlProvider: 'yandex#search'
});
myMap.geoObjects
.add(new ymaps.Placemark(myMap.getCenter(), {}, {
preset: 'islands#dotIcon',
iconColor: '#fdce69'
}))
}
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
[class*="ymaps-2"][class*="-ground-pane"]{
filter:invert(100%) grayscale(100%) sepia(0.2) brightness(130%) contrast(90%);
}
<div id="map"></div>
<script type="text/javascript"
src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&
apikey=f2686a80-efc2-4301-8053-e537610e13a3">
</script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>