Polyline

Open in CodeSandbox

YMapsML is a language for describing geographical objects.

In YMapsML, each geographical object is associated with a geometric shape and a geo object that is used for displaying this shape on the map. The shape definitions and their anchors to geographical coordinates are set in corresponding YMapsML elements. The gml:LineString element is designated for the "polyline" shape. This element contains the coordinates of line endpoints.

The geoXml.load function is used for loading YMapsML data. After data loads, the function converts it to GeoObjectCollection and passes it to the handler function as a parameter. A GeoObjectCollection can be displayed on the map. 

<!DOCTYPE html>
<html>
    <head>
        <title>YMapsML examples. Polyline.</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="ymapsml_linestring.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>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [54.55, 36.27],
            zoom: 12,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // After the data from the YMapsML file loads, the callback function is called.
    ymaps.geoXml.load("data.xml").then(
        function (res) {
            // Adding geo object collections to the map.
            myMap.geoObjects.add(res.geoObjects);
        },
        function (error) {
            alert(
                "When loading styles, the following error occurred: " +
                    error
            );
        }
    );
}