Displaying GPX and KML

Open in CodeSandbox

Clicking the button "Show example of GPX" or "Show example of KML" displays XML exported from the Map Constructor. To see how to display XML from a different source, click "KML from openflights.org".

The Yandex.Maps API can load XML files with geographical data in KML and GPX formats.

The geoXml.load function is used for loading data. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Displaying GPX and KML on the map</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            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: 80%;
            }
            .inputs {
                padding: 10px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <div class="inputs">
            <input
                type="button"
                value="Show example of GPX"
                class="load-gpx"
            />
            <input
                type="button"
                value="Show example of KML"
                class="load-kml"
            />
            <input
                type="button"
                value="KML from 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], // Moscow
            zoom: 10,
            controls: ["zoomControl"],
        }),
        gpxButton = $(".load-gpx"),
        kmlButton = $(".load-kml"),
        kmlFlightsButton = $(".load-kml-flights");

    // Disabling caching the "disabled" attribute in Firefox.
    gpxButton.get(0).disabled = false;
    kmlButton.get(0).disabled = false;
    kmlFlightsButton.get(0).disabled = false;

    /**
     * When the button is clicked, we load the appropriate
     * XML file and display its data on the map.
     */
    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;
    });

    // The handler for loading XML files.
    function onGeoXmlLoad(res) {
        myMap.geoObjects.add(res.geoObjects);
        if (res.mapState) {
            res.mapState.applyToMap(myMap);
        } else {
            myMap.setBounds(res.geoObjects.getBounds());
        }
    }
}