Отображение на Яндекс.Картах файлов в формате GPX

Автор: | 09.04.2010

В API Яндекс.Картах существует возможность показа на карте файлов в формате  GPX, т.е. теперь можно показать на карте практически любой GPS-трек в этом формате.

GPX добавляются на карту по аналогии с YMapsML-файлами с помощью метода карты addOverlay().

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-1. Отображение на Яндекс.Картах файлов в формате GPX.</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
    <script type="text/javascript"> 
 
        YMaps.jQuery(function () {
 
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);           
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 14);
 
			// Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
            // Загрузка GPX-трека и добавление его на карту
            var gpx = new YMaps.GPX("http://webmap-blog.ru/gpx/20090430-085119.xml");
            map.addOverlay(gpx);
 
            // Обработчик неудачной загрузки GPX
            YMaps.Events.observe(gpx, gpx.Events.Fault, function (gpx, error) {
                alert("Ошибка: " + error);
            });
        });
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

Здесь вначале как обычно мы создаем карту и привязываем ее к созданному контейнеру, затем задаем центр карты и уровень масштаба, после этого загружаем GPX-трек и добавляем его на карту.

Если в процессе загрузки произойдет ошибка, мы выводим сообщение о ней, используя обработчик неудачной загрузки.

Еще необходимо обратить внимание на две детали: файл-GPX имеет расширение xml и загружаемый документ должен находиться в открытом доступе по HTTP-протоколу.

Посмотреть пример в действии.

Второй пример демонстрирует, как можно вывести на карту данные о путевых точках.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-2. Отображение  на Яндекс.Картах файлов в формате GPX</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
    <script type="text/javascript"> 
 
        YMaps.jQuery(function () {
 
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);           
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 14);
 
			// Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
         // Показывает в балунах меток, соответствующих объектам типа wpt, содержимое поля metaDataProperty.gpxMetaData.sym вместо description (изменяет шаблон содержимого меток).
         // Для объектов типа rte и trkseg показывает время в пути и длину маршрута, соответственно.
         var gpx = new YMaps.GPX("http://webmap-blog.ru/gpx/mypoints.xml");
         YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
         var styleWpt = {balloonContentStyle: {template: new YMaps.Template("<b>$[name]</b><p>$[metaDataProperty.gpxMetaData.sym]</p>")}},
         wayPoints = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "wpt"});
         YMaps.jQuery.each(wayPoints, function () { this.setStyle(styleWpt) });
 
    var styleRt = {balloonContentStyle: {template: new YMaps.Template("<b>$[name]</b><p>Проехали $[metaDataProperty.gpxMetaData.gpxDistance] за $[metaDataProperty.gpxMetaData.gpxDuration]</p>")}},
        tr = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "rte" || obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
    YMaps.jQuery.each(tr, function () {
        this.setStyle(styleRt)
        // рассчитывает расстояние и добавляет его значение в metaDataProperty.gpxMetaData 
        var distance = 0;
        for(var pts = this.getPoints(), i = 1, l = pts.length; i < l; i++) {
            distance += pts[i].distance(pts[i - 1]);
        }
        this.metaDataProperty.gpxMetaData.gpxDistance = YMaps.humanDistance(distance);
        // рассчитывает время в пути и добавляет его значение в metaDataProperty.gpxMetaData
        var startTime = xmlToDate(this.metaDataProperty.gpxMetaData.gpxStartTime),
            endTime = xmlToDate(this.metaDataProperty.gpxMetaData.gpxEndTime);
        // так как время старта и время финиша вычисляется в миллисекундах, 
        // а YMaps.humanDuration работает с секундами, разность (endTime - startTime) следует разделить на 1000 
        this.metaDataProperty.gpxMetaData.gpxDuration = YMaps.humanDuration((endTime - startTime) / 1000);
    });
});
// вспомогательная функция: извлекает значение времени из XML-формата (GPX)
function xmlToDate (val) {
    var date = new Date();
    if(!val)
        return date;
    date.setFullYear(val.substring(0, 4), (val.substring(5, 7) - 1), val.substring(8, 10));
    date.setHours(val.substring(11, 13), val.substring(14, 16), val.substring(17, 19), val.substring(20, 23));
    return date;
}
map.addOverlay(gpx);
 
             // Обработчик неудачной загрузки GPX
            YMaps.Events.observe(gpx, gpx.Events.Fault, function (gpx, error) {
                alert("Ошибка: " + error);
            });
        });
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

Посмотреть пример в действии

Изменить изображения для значка метки мы можем после полной загрузки документа.

Для этого необходимо создать обработчика события Load и в нем вызвать метод setStyle() для группы, в которой размещены метки:

YMaps.Events.observe( gpx , gpx .Events.Load, function ( gpx ) {
gpx .get(0).setStyle("default#phoneIcon");
});

Посмотреть пример в действии

Если в место данных о точках загрузить наш первоначальный трек, то щелкнув по нему,  мы увидим сообщение о времени пути и пройденном расстоянии.

Посмотреть пример в действии.

В конце данной заметки я хочу привести еще один пример.

В нем мы будем отображать на карте GPX-файлы, включая и выключая нужный, а также зададим стиль отображения для трека.

Приведу код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-4 Отображение  на Яндекс.Картах файлов в формате GPX</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
<style> 
 
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
 
 
 
#show_trek1 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin-bottom: 3px;
}
 
#show_trek2 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_trek3 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin: 3px 0;
}
 
 
    </style> 
 
 <script type="text/javascript"> 
 
 
  // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
 // Создание стиля для ломанной
            var s = new YMaps.Style();
            s.lineStyle = new YMaps.LineStyle();
            s.lineStyle.strokeColor = "FF0000AA";
            s.lineStyle.strokeWidth = "5";
            YMaps.Styles.add("example#CustomLine", s);
 
 
 var gpx1 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090430-085119.xml");
YMaps.Events.observe(gpx1, gpx1.Events.Fault, function (gpx1, error) {
                alert("Ошибка: " + error);
            });
 
YMaps.Events.observe( gpx1 , gpx1 .Events.Load, function ( gpx1 ) {
                 gpx1 .get(0).setStyle("example#CustomLine");
            });
 
 
YMaps.jQuery("#show_trek1").toggle(function(){
map.addOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 
 var gpx2 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090930-103240.xml");
YMaps.Events.observe(gpx2, gpx2.Events.Fault, function (gpx2, error) {
                alert("Ошибка: " + error);
            });
 
 
YMaps.jQuery("#show_trek2").toggle(function(){
map.addOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","normal");
});
 
 var gpx3 = new YMaps.GPX("http://webmap-blog.ru/gpx/20100405-173835.xml");
YMaps.Events.observe(gpx3, gpx3.Events.Fault, function (gpx3, error) {
                alert("Ошибка: " + error);
            });
 
 
YMaps.jQuery("#show_trek3").toggle(function(){
map.addOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","normal");
});
 
 })
 
    </script> 
</head> 
 
<body> 
    <table border="0" cellspacing="5" cellpadding="5"> 
  <tr> 
    <td><div id="YMapsID" style="width:800px;height:600px"></div></td> 
    <td valign="top"> 
    <p><span id="show_trek1" class="link">Трек-1</span></p> 
    <p><span id="show_trek2" class="link">Трек-2</span></p> 
   <p><span id="show_trek3" class="link">Трек-3</span></p> 
</td> 
  </tr>   
</table> 
</body> 
 
</html>

Здесь код похож на код примера из заметки API Яндекс.Карт Работаем с группой маркеров – версия 2 — отображение файлов формата YmapsML.

После определения карты и задания ее центра, уровня масштаба, элементов управления задается стиль отображения для ломаной example#CustomLine.

После этого, используя встроенный  фреймворк jQuery, мы подгружаем нужный GPX-файл, щелкая по соответствующей ссылке в меню.

Для первого трека после загрузки мы задаем наш стиль   example#CustomLine

Посмотреть пример в действии

Для написания заметки использовались следующие источники:

Описание класса YMaps.GPX

Пример Визуализация GPX-трека

Отображение на Яндекс.Картах файлов в формате GPX: 22 комментария

  1. Vladimir

    Пытаюсь загрузить трек с локального диска.
    Меняю строчку:
    var gpx = new YMaps.GPX(«file:///E:/Холм1.gpx»);
    Выдает ошибку: File scheme not allowed!

    1. admin Автор записи

      У Вас сразу три ошибки в коде:
      1. GPX-файл должен иметь расширение xml
      2. Не рекомендую использовать имена файлов на русском языке, могут возникнуть различные проблемы.
      3. Поскольку GPX-файл, также как YMapsML обрабатывается скриптом из API Яндекса, он должен быть доступен на чтение из интернета,
      т.е. нельзя использовать файлы с локального компьютера, их нужно выложить на какой-либо хостинг в интернет.

  2. Vladimir

    Заработало, правда пришлось запустить под вистой IIS для доступа к трекам по http! Пробовал открывать треки по ftp не работает. Спасибо.

  3. Павел

    Здравствуйте. Подскажите пожалуйста можно ли реализовать трек формата kml в Яндекс Картах?

  4. Павел

    А как мне из KML получить XML? Просто переименовать?

  5. Павел

    Пишет, что gpx tag not found. Я так понимаю, проблема в моем kml-xml фаиле? Просто я беру из SAS Планеты .ptl трек сохраняю в kml, а затем через блокнот переименовываю в .xml. Я делаю что-то не правильно?

  6. Анатолий

    Получил файл gpx из навигатора, в http://livegpstracks.com маршрут отображается и в Googl и Yandex картах. Хочу показывать треки на сайте. При сохранении в kml , а затем переименовывая в xml , сохраняется в формате, который не воспринимается Вашим методом. Скаченные файлы xml из Ваших примеров показываются. Подскажите почему?

    1. admin Автор записи

      Вероятнее всего проблема с кодировкой при сохранении файла. Лучше всего для этих целей использовать программу Notepad++.
      Перед сохранением выбрать пункт меню Кодировка — Преобразовать в UTF-8 без BOM.

  7. Анатолий

    Добрый день! Не понял рекомендации. Какой программой следует конвертировать файл gpx в kml? Я просто скачиваю свой загруженный ранее gpx трек из http://livegpstracks.com, как kml. Он уже в кодмровке UTF-8, кстати и исходный gpx тоже в этой кодировке, т.к. получен из iphone 4 программой Pedometr ultimate. Открывая Notepad++ свой файл и Ваш, вижу большую разницу: у Вас записи типа
    0.000000
    2009-09-30T10:32:58Z
    , а у моего : 37.575337,55.833136,0 37.575270,55.832918,0 и т.д.

  8. Анатолий

    Коды не передались.
    Ну, одним словом, они не идентичны по структуре.

  9. Алексей

    подскажите пожалуйста. как для чайника объясните куда этот код вообще загружать? у меня есть вот файлы с маршрутом. формата gpx. как увидеть этот маршрут на карте?

    1. admin Автор записи

      Нужно установить сервер локальный или одним из серверов в интернет (платных или бесплатных).

      Список бесплатных хостингов.

      html-файл для вывода карты положить в папку на сервере и обратиться к ней через браузер

      В файл маршрута в формате gpx необходимо загрузить на сервер, чтобы он был доступен из интернет

      Изменить путь в html-файле до gpx-файла на свой.

      Можно просмотреть gpx-файл в программе Google Земля (Google Earth)

  10. Алексей

    а как в программе гугл земля поменять карту как на яндексе можно выбрать типа спутник гибрид или схема?

  11. Алексей

    если я скину файл gpx сможет мне кто нибудь прописать его что бы было видно его как в примере? помогите пожалуйста. сам никак не могу разобраться со всем этим

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *