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

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

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

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