Кастомная карта на сайт

Подскажите кто знает, можно ли как-то по простому сделать карту с заливкой стран определенным цветом?

Нужна карта стран с ограничениями на COVID, где можно было бы некоторые страны просто закрасить определенным цветом.
В идеале, добавить к ним по клику еще описание.
Примерно как здесь:
www.skyscanner.ru/travel-restrictions

Начал делать с помощью mapbox, но запутался в интерфейсе. Может быть возможно с помощью API Яндекс или Гугл-карт?

Виноградов Тимур

17 февраля 2021, 22:22

2 386

Комментарии: 9

Максим

18 февраля 2021, 04:13

Если данную задачу решать по простому, то можно просто взять с любого сайта svg карту стран, например с этого. А svg уже можно обработать с помощью js как вам нужно.
В приведенной мною ссылке карта разбита на теги path и у каждого есть атрибут title с название страны, его и можно искать и обрабатывать по клику.

А если вы хотите использовать API Картографических сервисов, тогда вам нужны массивы угловых координат границ стран. Массивы угловых координат можно взять здесь

Виноградов Тимур

18 февраля 2021, 11:37

Спасибо за информацию.
Первый способ попробовал, действительно не очень сложный. Но, я так понимаю с ним будут проблемы на смартфоне, так как там не получится масштабировать карту и двигать карту?

Максим

18 февраля 2021, 13:55

Если вам нужен функционал карты с использованием svg, то можете посмотреть в сторону этого плагина для jquery

Виноградов Тимур

18 февраля 2021, 14:29

Нашел в API Яндекс карт модуль с регионами:
yandex.ru/dev/maps/jsbox/2.1/regions/
Но странно, срабатывает только в голом виде:

<!DOCTYPE html>

<html>

<head>
    <title>Добавление стран или регионов страны на карту</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
    <link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.4/css/bootstrap.min.css"/>
    <script src="https://yastatic.net/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://yastatic.net/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="regions.js" type="text/javascript"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head><body>
<div id="map">
</div>
</body></html>

То есть, я получил свой API-ключ, вынес JS в отдельный файл и подключаю его.
Все работает, когда контейнер #map идет сразу после открытия body. Если опускаю его ниже(у меня же подключается другой html и скрипты на сайте), карта перестает выводиться.
Консоль молчит при этом.
Может быть надо как-то дополнительно карту инициализировать?

Виталий

18 февраля 2021, 16:31

контейнер #map высоту нужно не в процентах, а точную в пикселях задать в стилях. Карта видимо инициализируется но контейнер с 0 высотой и 100% шириной

Виноградов Тимур

18 февраля 2021, 17:04

Блин, точно!
Никто бы не подумал что из-за этого.
Большое спасибо!

Виноградов Тимур

18 февраля 2021, 17:37

Коллеги, подскажите еще пожалуйста, я в API Yandex Maps полный ноль.
Что дописать в JS, чтобы можно было определенную страну заливать определенным цветом?
И(если возможно), чтобы по клику по стране выводилась плашка с определенным текстом.
Опираюсь на этот код:
yandex.ru/dev/maps/jsbox/2.1/regions/

Александр Мельник

18 февраля 2021, 17:46

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

Виноградов Тимур

23 февраля 2021, 10:19

Разобрался сам, закрасить страны цветом, полный код:

ymaps.ready(init);
function init() {
    var map = new ymaps.Map('map', {
        center: [50.704272, 15.602030],
        zoom: 4,
        type: 'yandex#map',
        controls: ['zoomControl']
    });
    map.behaviors.disable('scrollZoom');
    ymaps.borders.load('001', {
      lang: 'ru',
      quality: 1
    }).then(function (geojson) {
      var regions = ymaps.geoQuery(geojson);
      regions.search('properties.iso3166 = "AE"').setOptions('fillColor', '#ffeb3bd6');
      regions.search('properties.iso3166 = "GB"').setOptions('fillColor', '#ffeb3bd6');
      regions.search('properties.iso3166 = "IE"').setOptions('fillColor', '#ffeb3bd6');
     //Можно продолжать для любой страны по стандарту ISO 3166
      regions.addToMap(map);
    });
}

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.