Отображение YMapsML, KML

Open in CodeSandbox

API Яндекс.Карт позволяет загружать XML-файлы с географическими данными в форматах YMapsML и KML.

Для загрузки данных используется функция geoXml.load.

Обратите внимание, что функция geoXml.load не входит в стандартный пакет package.standard, для её использования необходимо подключить package.geoXml. 

<!DOCTYPE html>

<html>
    <head>
        <title>Примеры. Отображение YMapsML, KML на карте</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!-- Обратите внимание на подключение пакета package.geoXml -->
        <!--
            Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
            Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
        -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.map,package.controls,package.geoXml&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/1.6.4/jquery.min.js"
            type="text/javascript"
        ></script>

        <script src="geoxml_display.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
        <input
            type="button"
            value="Показать пример YMapsML"
            class="load-ymapsml"
        />
        <input type="button" value="Показать пример KML" class="load-kml" />
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64], // Москва
            zoom: 2,
        }),
        ymapsmlButton = $(".load-ymapsml"),
        kmlButton = $(".load-kml");

    // Отключение кеширования атрибута disabled в Firefox.
    ymapsmlButton.get(0).disabled = false;
    kmlButton.get(0).disabled = false;

    myMap.controls.add("smallZoomControl");

    // При нажатии на кнопку загружаем соответствующий XML-файл.
    // и отображаем его данные на карте.
    ymapsmlButton.click(function (e) {
        ymaps.geoXml
            .load(
                "http://maps.yandex.ru/export/usermaps/93jfWjoXws37exPmKH-OFIuj3IQduHal/"
            )
            .then(onGeoXmlLoad);
        e.target.disabled = true;
    });
    kmlButton.click(function (e) {
        ymaps.geoXml
            .load("http://openflights.org/demo/openflights-sample.kml")
            .then(onGeoXmlLoad);
        e.target.disabled = true;
    });

    // Обработчик загрузки XML-файлов.
    function onGeoXmlLoad(res) {
        myMap.geoObjects.add(res.geoObjects);
        if (res.mapState) {
            res.mapState.applyToMap(myMap);
        }
    }
}