Как применить свою цветовую палитру для Яндекс.Карт?

Question

[unclechu]

Подключаю карты через Яндекс.Карты API 2.1, но в документации не могу найти как изменить цвета палитры карты. Это вообще возможно? У гуглокарт на сколько мне известно это делается без проблем.

Answer 1

[Иван Гончаренко]

[class*="ymaps-2"][class*="-ground-pane"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
}

Comments

[Aiode]

Спасибо тебе огромное!!!!

[h8nor]

Aiode, можно было отметить как решение.

Answer 2

[Роман Франк]

Привет! В свое время была задача сделать карту яндекс в ЧБ, нашел вот такое решение jsfiddle.net/9aj8j
Попробуй покапать в ту сторону, может что получится.

upd

Стало интересно, немного погуглил на эту тему и вот что нашел legal.yandex.ru/maps_api
Это нарушение условий пользования API

2.3.7.5. Сохранять, обрабатывать и видоизменять полученные через Сервис Данные (включая результаты геокодирования), за исключением случаев временного хранения (кэширования) результатов геокодирования исключительно для целей улучшения функциональности и работоспособности Сервиса и только для использования в рамках возможностей, предоставляемых Сервисом.

Средствами API Yandex, как я понимаю ничего не получится сделать.

upd 2
Для Google Maps, советую gmaps-samples-v3.googlecode.com/svn/trunk/styledma...

Answer 3

[Полина]

Для цветной карты можно использовать матрицу в свг. Правда, это по-прежнему не работает в ИЕ, в последнем проекте клиент забил на ИЕ и согласился на такой вариант:

CSS:

[class*="ymaps-2"][class*="-ground-pane"] {
  -webkit-filter: grayscale(100%) url(/path-to-svg/yellowfilter.svg#yellowfilter);
          filter: grayscale(100%) url(/path-to-svg/yellowfilter.svg#yellowfilter);
}

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="yellowfilter">
		<feColorMatrix
		type="matrix"
		values="0.95 0 0 0 0
				0 0.77 0 0 0
				0 0 0.07 0 0
				0 0 0 1 0" />
	</filter>
</svg>

Чтобы получить матрицу для нужного вам цвета, используйте сервис andresgalante.com/RGBAtoFeColorMatrix

Результат:

Comments

[Вадим]

Данное решение у меня прекрасно работает в Google Chrome, но не хочет работать в Firefox и Ms Edge. Там изображение только преобразуется в серое, а цветовая матрица не накладывается.
Не знаете, в чем может быть проблема?

Answer 4

[Alexodiy]

.ymaps-glass-pane,
 .ymaps-layers-pane {
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
     -webkit-filter: grayscale(100%) !important;
 }