Затемнить яндекс карту не затемняя iconImage

Question

Знатоки, нужен хелп. Стилизую яндекс карту, на карте есть метки iconImage. Подскажите, как можно задать фильтр для карты, при этом чтобы метка оставалась в своём цвете? Вот структура карты: https://codepen.io/tintursoft/pen/MWQORMN

<div class="yandexMapa" id="yandexMapa_86">

Answer 1

Вариант 1: наложить фильтр на слой, содержащий собственно фрагменты карты:

.ymaps-2-1-79-ground-pane {filter:brightness(0.5);}

Вариант 2: создать псевдоэлемент для слоя с картами (возня с вычислением истинных габаритов, не стал делать) или для фрагментов карты. Ему можно задать фоновый цвет, рисунок или содержимое:

.ymaps-2-1-79-ground-pane ymaps[class]:before /* только у тайлов карты в этом слое есть класс */ {
  display:block;
  content:'';
  background-color:rgba(255,0,0,0.25);
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

Не забудьте, что элементы с классами типа .ymaps-2-1-79-ground-pane могут иметь другие цифры - либо надо знать их, либо усложнить селектор. А так все несложно.

Answer 2

Простейший вариант - добавить огромный полупрозрачный прямоугольник большего чем вам требуется зона карты размера. Полигоны в API имеют ZIndex равный 200 - расположены между подложкой и метками. А значит такой полигон накроет карту нужным вам вариантом затенения, оставив метки нетронутыми.

myRectangle = new ymaps.Rectangle([[0, 0],[70, 179]], {}, {
    fillColor: '#808080',
    fillOpacity: 0.5
});
myMap.geoObjects.add(myRectangle)

БЛОГ НА HUSL

Затемнить яндекс карту не затемняя iconImage

Ответы (2 шт):