JSFiddle - React, Tailwind, and code Playground
by svuks
HTML
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=60445215-6d3a-4f88-87fe-8d52b72e5bc9"></script>
<div id="map">
</div>
CSS
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
JavaScript
ymaps.ready(init);
function init() {
var map = new ymaps.Map('map', {
center: [65, 100],
zoom: 2,
type: 'yandex#hybrid',
controls: ['zoomControl']
}, {
// Ограничим область карты.
restrictMapArea: [[10, 10], [80,-170]]
});
map.controls.get('zoomControl').options.set({size: 'small'});
// Загрузим регионы.
ymaps.borders.load('001', {
lang: 'ru',
quality: 2
}).then(function (result) {
// Создадим многоугольник, который будет скрывать весь мир, кроме заданной страны.
var background = new ymaps.Polygon([
[
[80, -170],
[80, 170],
[-80, 170],
[-80, -170],
[80, -170]
]
], {}, {
fillColor: '#ffffff',
strokeWidth: 0,
// Для того чтобы полигон отобразился на весь мир, нам нужно поменять
// алгоритм пересчета координат геометрии в пиксельные координаты.
coordRendering: 'straightPath'
});
// Найдём страну по её iso коду.
var region = result.features.filter(function (feature) { return feature.properties.iso3166 == 'RU'; })[0];
// Добавим координаты этой страны в полигон, который накрывает весь мир.
// В полигоне образуется полость, через которую будет видно заданную страну.
var masks = region.geometry.coordinates;
masks.forEach(function(mask){
background.geometry.insert(1, mask);
});
// Добавим многоугольник на карту.
map.geoObjects.add(background);
})
}