Нужно сделать карту стран мира без лишней детализации - отключить фон карты, подписи населенных пунктов, географические объекты и показать только границы стран нужного цвета.
На карте нужно обрабатывать клики по странам.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСделать такую карту можно с помощью модуля Регионы API Яндекс.Карт. Он позволяет добавить на карту полигоны стран или регионов страны и работать с ними как с геообъектами.
Ниже показан пример создания карты мира без подложки, по клику на страну открывается балун с её названием.
ymaps.ready(init);
function init() {
//Создаем карту
map = new ymaps.Map('map', {
center: [50, 30],
zoom: 2,
controls: [],
type: null //отключает стандартную подложку карты
}, {
minZoom: 1, //ограничиваем зум карты
maxZoom: 5,
restrictMapArea: [
[85, -169],
[-70, 190]
] //ограничиваем область видимости карты
});
//Добавляем белый фон карты
map.layers.add(new ymaps.Layer('https://sandbox.api.maps.yandex.net/examples/ru/2.1/azimuthal_map/images/tiles_arctic/3/tile-0-0.jpg'));
//загружаем страны мира (код '001') на русском языке в стандартном качестве
ymaps.regions.load('001', {
lang: 'ru',
quality: 1
}).then(function(result) {
var regions = result.geoObjects; // ссылка на коллекцию GeoObjectCollection
//настраиваем дефолтный внешний вид полигонов
regions.options.set({
fillColor: '#8ca9cf99',
strokeColor: '#FFF',
pixelRendering: 'static',
hasHint: false
});
//перекрашиваем нужные регионы
regions.each(function(reg) {
if (reg.properties.get('name') == "Россия" || reg.properties.get('name') == "Беларусь" || reg.properties.get('name') == "Украина") {
//Меняем цвет
reg.options.set('fillColor', '#89e8e099')
}
});
//обрабатываем клики по странам
result.geoObjects.events.add('click', function(e) {
//определяем полигон, в который кликнули, и координаты клика
var regClicked = e.get('target'),
coords = e.get('coords');
//открываем балун с названием страны в точке клика
regClicked.properties.set('balloonContent', regClicked.properties.get('name'));
regClicked.balloon.open(coords);
});
//добавляем регионы на карту
map.geoObjects.add(regions);
}, function() {
//фоллбек на случай незагрузки регионов
alert('No response');
});
}
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
<div id="map"></div>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
Пример работы модуля Регионы в песочнице Яндекса.
Вот тут есть прекрсное видео для построения таких карт https://www.youtube.com/watch?v=AkyJvFA_2dQ