Как переключить Яндекс Карты в ночной режим?

Рейтинг: 0Ответов: 2Опубликовано: 17.03.2023

В текущей версии JavaScript API Яндекс.Карт нет возможности переключения карты на ночной режим. Есть ли какие-либо примеры нестандартных способов реализации подобного функционала?

UPD Благодаря помощи участников форума получилось реализовать переключение ночного / дневного режимов:

ymaps.ready(function(){

    var myMap = new ymaps.Map('map', {
        center: [37.61691485505143, 55.7517318022522],
        zoom: 10
    });

    var button = new ymaps.control.Button({
        data: {
            content: 'Ночной режим'
        },
        options: {
            selectOnClick: true,
            maxWidth: [90, 120, 200]
        }
    });

    button.events.add('select', function(){
        setMapLayer(myMap, 'dark');
    }).add('deselect', function(){
        setMapLayer(myMap, 'light');
    });
    
    myMap.controls.add(button, {
        float: 'left'
    });
});


function setMapLayer(map, map_type){
    const MAP = 'custom#' + map_type;
    ymaps.layer.storage.add(MAP, function mapLayer() {
        return new ymaps.Layer('https://core-renderer-tiles.maps.yandex.net/tiles?l=map' + ((map_type == 'dark') ? ('&theme=dark') : ('')) + '&%c&%l');
    });
    ymaps.mapType.storage.add(MAP, new ymaps.MapType(map_type, [MAP]));
    map.setType(MAP);
}
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>

javascript yandex-maps-api yandex-maps-jsapi
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Есть способ использовать полноценную темную тему.

Нужно добавить новый слой и тип карты, основанные на стандартном слое, но с добавление параметра указывающего на темную тему

// Передавать это значение в параметр type у карты
const DARK_MAP = 'custom#dark';
ymaps.layer.storage.add(DARK_MAP, function DarkLayer() {
    // Ссылка на темные тайлы Яндекс.Карт
    // От стандартной отличается наличием &theme=dark
    return new ymaps.Layer(
      'https://core-renderer-tiles.maps.yandex.net/tiles?l=map&theme=dark&%c&%l&scale={{ scale }}',
    );
  });

/* Связываем слой с типом карты */
ymaps.mapType.storage.add(DARK_MAP, new ymaps.MapType('Dark Map', [DARK_MAP]));
▲ 1

Можно попробовать инвертировать с помощью CSS фильтров:

Черно-белая карта:

.ymaps-layers-pane {
    filter: grayscale(1);
    -ms-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
}

Затемненная карта:

.ymaps-layers-pane {
    filter: brightness(50%);
    -ms-filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);   
    -o-filter: brightness(50%);  
}

Инверсия цвета:

.ymaps-layers-pane {
    filter: invert(100%);
    -ms-filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
}

Держи пример внедрения:

<div id="map" style="width: 100%; height:400px"></div>
<style type="text/css">
.ymaps-layers-pane {
    -ms-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
}
</style>

<script src="https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<script>
ymaps.ready(init); 
function init(){
    var myMap = new ymaps.Map("map",{center: [55.75985606898725,37.61054750000002],zoom: 12});
    myMap.controls.add("zoomControl").add("typeSelector").add("mapTools");
    var myPlacemark = new ymaps.Placemark([55.75985606898725,37.61054750000002]);
    myMap.geoObjects.add(myPlacemark);  
}
</script>