Блог API Яндекс.Карт

июль 2012
Пример: автоматическое переключение на Народную карту
2 июля 2012, 15:00

 

===Пример не актуален. В версии API 2.0.20 переключение на Народную карту по умолчанию включено у всех пользователей. Отключается опцией yandexMapAutoSwitch.===

В марте на Яндекс.Картах появился новый слой — Народная карта. Если нет подробной схемы какого-нибудь города, при приближении карты вы автоматически переключаетесь на «народный» слой.

В API Яндекс.Карт пока нет такой возможности, и в клубе часто спрашивают, как реализовать переключение в своем проекте.  и  написали и выложили пример, который поможет вам быстро сделать «проваливание» в Народную карту у себя на сайте.

Код на гитхабе.

Посмотреть пример в новом окне.

Надеемся, это сильно упростит вам задачу. Ждем примеры ваших проектов!

примеры,статьи,народная карта,API 2.0
Пример: загрузка контента в балун с помощью AJAX
5 июля 2012, 15:43

Довольно распространенный вопрос в клубе разработчиков API Яндекс.Карт «Как загружать контент в балун с помощью AJAX»?. Мы сделали пример, чтобы сразу ответить на все вопросы.

При клике по метке появляется текст прелоадера «идет загрузка», который после получения данных заменяется на контент. Для наглядности мы сделали таймаут ≈ 3 секунды. А для того, чтобы пример был интереснее, добавили ссылки «увеличить» и «вернутся», которые изменяют масштаб карты.

Посмотреть пример в новом окне.

В качестве серверной части в примере используется http-геокодер.

1 комментарий
балун,примеры,статьи,ajax,API 2.0
Создание и отображение XML-файла с метками заданного стиля
11 июля 2012, 14:32
Задача отображения геообъектов на карте с помощью АПИ является одной из самых распространенных. Существует два способа ее решения:

1. С помощью javascript-функций API Яндекс.Карт.
2. С помощью xml-файла специального формата.


В этой статье мы рассмотрим второй способ добавления меток на карту.

Для этого потребуется создать два файла:
html-страница, на которой размещен код создания карты и YMapsML-файл с описанием меток. Также нам нужно будет картинка, если мы планируем использовать для отображения меток собственные значки.

ya

Создание XML-файла с метками

Рассмотрим уже созданный XML-файл с метками: http://ymapsapi.narod.ru/examples/geoxml/ya.ymapsml.

Этот файл состоит из двух основных частей, вложенных в корневой элемент ymaps:
repr:Repsentation — здесь задается представление.
ymaps:GeoObjectCollection — здесь описываются географические данные (в нашем случае метки).
Вы можете изучить подробную схему YMapsML-документа в документации.

Обратите внимание, для элементов важно понятие namespace, имена и значения задаются атрибутами xmlns для корневого элемента так:

<ymaps:ymaps xmlns:gml="http://www.opengis.net/gml"xmlns:ymaps="http://maps.yandex.ru/ymaps/1.x"xmlns:repr="http://maps.yandex.ru/representation/1.x">


Это значит, что для того или иного набора тегов будет использоваться соответствующая схема (правила описания этого тега).

Задание меток

Для того, чтобы описать метку (точку), в тег ymaps:GeoObjectCollection нужно описать вложенный тег:

<gml:featureMember>
    <ymaps:GeoObject>
        <gml:description>
            Москва, ул. Станиславского, дом 21, строение 3
        </gml:description>
        <gml:name>
            Офис Яндекса на Станиславского
        </gml:name>
        <gml:Point>
            <gml:pos>37.662336 55.745336</gml:pos>
        </gml:Point>
    <ymaps:style>#yaIcon</ymaps:style>
    </ymaps:GeoObject>
</gml:featureMember>


Подробнее о тегах внутри:
ymaps:GeoObject — непосредственно описание геообъекта (точки).
gml:description — описание геообъекта.
gml:name — название объекта.
gml:Point — указание типа геообъекта «метка».
gml:pos — географические координаты в формате «долгота широта» (через пробел), например «37.662335 55.745376».
ymaps:style — идентификатор стиля данной метки.

Географические координаты вы можете получить, если у вас есть почтовый адрес, задав http-запрос к Геокодеру, либо с помощью инструмента определения координат.

Задание стиля метки

Стили меток задаются в теге repr:Repsentation

<repr:Representation>
        <repr:Style gml:id="yaIcon">
                <repr:iconStyle>
                    <repr:href>http://maps.yandex.ru/blocks-desktop/ymaps-geolocation/__preset/_id/ymaps-geolocation__preset_id_yandex-ru.png</repr:href>
                    <repr:size x="24" y="24"/>
                    <repr:offset x="-12" y="-12"/>
                </repr:iconStyle>
            <repr:balloonContentStyle>
                <repr:template>#yaTemplate</repr:template>
            </repr:balloonContentStyle>
        </repr:Style>

        <repr:Template gml:id="yaTemplate">
            <repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
        </repr:Template>
    </repr:Representation>


В этом теге:
repr:iconStyle — описание значка для метки, оно содержит тег repr:href — ссылка на картинку со значком. Путь до картинки нужно указывать полностью, с «http://..». А так же repr:size — размер картинки и repr:offset — смещение значка от точки на карте. Если у значка есть тень, то в тег repr:iconStyle нужно вложить тег repr:shadow, в котором также нужно указать repr:href, repr:size и repr:offset.
repr:balloonContentStyle — стиль содержимого всплывающего окна (balloon) по клику на метке, содержит тег repr:template (с маленькой буквы) — идентификатор шаблона.
Сам же шаблон задается с помощью repr:Template (с большой буквы), в данном случае значения $name и $description подставляются в подзаголовок, и текст под ним:

<repr:Template gml:id="yaTemplate">
<repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
</repr:Template>

Визуализация XML-файла на карте

Созданный YMapsML-файл можно визуализировать с помощью Javascript API только в том случае, если он будет доступен по http.

В начале подключим API Яндекс.Карт. Важно, чтобы у нас был подключен модуль geoXml.load. Данный метод позволяет загружать XML-файл с географическими данными и преобразует его в коллекцию GeoObjectCollection.

Он уже входит в пакет package.full, но в нашем примере мы используем пакеты package.standard + package.geoXml. Тем самым мы уменьшаем размер, загружаемого кода API.

В итоге мы получаем:


<!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>Примеры. Визуализация xml-файла.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.standard,geoXml.load&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init() {
    var map = new ymaps.Map("map", {
        center: [55.734046, 37.588628],
        zoom: 10
    });
    ymaps.geoXml.load('http://ymapsapi.narod.ru/examples/geoxml/ya.ymapsml')
    .then(function (res) {
        map.geoObjects.add(res.geoObjects);
    });
}
</script>
</head>
<body>
<h2>Примеры. Визуализация xml-файла.</h2>
<div id="map" style="width: 800px; height: 400px"></div>
</body>
</html>



Вы можете посмотреть что получилось в примере.
1 комментарий
примеры,статьи,метки,YMapsML,API 2.0
Пример: разворачиваем карту во весь экран
12 июля 2012, 17:00

Когда на странице сайта очень много информации, приходится размещать маленькую карту. Чтобы посетителям сайта было удобнее пользоваться картой, мы предлагаем добавить кнопку или ссылку, при клике на которую карта будет увеличиваться.

В нашем примере добавлена кнопка «Развернуть карту во весь экран».

Посмотреть пример в новом окне.

1 комментарий
примеры,API 2.0
Еще один доклад о размещении большого количества объектов на карте
13 июля 2012, 14:57
Недавно мы уже выкладывали видеозапись и презентацию доклада Антона Корзунова () о том, как разместить на карте тысячи объектов и не перегрузить при этом браузер.

25 мая Антон выступил на конференции DUMP в Екатеринбурге с обновленным докладом на эту же тему. Вы можете посмотреть видеозапись выступления и презентацию.
6 комментариев
презентации,видео,конференции,много объектов на карте,API 2.0
Построение маршрута по заданным точкам
17 июля 2012, 15:04
Блог «Занимательная веб-картография» продолжает публиковать интересные статьи и примеры использования API Яндекс.Карт.

На этот раз подробно описано, как строить маршрут по заданным точкам.

Если вы написали статью об API Яндекс.Карт, которая могла бы быть полезна другим разработчикам, присылайте ее нам в комментарии к любому посту или на адрес ymapsapi@ya.ru. Мы ее изучим и опубликуем в этом блоге с обязательными упоминаниями и ссылками на автора.
примеры,маршрутизация,API 2.0,статьи,статьи пользователей
Расскажем про кластеризацию на Я.Субботнике
18 июля 2012, 14:44

28 июля в Москве в офисе Яндекса состоится Я.Субботник.

В 14:40 можно будет послушать доклад «Кластеризатор в JS API Яндекс.Карт».

Участие бесплатное, но нужно зарегистрироваться.

Регистрация на мероприятие заканчивается 27 июля в 18:00 по московскому времени. Количество мест ограничено.

И видеоролик для привлечения внимания

3 комментария
кластеризатор,конференции,Я.Субботник,анонсы,API 2.0
Рисование ломаной линии на карте
25 июля 2012, 14:51
В блоге «Занимательная веб-картография» появилась подробная статья с примерами о том, как рисовать полилинии (polylines) в API 2.0.

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

Дополнительный бонус от автора — видео, демонстрирующее работу получившегося редактора линий!



4 комментария
примеры,статьи,API 2.0,ломаные,статьи пользователей
Новый карточный дом
25 июля 2012, 21:12
В честь пятницы у нас неформальный пост радости.

Вся команда Яндекс.Карт и API, переехала в новый офис в бизнес-центр «Мамонтов».





Icons by: FastIcon.com



Развесили метки на стенах.



Разложили ридибундусы.



Расставили роботов.



Поставили знаки.



Свалили в кучу коробки.



Сделали вид, что у нас есть ресторан.



Не забыли забрать с собой знаменитую вазу
c 15000 ревизии.




И купили крайне важную
в любом хозяйстве вещь — глобус!





И теперь счастливые и довольные мы можем бросить все силы на улучшение наших сервисов.


Команда API Яндекс.Карт
6 комментариев
неформальное
Яндекс.Карты на Я.Субботнике в Москве — присоединяйтесь к трансляции
28 июля 2012, 11:49

Прямо сейчас в Москве проходит Я.Субботник. Если вы не смогли приехать, но очень хотите посмотреть и послушать все интересное, что тут рассказывают, для вас организована онлайн-трансляция.

Напоминаем, что в 14:40 будет рассказ «Кластеризатор в JS API Яндекс.Карт». А в 17:00 Константин Заикин проведет мастер-класс про MapKit (мобильный API) Яндекс.Карт для WP7.

Подключайтесь! Тут очень интересно.

11 комментариев
mapkit,конференции,Я.Субботник,анонсы,API 2.0
API Яндекс.Карт версия 2.0.13
31 июля 2012, 20:52

Опубликована новая версия API Яндекс.Карт. Она доступна по адресу api-maps.yandex.ru/2.0. Если вы хотите продолжить использование предыдущей версии, указывайте api-maps.yandex.ru/2.0.10.

Новые возможности:
— Координатные системы географическая и декартова.
— Построение геодезических линий (опция geodesic для геообъектов).
— Расширена поддержка мобильных браузеров. Теперь API полноценно работает в альтернативных браузерах на платформах iOS и Android 4.0.
— Редактор маршрутов и кнопка построения маршрутов.
— Расчет bounds в коллекциях геообъектов.

Новые возможности кластеризатора:
— Метод getObjectState.
— Новые опции балуна кластера — balloonWidth, balloonSidebarLayout и другие.
— Поле в состоянии кластера activeObject, в котором хранится ссылка на активный объект кластера.

Добавлено:
— При загрузке YMapsML повторяющиеся теги в metaDataProperty преобразовываются в массив.
— Иконки poiIcons добавлены в пакет package.standard.
— Опция noPopup в SearchControl.
— Метод addCopyrights у map.copyrights и интерфейс ICopyrightsProvider.
— Типы карты PMAP и PHYBRID поддерживаются в YMapsML.
— Хранилища фабрик оверлеев.
— Параметр scale для coordSystem.Cartesian.
— Метод getAll у option.Manager.
— Можно использовать спрайты для собственных иконок (добавлена опция imageClipRect для меток).

Исправлено:
— Метод splice класса GeoObjectArray теперь возвращает список удаленных элементов.
— Неправильная обработка undefined-переменных в текстовых шаблонах.
— Ошибка при масштабировании графики в браузере Internet Explorer.
— При отрисовке меток на canvas игнорировалась тень.
— Ошибка при удалении свернутой миникарты.
— Ошибка при установке опций hasHint и hasBalloon у хотспотного слоя.
— Ошибка при удалении несуществующего элемента из тулбара.
— Ошибка при вызове getState у пустой линейки.
— Ошибка при переключении типа карты свернутой миникарты.
— Ошибка при вызове map.destroy.
— Некорректная отрисовка тени балуна при вызове setData в открытом балуне.
— Артефакты рисования прямогольников в браузере Internet Explorer.
— Некорректная работа опции pane для хинтов.
— Ошибка верстки элементов управления в браузере Internet Explorer.
— Ошибка обработки опции iconImageSize при отображении меток на canvas.
— Ошибки при повторном добавлении и удалении SearchControl.
— Неправильное время в статистике пробок для некоторых городов.
— Некорректный расчет некоторых bounds геометриями.
— Методы setState и getState у линейки работают с тем же форматом данных, что и API 1.х.
— Некорректная обработка опции zIndex после ее динамического изменения.
— Некорректная работа редактора геообъектов с фабрикой оверлеев interactiveGraphics.
— Геокодер не всегда правильно срабатывал в браузере Internet Explorer на страницах с кодировкой windows-1251.
— При вызове методов enable и disable у элемента управления «Кнопка» не бросались одноименные события.
— Ошибки верстки контрола поиска в браузере Opera 12.
— Ошибка при асинхронном подключении API в браузере Internet Explorer в случаях если страница берется из кэша.
— Не работало выставление опции balloonAutoPan в false для геообъектов.
— Некорректное удаление объектов через метод remove в кластеризаторе.

Команда разработчиков API Яндекс.Карт

обновление,API 2.0