📜 ⬆️ ⬇️

Features of loading objects from a KML map onto a Yandex map

The Yandex.Map API has tools for loading geographic data in XML format. The API supports maps in two formats: YMapsML and KML. There is an example in the Yandex technology documentation illustrating how to work with these formats.

Looking at this example, it can be assumed that, from an API point of view, both formats are equivalent, and working with them is no different. Moreover, Yandex provides a map designer, in which each map is automatically assigned links to both formats. These links differ only in their suffixes. A map in YMapsML format ends with a / character, and the address of the same map in KML format at the end contains the characters ".kml".

Regardless of the XML format, loading geo-objects will look like this:
var map = new ymaps.Map("map", { center: [-25.89, 135.32], zoom: 4, controls: ["zoomControl"] }); var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/"; ymaps.geoXml.load(url).then(function (res) { map.geoObjects.add(res.geoObjects); }); 

')
But if we need to do something with the objects when loading, we will find that the format matters. Suppose we want to change the color of the outline of an object with a specific name.

YMapsML download example
 var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/"; ymaps.geoXml.load(url).then(function (res) { res.geoObjects.each(function (obj) { if (obj.properties.get("name") == " ") { obj.options.set("strokeColor", "0066ffff"); } }); map.geoObjects.add(res.geoObjects); }); 



It turns out that if we replace the address with the KML format, then this code will not work, because the collection of objects loaded from the KML format is different from the one obtained by loading YMapsML. When loading KML, a collection of objects is obtained, consisting of one geoobject, which is itself a collection. And this nested object already contains geo-objects drawn on the map.

Therefore, to handle a collection loaded from KML, you need to write the following code:

KML Download Example
 var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz.kml"; ymaps.geoXml.load(url).then(function (res) { res.geoObjects.each(function (obj) { obj.each(function (nested) { if (nested.properties.get("name") == " ") { nested.options.set("strokeColor", "0066ffff"); } }); }); map.geoObjects.add(res.geoObjects); }); 



And so that our code does not depend on the format, it is necessary to complicate it a little more:

Download from any format
 var modifyObj = function (obj) { if (obj.properties.get("name") == " ") { obj.options.set("strokeColor", "0066ffff"); } } ymaps.geoXml.load(url).then(function (res) { res.geoObjects.each(function (obj) { if ("each" in obj && typeof obj.each == "function") { obj.each(function (nested) { modifyObj(nested); }); } else { modifyObj(obj); } }); map.geoObjects.add(res.geoObjects); }); 

Source: https://habr.com/ru/post/242697/


All Articles