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

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

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

Начал делать с помощью mapbox, но запутался в интерфейсе. Может быть возможно с помощью API Яндекс или Гугл-карт?
Виноградов Тимур
17 февраля 2021, 22:22
modx.pro
130
0

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

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

А если вы хотите использовать API Картографических сервисов, тогда вам нужны массивы угловых координат границ стран. Массивы угловых координат можно взять здесь
    Виноградов Тимур
    18 февраля 2021, 11:37
    0
    Спасибо за информацию.
    Первый способ попробовал, действительно не очень сложный. Но, я так понимаю с ним будут проблемы на смартфоне, так как там не получится масштабировать карту и двигать карту?
      Максим
      18 февраля 2021, 13:55
      0
      Если вам нужен функционал карты с использованием svg, то можете посмотреть в сторону этого плагина для jquery
    Виноградов Тимур
    18 февраля 2021, 14:29
    0
    Нашел в 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
      0
      контейнер #map высоту нужно не в процентах, а точную в пикселях задать в стилях. Карта видимо инициализируется но контейнер с 0 высотой и 100% шириной
        Виноградов Тимур
        18 февраля 2021, 17:04
        0
        Блин, точно!
        Никто бы не подумал что из-за этого.
        Большое спасибо!
      Виноградов Тимур
      18 февраля 2021, 17:37
      0
      Коллеги, подскажите еще пожалуйста, я в API Yandex Maps полный ноль.
      Что дописать в JS, чтобы можно было определенную страну заливать определенным цветом?
      И(если возможно), чтобы по клику по стране выводилась плашка с определенным текстом.
      Опираюсь на этот код:
      yandex.ru/dev/maps/jsbox/2.1/regions/
        Александр Мельник
        18 февраля 2021, 17:46
        0
        нужно отдать эту задачу тому кто разбирается.
        Или изучать документацию. Это огромная редкость и удача, когда какая то программа имеет такую же подробную документацию, как api яндекс карт. Пользуйтесь такой удачей, чтобы узнать что-то новое.
        Виноградов Тимур
        23 февраля 2021, 10:19
        1
        +1
        Разобрался сам, закрасить страны цветом, полный код:
        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);
            });
        }
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          9