Отображение GPX и KML

Open in CodeSandbox

При нажатии на кнопки "Показать пример GPX" и "Показать пример KML" будет отображаться XML, экспортированный из Конструктора Карт. Как отобразить XML из другого источника можно посмотреть по клику на кнопку "KML с сайта openflights.org".

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

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

<!DOCTYPE html>

<html>
    <head>
        <title>Отображение GPX и KML</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&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="geoxml_display.js" type="text/javascript"></script>
        <style>
            body,
            html {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                width: 100%;
                height: 85%;
            }
            .inputs {
                padding: 10px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <div class="inputs">
            <input
                type="button"
                value="Показать пример GPX"
                class="load-gpx"
            />
            <input
                type="button"
                value="Показать пример KML"
                class="load-kml"
            />
            <input
                type="button"
                value="KML с сайта openflights.org"
                class="load-kml-flights"
            />
        </div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [59.994675, 29.702651], // Москва
            zoom: 10,
            controls: ["zoomControl"],
        }),
        gpxButton = $(".load-gpx"),
        kmlButton = $(".load-kml"),
        kmlFlightsButton = $(".load-kml-flights");

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

    // При нажатии на кнопку загружаем соответствующий XML-файл
    // и отображаем его данные на карте.
    gpxButton.click(function (e) {
        ymaps.geoXml.load("geoObjects.gpx").then(onGeoXmlLoad);
        e.target.disabled = true;
    });
    kmlButton.click(function (e) {
        ymaps.geoXml.load("geoObjects.kml").then(onGeoXmlLoad);
        e.target.disabled = true;
    });
    kmlFlightsButton.click(function (e) {
        ymaps.geoXml
            .load("http://openflights.org/demo/openflights-sample.kml")
            .then(function (res) {
                res.geoObjects.each(function (obj) {
                    obj.options.set({ preset: "islands#blackCircleIcon" });
                    if (!obj.geometry) {
                        obj.each(function (obj) {
                            obj.options.set({ strokeColor: "9090e8" });
                        });
                    }
                });
                onGeoXmlLoad(res);
            });
        e.target.disabled = true;
    });

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