JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="yt" style="width: 100vw; height: 100vh;"></div>
JavaScript
var myMap, mapName, startAdd, finishAdd, dotsCountTo, dotsCountFrom, allTime = 0;
ymaps.ready(function () {
myMap = new ymaps.Map("yt", {
center: [50.584957,36.671303],
zoom: 15,
controls: ["fullscreenControl", 'typeSelector']
});
ymaps.geoXml.load('http://vmaysov.ru/public/tracks/28.08.2015_17_57_33.gpx').then(function (res) {
res.geoObjects.each(function (item) {
var i = 0;
for(i; i < item.getLength(); i++) {
var timeStart = new Date(item.get(i).properties._db.metaDataProperty.gpxStartTime), timeEnd = new Date(item.get(i).properties._db.metaDataProperty.gpxEndTime), l = item.getLength()-1;
allTime += Math.floor((timeEnd.getTime()-timeStart.getTime())/(1000*60));
}
//console.log(item.get(0).properties);
mapName = item.get(0).properties._db.description;
dotsCountTo = item.get(0).properties._db.metaDataProperty.gpxPoints.length - 1;
dotsCountFrom = item.get(l).properties._db.metaDataProperty.gpxPoints.length - 1;
startAdd = new ymaps.Placemark([item.get(0).properties._db.metaDataProperty.gpxPoints[0].lat,item.get(0).properties._db.metaDataProperty.gpxPoints[0].lon], {
hintContent: 'Start',
balloonContent: '<h3>Трек «' + mapName + '»</h3><strong>Пройдено</strong>: 22 км<br /><strong>Скорость</strong>:<br /><em>средняя в движении</em> — 22 км/ч,<br /><em>максимальная</em> — 45 км/ч<br /><strong>Время в движении</strong> — ' + allTime + ' минут'
}, {
preset: 'islands#greenDotIcon'
});
finishAdd = new...