Визуализация различных форматов данных на карте

Open in CodeSandbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
        <!-- To make the map appear, you must add your apikey -->
        <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../kmlToGeojson.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../gpxToGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../ymapsMLtoGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {POLYGON_STYLE, LOCATION, MARKER_PROPS, TOOLTIP_TEXT, loadGeometries} from '../variables';
            
            window.map = null;
            
            interface InfoMessageProps {
                text: string;
            }
            
            main();
            async function main() {
                // Waiting for all api elements to be loaded
                await ymaps3.ready;
                const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls} = ymaps3;
                const {YMapPopupMarker} = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
                const geometries = await loadGeometries();
            
                class InfoMessage extends ymaps3.YMapComplexEntity<InfoMessageProps> {
                    private _element!: HTMLDivElement;
                    private _detachDom!: () => void;
            
                    // Method for create a DOM control element
                    _createElement(props: InfoMessageProps) {
                        // Create a root element
                        const infoWindow = document.createElement('div');
                        infoWindow.classList.add('info-window');
                        infoWindow.innerHTML = props.text;
            
                        return infoWindow;
                    }
            
                    // Method for attaching the control to the map
                    _onAttach() {
                        this._element = this._createElement(this._props);
                        this._detachDom = ymaps3.useDomContext(this, this._element, this._element);
                    }
            
                    // Method for detaching control from the map
                    _onDetach() {
                        this._detachDom();
                        this._detachDom = undefined;
                        this._element = undefined;
                    }
                }
            
                function PopupContent(markerProp: {format: string}) {
                    const textElement = document.createElement('div');
                    textElement.classList.add('text');
                    const darkText = document.createElement('span');
                    darkText.classList.add('dark');
                    darkText.innerText = markerProp.format;
                    const text = document.createElement('span');
                    text.innerText = ' format';
            
                    textElement.appendChild(darkText);
                    textElement.appendChild(text);
                    return textElement;
                }
            
                // Initialize the map
                map = new YMap(
                    // Pass the link to the HTMLElement of the container
                    document.getElementById('app'),
                    // Pass the map initialization parameters
                    {location: LOCATION, showScaleInCopyrights: true},
                    [
                        // Add a map scheme layer
                        new YMapDefaultSchemeLayer({}),
                        // Add a layer of geo objects to display the line
                        new YMapDefaultFeaturesLayer({})
                    ]
                );
            
                geometries.forEach((geometry) => {
                    // Create a line object, set its coordinates and styles, and add it to the map
                    const feature = new YMapFeature({
                        geometry: geometry,
                        style: POLYGON_STYLE
                    });
                    map.addChild(feature);
                });
            
                MARKER_PROPS.forEach((markerProp) => {
                    const marker = new YMapPopupMarker({
                        coordinates: markerProp.coordinates,
                        position: markerProp.position,
                        content: () => PopupContent(markerProp)
                    });
                    map.addChild(marker);
                });
            
                /* Create and add a shared container for controls to the map.
              Using YMapControls you can change the position of the control */
                const topRightControls = new YMapControls({position: 'top left'});
                map.addChild(topRightControls);
            
                // Add a custom information message control to the map
                topRightControls.addChild(new InfoMessage({text: TOOLTIP_TEXT}));
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
        <!-- To make the map appear, you must add your apikey -->
        <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../kmlToGeojson.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../gpxToGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../ymapsMLtoGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import {POLYGON_STYLE, LOCATION, MARKER_PROPS, TOOLTIP_TEXT, loadGeometries} from '../variables';
            import {PolygonGeometry} from '@yandex/ymaps3-types';
            
            window.map = null;
            
            main();
            async function main() {
                // For each object in the JS API, there is a React counterpart
                // To use the React version of the API, include the module @yandex/ymaps3-reactify
                const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
                const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
                const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls, YMapControl} =
                    reactify.module(ymaps3);
                const {YMapPopupMarker} = reactify.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));
            
                const {useEffect, useState, useCallback} = React;
            
                function App() {
                    const [geometries, setGeometries] = useState([]);
            
                    useEffect(() => {
                        async function getData() {
                            const geometries = await loadGeometries();
                            setGeometries(geometries);
                        }
                        getData();
                    }, []);
            
                    const PopupContent = useCallback((markerProp: {format: string}) => {
                        return (
                            <div className="text">
                                <span className="dark">{markerProp.format}</span> format
                            </div>
                        );
                    }, []);
            
                    return (
                        // Initialize the map and pass initialization parameters
                        <YMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
                            {/* Add a map scheme layer */}
                            <YMapDefaultSchemeLayer />
                            {/* Add a layer of geo objects to display the line */}
                            <YMapDefaultFeaturesLayer />
            
                            {/* Add a line object to the map, set its coordinates and styles */}
                            {geometries.map((geometry) => (
                                <YMapFeature geometry={geometry as PolygonGeometry} style={POLYGON_STYLE} />
                            ))}
            
                            {MARKER_PROPS.map((markerProp) => (
                                <YMapPopupMarker
                                    coordinates={markerProp.coordinates}
                                    position={markerProp.position}
                                    content={() => PopupContent(markerProp)}
                                />
                            ))}
            
                            {/* Add a shared container for controls to the map.
                            Using YMapControls you can change the position of the control */}
                            <YMapControls position="top left">
                                {/* Add a custom information message control to the map */}
                                <YMapControl transparent>
                                    <div className="info-window">{TOOLTIP_TEXT}</div>
                                </YMapControl>
                            </YMapControls>
                        </YMap>
                    );
                }
            
                ReactDOM.render(
                    <React.StrictMode>
                        <App />
                    </React.StrictMode>,
                    document.getElementById('app')
                );
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
        <!-- To make the map appear, you must add your apikey -->
        <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../kmlToGeojson.ts"
        ></script>
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../gpxToGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../ymapsMLtoGeojson.ts"
        ></script>
        <!--  -->
        <script
            data-plugins="transform-modules-umd"
            data-presets="typescript"
            type="text/babel"
            src="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {POLYGON_STYLE, LOCATION, TOOLTIP_TEXT, MARKER_PROPS, loadGeometries} from '../variables';
            
            window.map = null;
            
            async function main() {
                const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
                const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
                const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature, YMapControls, YMapControl} =
                    vuefy.module(ymaps3);
                const {YMapPopupMarker} = vuefy.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));
            
                const App = Vue.createApp({
                    components: {
                        YMap,
                        YMapDefaultSchemeLayer,
                        YMapDefaultFeaturesLayer,
                        YMapFeature,
                        YMapControls,
                        YMapControl,
                        YMapPopupMarker
                    },
                    setup() {
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
                        const geometries = Vue.ref([]);
            
                        Vue.onMounted(async () => {
                            geometries.value = await loadGeometries();
                        });
            
                        return {
                            refMap,
                            LOCATION,
                            POLYGON_STYLE,
                            TOOLTIP_TEXT,
                            MARKER_PROPS,
                            geometries
                        };
                    },
                    template: `
                  <YMap
                    :location="LOCATION"
                    :ref="refMap"
                    :showScaleInCopyrights="true"
                  >
                    <YMapDefaultSchemeLayer/>
                    <YMapDefaultFeaturesLayer/>
            
                    <template v-for="geometry of geometries">
                      <YMapFeature
                        :geometry="geometry"
                        :style="POLYGON_STYLE"
                      />
                    </template>
            
                    <template v-for="markerProp of MARKER_PROPS">
                      <YMapPopupMarker :coordinates="markerProp.coordinates" :position="markerProp.position">
                        <template #content>
                          <div class="text">
                            <span class="dark">{{ markerProp.format }}</span> format
                          </div>
                        </template>
                      </YMapPopupMarker>
                    </template>
            
                    <YMapControls position="top left">
                      <YMapControl :transparent="true">
                        <div class="info-window">
                          {{ TOOLTIP_TEXT }}
                        </div>
                      </YMapControl>
                    </YMapControls>
                  </YMap>
                `
                });
            
                App.mount('#app');
            }
            
            main();
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

import {GEOMETRY_TYPES, GEOMETRY_TYPE_CONVERTERS} from './common';

export function ymapsMLtoGeojson(xmlString: string) {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, 'application/xml');

    const geoJSON = {
        type: 'FeatureCollection',
        features: []
    };

    const featureMembers = xmlDoc.getElementsByTagName('gml:featureMember');

    for (let i = 0; i < featureMembers.length; i++) {
        const featureMember = featureMembers[i];
        const posList = featureMember.getElementsByTagName('gml:posList')[0].textContent.trim();
        const geoObjectTag = featureMember.getElementsByTagName('ymaps3:GeoObject');

        let geometryTypeName: string;
        for (const geometryType of GEOMETRY_TYPES) {
            const geometryTypeTag = geoObjectTag[0].getElementsByTagName(`gml:${geometryType}`);
            if (geometryTypeTag[0]) {
                geometryTypeName = geometryTypeTag[0].nodeName.split(':')[1];
            }
        }
        if (!geometryTypeName) {
            throw new Error('Geometry type not found!');
        }

        const coordinates = posList.split(/\s+/).reduce((acc, coord, index, arr) => {
            if (index % 2 === 0) {
                acc.push([parseFloat(coord), parseFloat(arr[index + 1])]);
            }
            return acc;
        }, []);

        geoJSON.features.push({
            type: 'Feature',
            properties: {},
            geometry: {
                type: geometryTypeName,
                coordinates: GEOMETRY_TYPE_CONVERTERS[geometryTypeName](coordinates)
            }
        });
    }

    return geoJSON;
}

import type {LngLat, YMapLocationRequest, DrawingStyle} from '@yandex/ymaps3-types';
import type {YMapPopupPositionProps} from '@yandex/ymaps3-default-ui-theme';
import {kmlToGeoJSON} from './kmlToGeojson';
import {gpxToGeoJSON} from './gpxToGeojson';
import {ymapsMLtoGeojson} from './ymapsMLtoGeojson';

export const LOCATION: YMapLocationRequest = {
    center: [39.9579, 43.4075], // starting position [lng, lat]
    zoom: 15 // starting zoom
};

export const TOOLTIP_TEXT = 'Расположение: Сочи Автодром, Адлер';
export const POLYGON_STYLE: DrawingStyle = {
    stroke: [{color: '#196dff', width: 3}],
    fill: '#196DFF',
    fillOpacity: 0.08,
    simplificationRate: 0
};

export const MARKER_PROPS: Array<{coordinates: LngLat; format: string; position: YMapPopupPositionProps}> = [
    {
        coordinates: [39.9589, 43.4083],
        format: 'GPX',
        position: 'top'
    },
    {
        coordinates: [39.9557, 43.4033],
        format: 'YMapsML',
        position: 'top'
    },
    {
        coordinates: [39.9691, 43.4061],
        format: 'KML',
        position: 'top'
    },
    {
        coordinates: [39.9786, 43.4079],
        format: 'GeoJSON',
        position: 'top'
    }
];
export async function loadGeometries() {
    const geometries = [];

    const kmlText = await fetch('../features/kml/feature.kml').then((r) => r.text());
    const geoJsonKml = kmlToGeoJSON(kmlText);
    geometries.push(geoJsonKml.features[0].geometry);

    const gpxText = await fetch('../features/gpx/feature.gpx').then((r) => r.text());
    const geoJsonGpx = gpxToGeoJSON(gpxText);
    geometries.push(geoJsonGpx.features[0].geometry);

    const geojson = await fetch('../features/geojson/feature.json').then((r) => r.json());
    geometries.push(geojson.features[0].geometry);

    const ymapsMLText = await fetch('../features/ymapsML/feature.xml').then((r) => r.text());
    const ymapsML = ymapsMLtoGeojson(ymapsMLText);
    geometries.push(ymapsML.features[0].geometry);

    return geometries;
}

import {GEOMETRY_TYPES, GEOMETRY_TYPE_CONVERTERS} from './common';
import {LngLat} from '@yandex/ymaps3-types';

export function kmlToGeoJSON(kmlString: string) {
    const parser = new DOMParser();
    const kml = parser.parseFromString(kmlString, 'application/xml');
    const geojson = {
        type: 'FeatureCollection',
        features: []
    };

    const placemarks = kml.getElementsByTagName('Placemark');

    for (let i = 0; i < placemarks.length; i++) {
        const placemark = placemarks[i];
        const name = placemark.getElementsByTagName('name')[0]?.textContent || 'Unnamed';

        let geometryTypeName;
        for (const geometryType of GEOMETRY_TYPES) {
            const geometryTypeTag = placemark.getElementsByTagName(geometryType);
            if (geometryTypeTag[0]) {
                geometryTypeName = geometryTypeTag[0].nodeName;
            }
        }
        if (!geometryTypeName) {
            throw new Error('Geometry type not found!');
        }

        const coordinatesText = placemark.getElementsByTagName('coordinates')[0]?.textContent.trim();
        const coordinatesArray: LngLat[] = coordinatesText.split(/\s+/).map((coord) => {
            const [lng, lat, alt] = coord.split(',').map(Number);
            return [lng, lat];
        });

        const feature = {
            type: 'Feature',
            geometry: {
                type: geometryTypeName,
                coordinates: GEOMETRY_TYPE_CONVERTERS[geometryTypeName](coordinatesArray)
            },
            properties: {
                name: name
            }
        };

        geojson.features.push(feature);
    }

    return geojson;
}

export function gpxToGeoJSON(gpxString: string) {
    const parser = new DOMParser();
    const gpx = parser.parseFromString(gpxString, 'application/xml');
    const geojson = {
        type: 'FeatureCollection',
        features: []
    };

    const trksegs = gpx.getElementsByTagName('trkseg');

    for (let i = 0; i < trksegs.length; i++) {
        const trkseg = trksegs[i];
        const trkpts = trkseg.getElementsByTagName('trkpt');

        const coordinates = [];

        for (let j = 0; j < trkpts.length; j++) {
            const trkpt = trkpts[j];
            const lat = parseFloat(trkpt.getAttribute('lat'));
            const lon = parseFloat(trkpt.getAttribute('lon'));

            coordinates.push([lon, lat]);
        }

        const feature = {
            type: 'Feature',
            geometry: {
                type: 'Polygon',
                coordinates: [coordinates]
            },
            properties: {}
        };

        geojson.features.push(feature);
    }

    return geojson;
}

import {LngLat} from '@yandex/ymaps3-types';

ymaps3.ready.then(() => {
    ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@yandex/ymaps3-default-ui-theme@0.0');
});

export const GEOMETRY_TYPES = ['Polygon', 'MultiPolygon', 'LineString', 'MultiLineString', 'Point'];

function convertToArray(coordinates: LngLat[]) {
    return [coordinates];
}
function convertToMultiArray(coordinates: LngLat[]) {
    return [[coordinates]];
}

export const GEOMETRY_TYPE_CONVERTERS = {
    Polygon: convertToArray,
    Point: (coordinates: LngLat) => coordinates,
    LineString: (coordinates: LngLat) => coordinates,
    MultiLineString: convertToArray,
    MultiPolygon: convertToMultiArray
};

.info-window {
    padding: 8px 12px 8px 40px;
    border-radius: 12px;
    background-color: #313133;
    background-image: url('./info-icon.svg');
    background-position: 10px 8px;
    background-repeat: no-repeat;
    color: #f2f5fa;
    font-size: 14px;
    line-height: 20px;
    min-width: max-content;
}

.text {
    color: rgba(123, 125, 133);
    font-weight: 500;
}

.dark {
    color: rgba(5, 13, 51, 1);
}

<?xml version="1.0" encoding="utf-8"?>
<ymaps3:ymaps3 xmlns:ymaps3="http://maps.yandex.ru/ymaps3/1.x"
             xmlns:repr="http://maps.yandex.ru/representation/1.x"
             xmlns:gml="http://www.opengis.net/gml"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps3/1.x/ymaps3.xsd">
  <ymaps3:GeoObjectCollection>
    <gml:featureMember>
      <ymaps3:GeoObject>
        <gml:Polygon>
          <gml:exterior>
            <gml:LinearRing>
              <gml:posList>
                39.9559202705469 43.4040033926935
                39.9556628359508 43.4039942040565
                39.95540788082299 43.403966726645436
                39.95515786074418 43.40392122510744
                39.95491518375037 43.40385813768716
                39.95468218713418 43.40377807200476
                39.95446111492851 43.403681799202126
                39.95425409628964 43.40357024651376
                39.95406312498799 43.40344448833424
                39.95389004020448 43.403305735867995
                39.953736508817265 43.40315532546154
                39.95360400934974 43.4029947057305
                39.95349381773411 43.40282542360548
                39.95340699502771 43.40264910943146
                39.95334437720016 43.40246746126413
                39.95330656708941 43.40228222851462
                39.953293928604054 43.40209519510017
                39.95330658322722 43.401908162263126
                39.95334440885561 43.401722931223624
                39.9534070409843 43.40154128583321
                39.95349387622574 43.40136497539629
                39.95360407812862 43.40119569782494
                39.953736585240264 43.40103508328914
                39.9538901213347 43.40088467851985
                39.954063207707655 43.40074593191607
                39.95425417741987 43.40062017959901
                39.95446119135151 43.40050863254781
                39.95468225591306 43.40041236494041
                39.95491524224201 43.40033230381168
                39.95515790670077 43.40026922012851
                39.95540791247843 43.40022372136742
                39.9556628520886 43.40019624566637
                39.9559202705469 43.40018705760678
                39.95617768900519 43.40019624566637
                39.95643262861535 43.40022372136742
                39.956682634393026 43.40026922012851
                39.95692529885178 43.40033230381168
                39.957158285180725 43.40041236494041
                39.957379349742276 43.40050863254781
                39.95758636367392 43.40062017959901
                39.95777733338613 43.40074593191607
                39.95795041975909 43.40088467851985
                39.958103955853524 43.40103508328914
                39.95823646296516 43.40119569782494
                39.958346664868046 43.40136497539629
                39.95843350010949 43.40154128583321
                39.95849613223818 43.401722931223624
                39.95853395786657 43.401908162263126
                39.95854661248974 43.40209519510017
                39.958533974004375 43.40228222851462
                39.95849616389363 43.40246746126413
                39.958433546066075 43.40264910943146
                39.95834672335968 43.40282542360548
                39.95823653174405 43.4029947057305
                39.95810403227652 43.40315532546154
                39.95795050088931 43.403305735867995
                39.95777741610579 43.40344448833424
                39.95758644480415 43.40357024651376
                39.957379426165275 43.403681799202126
                39.957158353959606 43.40377807200476
                39.956925357343415 43.40385813768716
                39.95668268034961 43.40392122510744
                39.9564326602708 43.403966726645436
                39.95617770514299 43.4039942040565
                39.9559202705469 43.4040033926935
              </gml:posList>
            </gml:LinearRing>
          </gml:exterior>
        </gml:Polygon>
      </ymaps3:GeoObject>
    </gml:featureMember>
  </ymaps3:GeoObjectCollection>
</ymaps3:ymaps3>

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Placemark>
      <Polygon>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates>39.9680926323479,43.4015509103552 39.9731221406633,43.4067115732857 39.9714972225921,43.4074535932414 39.9631714519043,43.4052050199594 39.963960697825,43.402765223537 39.968046206118,43.4015621541074</coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>
    </Placemark>
  </Document>
</kml>

<?xml version="1.0"?>
<gpx version="1.1" creator="GDAL 2.2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ogr="http://osgeo.org/gdal" xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<metadata><bounds minlat="43.402180999999999" minlon="39.947308999999997" maxlat="43.412730000000003" maxlon="39.970149999999997"/></metadata>
<trk>
  <trkseg>
    <trkpt lat="43.409699" lon="39.968066">
    </trkpt>
    <trkpt lat="43.408191" lon="39.966723">
    </trkpt>
    <trkpt lat="43.407965" lon="39.966421">
    </trkpt>
    <trkpt lat="43.407734" lon="39.966007">
    </trkpt>
    <trkpt lat="43.407555" lon="39.965551">
    </trkpt>
    <trkpt lat="43.407408" lon="39.9649">
    </trkpt>
    <trkpt lat="43.407074" lon="39.963177">
    </trkpt>
    <trkpt lat="43.406574" lon="39.96062">
    </trkpt>
    <trkpt lat="43.406046" lon="39.957886">
    </trkpt>
    <trkpt lat="43.40606" lon="39.957708">
    </trkpt>
    <trkpt lat="43.406098" lon="39.957643">
    </trkpt>
    <trkpt lat="43.406221" lon="39.957602">
    </trkpt>
    <trkpt lat="43.406395" lon="39.957531">
    </trkpt>
    <trkpt lat="43.406522" lon="39.957418">
    </trkpt>
    <trkpt lat="43.407399" lon="39.956181">
    </trkpt>
    <trkpt lat="43.407635" lon="39.955737">
    </trkpt>
    <trkpt lat="43.407795" lon="39.955187">
    </trkpt>
    <trkpt lat="43.407837" lon="39.954524">
    </trkpt>
    <trkpt lat="43.407743" lon="39.953879">
    </trkpt>
    <trkpt lat="43.407536" lon="39.953334">
    </trkpt>
    <trkpt lat="43.407248" lon="39.952908">
    </trkpt>
    <trkpt lat="43.406965" lon="39.952648">
    </trkpt>
    <trkpt lat="43.406621" lon="39.95244">
    </trkpt>
    <trkpt lat="43.406249" lon="39.952363">
    </trkpt>
    <trkpt lat="43.405834" lon="39.952399">
    </trkpt>
    <trkpt lat="43.405481" lon="39.952547">
    </trkpt>
    <trkpt lat="43.404321" lon="39.953316">
    </trkpt>
    <trkpt lat="43.404189" lon="39.953334">
    </trkpt>
    <trkpt lat="43.404085" lon="39.953263">
    </trkpt>
    <trkpt lat="43.403991" lon="39.953086">
    </trkpt>
    <trkpt lat="43.402223" lon="39.948996">
    </trkpt>
    <trkpt lat="43.402186" lon="39.948871">
    </trkpt>
    <trkpt lat="43.402181" lon="39.948676">
    </trkpt>
    <trkpt lat="43.402242" lon="39.948534">
    </trkpt>
    <trkpt lat="43.402332" lon="39.948439">
    </trkpt>
    <trkpt lat="43.403977" lon="39.947427">
    </trkpt>
    <trkpt lat="43.404255" lon="39.947332">
    </trkpt>
    <trkpt lat="43.404481" lon="39.947309">
    </trkpt>
    <trkpt lat="43.404731" lon="39.947338">
    </trkpt>
    <trkpt lat="43.405688" lon="39.947599">
    </trkpt>
    <trkpt lat="43.405768" lon="39.947646">
    </trkpt>
    <trkpt lat="43.405806" lon="39.947747">
    </trkpt>
    <trkpt lat="43.405834" lon="39.947877">
    </trkpt>
    <trkpt lat="43.406197" lon="39.951209">
    </trkpt>
    <trkpt lat="43.406221" lon="39.951292">
    </trkpt>
    <trkpt lat="43.406268" lon="39.951369">
    </trkpt>
    <trkpt lat="43.406329" lon="39.951428">
    </trkpt>
    <trkpt lat="43.406928" lon="39.951635">
    </trkpt>
    <trkpt lat="43.407017" lon="39.951653">
    </trkpt>
    <trkpt lat="43.40713" lon="39.951665">
    </trkpt>
    <trkpt lat="43.407229" lon="39.951647">
    </trkpt>
    <trkpt lat="43.409346" lon="39.950612">
    </trkpt>
    <trkpt lat="43.409431" lon="39.950612">
    </trkpt>
    <trkpt lat="43.409506" lon="39.950653">
    </trkpt>
    <trkpt lat="43.409581" lon="39.95073">
    </trkpt>
    <trkpt lat="43.409638" lon="39.950842">
    </trkpt>
    <trkpt lat="43.409944" lon="39.951884">
    </trkpt>
    <trkpt lat="43.410025" lon="39.952363">
    </trkpt>
    <trkpt lat="43.410086" lon="39.952813">
    </trkpt>
    <trkpt lat="43.410119" lon="39.953429">
    </trkpt>
    <trkpt lat="43.410114" lon="39.953973">
    </trkpt>
    <trkpt lat="43.410067" lon="39.954595">
    </trkpt>
    <trkpt lat="43.409987" lon="39.955181">
    </trkpt>
    <trkpt lat="43.409864" lon="39.956211">
    </trkpt>
    <trkpt lat="43.409761" lon="39.956761">
    </trkpt>
    <trkpt lat="43.409614" lon="39.957324">
    </trkpt>
    <trkpt lat="43.409435" lon="39.957933">
    </trkpt>
    <trkpt lat="43.408742" lon="39.960028">
    </trkpt>
    <trkpt lat="43.408596" lon="39.960603">
    </trkpt>
    <trkpt lat="43.408516" lon="39.961123">
    </trkpt>
    <trkpt lat="43.408478" lon="39.961703">
    </trkpt>
    <trkpt lat="43.408497" lon="39.962301">
    </trkpt>
    <trkpt lat="43.408573" lon="39.962858">
    </trkpt>
    <trkpt lat="43.408752" lon="39.96371">
    </trkpt>
    <trkpt lat="43.408724" lon="39.96387">
    </trkpt>
    <trkpt lat="43.408648" lon="39.963935">
    </trkpt>
    <trkpt lat="43.407988" lon="39.964201">
    </trkpt>
    <trkpt lat="43.407894" lon="39.964326">
    </trkpt>
    <trkpt lat="43.407837" lon="39.964539">
    </trkpt>
    <trkpt lat="43.407847" lon="39.964769">
    </trkpt>
    <trkpt lat="43.407903" lon="39.965101">
    </trkpt>
    <trkpt lat="43.40804" lon="39.965474">
    </trkpt>
    <trkpt lat="43.408257" lon="39.965805">
    </trkpt>
    <trkpt lat="43.408535" lon="39.966078">
    </trkpt>
    <trkpt lat="43.409167" lon="39.966681">
    </trkpt>
    <trkpt lat="43.409242" lon="39.966711">
    </trkpt>
    <trkpt lat="43.409303" lon="39.966699">
    </trkpt>
    <trkpt lat="43.409369" lon="39.966587">
    </trkpt>
    <trkpt lat="43.409666" lon="39.966036">
    </trkpt>
    <trkpt lat="43.40977" lon="39.965935">
    </trkpt>
    <trkpt lat="43.409916" lon="39.9659">
    </trkpt>
    <trkpt lat="43.410048" lon="39.965965">
    </trkpt>
    <trkpt lat="43.411033" lon="39.966841">
    </trkpt>
    <trkpt lat="43.411962" lon="39.967622">
    </trkpt>
    <trkpt lat="43.412664" lon="39.96825">
    </trkpt>
    <trkpt lat="43.41273" lon="39.968392">
    </trkpt>
    <trkpt lat="43.412693" lon="39.968569">
    </trkpt>
    <trkpt lat="43.41224" lon="39.969972">
    </trkpt>
    <trkpt lat="43.412183" lon="39.970102">
    </trkpt>
    <trkpt lat="43.412099" lon="39.97015">
    </trkpt>
    <trkpt lat="43.412004" lon="39.970114">
    </trkpt>
    <trkpt lat="43.409699" lon="39.968066">
    </trkpt>
  </trkseg>
</trk>
</gpx>

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [39.97867533648392, 43.40933766521482],
                        [39.97838529472261, 43.40932731359744],
                        [39.97809804651705, 43.40929635844756],
                        [39.97781635850817, 43.40924509791148],
                        [39.977542943766935, 43.409174025706925],
                        [39.97728043565591, 43.40908382636641],
                        [39.977031362459776, 43.40897536864213],
                        [39.9767981230293, 43.40884969713623],
                        [39.97658296367372, 43.40870802223705],
                        [39.9763879565243, 43.40855170845851],
                        [39.97621497957739, 43.40838226129486],
                        [39.97606569860948, 43.408201312717985],
                        [39.97594155113811, 43.40801060545656],
                        [39.97584373258325, 43.407811976209004],
                        [39.97577318476185, 43.40760733795182],
                        [39.975730586826565, 43.40739866151407],
                        [39.97571634873512, 43.40718795659515],
                        [39.975730607313125, 43.40697725240917],
                        [39.97577322494769, 43.40676857814206],
                        [39.97584379092404, 43.406563943409814],
                        [39.97594162539186, 43.40636531890601],
                        [39.97606578592264, 43.406174617424874],
                        [39.976215076594585, 43.40599367544269],
                        [39.9763880595172, 43.40582423543469],
                        [39.97658306868437, 43.40566792909777],
                        [39.9767982260222, 43.40552626164022],
                        [39.977031459476976, 43.40540059728997],
                        [39.97728052296908, 43.40529214616037],
                        [39.977543018020675, 43.40520195260014],
                        [39.97781641684897, 43.40513088513935],
                        [39.978098086702886, 43.40507962812819],
                        [39.978385315209174, 43.40504867514896],
                        [39.97867533648392, 43.40503832426452],
                        [39.97896535775866, 43.40504867514896],
                        [39.97925258626495, 43.40507962812819],
                        [39.97953425611887, 43.40513088513935],
                        [39.97980765494716, 43.40520195260014],
                        [39.98007014999875, 43.40529214616037],
                        [39.98031921349086, 43.40540059728997],
                        [39.98055244694564, 43.40552626164022],
                        [39.980767604283464, 43.40566792909777],
                        [39.980962613450636, 43.40582423543469],
                        [39.98113559637325, 43.40599367544269],
                        [39.98128488704519, 43.406174617424874],
                        [39.98140904757597, 43.40636531890601],
                        [39.98150688204379, 43.406563943409814],
                        [39.98157744802015, 43.40676857814206],
                        [39.98162006565471, 43.40697725240917],
                        [39.981634324232715, 43.40718795659515],
                        [39.98162008614128, 43.40739866151407],
                        [39.981577488205986, 43.40760733795182],
                        [39.981506940384584, 43.407811976209004],
                        [39.981409121829714, 43.40801060545656],
                        [39.98128497435835, 43.408201312717985],
                        [39.98113569339045, 43.40838226129486],
                        [39.980962716443535, 43.40855170845851],
                        [39.98076770929411, 43.40870802223705],
                        [39.98055254993854, 43.40884969713623],
                        [39.98031931050806, 43.40897536864213],
                        [39.98007023731192, 43.40908382636641],
                        [39.9798077292009, 43.409174025706925],
                        [39.97953431445966, 43.40924509791148],
                        [39.97925262645079, 43.40929635844756],
                        [39.97896537824522, 43.40932731359744],
                        [39.97867533648392, 43.40933766521482]
                    ]
                ]
            }
        }
    ]
}