Создание собственной карты с использованием API Яндекс.Карт

Автор: | 24.05.2009

Многие интересуются как можно использовать API Яндекс.Карт для создания собственной карты?

В нескольких заметках на своем блоге я подробно рассмотрю данный вопрос.

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

В нем указывается источник данных для слоя карты с помощью класса YMaps.TileDataSource.

Конструктор данного класса принимает следующие параметры:

tileUrlTemplate — шаблон, по которому строится url тайла;

isTransparent — загружаемые тайлы прозрачны;

isPng — загружаемые изображения тайлов имеют png формат.

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

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

Файлы с кусочками изображений необходимо переименовать соответствующим образом , например так tile-zum-num.jpg

Здесь zum – уровень масштаба, num – номер тайтла по порядку.

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

В качестве изображения я использую фотографию автомобиля Porsche Cayenne размером 1600х1200 пикселей.

Для создания набора тайтлов воспользуемся бесплатным сервисом Gmap Uploader расположенном по адресу http://gmapuploader.com

Пользоваться данным сервисом очень легко.

На главной странице сервиса нужно ввести Ваш адрес электронной почты, выбрать файл для загрузки в формате jpg, png или gif и нажать на кнопку Send для начала загрузки файла.

Через некоторое время (продолжительность зависит от размера загружаемого изображения) появиться страница с загруженным изображением в интерфейсе Google Maps.

И три ссылки внизу изображения.

Для моего примера они имеют следующий вид:

Link: http://gmapuploader.com/view/bsnYw5ReKw

Full Screen: http://gmapuploader.com/iframe/bsnYw5ReKw

Deep Zoom URL: http://dz.gmapuploader.com/bsnYw5ReKw.xml

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

В моем случае содержимое данного файла:

<Image TileSize=»256″ Overlap=»0″ Format=»jpg»><Size Width=»2048″ Height=»2048″ />

</Image>

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

Сделать это просто, нужно посмотреть свойства одного из фрагментов полученного изображения (Свойства рисунка) , например в моем случае http://mt2.gmapuploader.com/tiles/bsnYw5ReKw/tile-3-26.jpg

Нам сразу ясно что все файлы хранятся в папке по адресу http://mt2.gmapuploader.com/tiles/bsnYw5ReKw/

Теперь необходимо написать код для загрузки набора тайтлов в интерфейс Яндекс.Карт.

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

<html xmlns=»http://www.w3.org/1999/xhtml»><head>

<title>Примеры YMapsML. Своя карта с использованием сервиса Gmap Uploader.</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<script src=»http://api-maps.yandex.ru/1.0/index.xml?key=AIW0o0kBAAAAkwyUMwMAEkDz8ddCkU0UnlyLEu4ddFBXhQQAAAAAAAAAAAA1Md4ULCo5QbciEo5T26eV1lhuEQ==» type=»text/javascript»></script>

<script type=»text/javascript»>

var map;

function init () {

map = new YMaps.Map(document.getElementById(«YMapsID»));

map.setCenter(new YMaps.GeoPoint(0,0),1);

map.enableScrollZoom();

map.addControl(new YMaps.SmallZoom());

var myData = new YMaps.TileDataSource(«http://mt0.gmapuploader.com/tiles/bsnYw5ReKw/», false, false);

myData.getTileUrl = function (tile, zoom) {

return this.getTileUrlTemplate() + «tile-» + zoom + «-» + (tile.y * Math.pow(2, zoom) + tile.x) + «.jpg»;

}

map.addCopyright(‘Угольников Сергей’);

map.setType(new YMaps.MapType([new YMaps.MapLayer(myData)], ‘Пример карты’, {minZoom:1, maxZoom:3}));

}

</script>

</head>

<body onload=»init();»>

<div id=»YMapsID» style=»height:100%; width:100%;»></div>

</body>

</html>

Поясню, на что здесь следует обратить внимание.

Строкой map.setCenter(new YMaps.GeoPoint(0,0),1); задается центр карты на первом уровне масштаба.

Строка var myData = new YMaps.TileDataSource(«http://mt0.gmapuploader.com/tiles/bsnYw5ReKw/», false, false); — служит для задания источника тайтлов и значения параметров isTransparent = false — загружаемые тайлы не прозрачны, isPng= false — загружаемые изображения тайлов не имеют формат png.

В строке myData.getTileUrl = function (tile, zoom) {return this.getTileUrlTemplate() + «tile-» + zoom + «-» + (tile.y * Math.pow(2, zoom) + tile.x) + «.jpg»;

}

Мы задаем правила для формирования имени файла для конкретного тайтла на соответствующем уровне масштаба.

Строкой  map.addCopyright(‘Угольников Сергей’); добавляем копирайт на нашу карту.

И строка map.setType(new YMaps.MapType([new YMaps.MapLayer(myData)], ‘Пример карты’, {minZoom:1, maxZoom:3})); служит для указания нового типа карты с названием Пример карты, тамже мы вводим ограничение на изменение уровня масштаба от 1 до 3.

Загружаем пример в браузере и наблюдаем результат

Своя карта с использованием сервиса Gmap Uploader

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

Создание собственной карты с использованием API Яндекс.Карт: 9 комментариев

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

      Пример исправил. В браузере Opera в контекстом меню есть пункт Свойства изображения. Если посмотреть свойства в Вашем браузере нельзя можно посмотреть исходный код страницы, там в строке параметра var mapType содержится адрес папки с изображениями.

  1. Roman

    А как можно определить координаты на такой карте? Хочу обозначить некоторые объекты на своей карте города разбитой при помощи gmapupload.com

  2. Alex

    Поддерживаю последний вопрос. Как определить координаты та загруженной карте??

  3. Дмитрий

    Скажите, а на созданную таким образом карту, можно как-то точки ставить с описанием объектов?

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

      Метки с описанием ставить можно обычным способом, т.к. карта строиться с помощью API Яндекс.Карт. Единственная проблема — координаты.Центр здесь расположен в координатах 0,0. Нужно пересчитывать координаты.

      Для создания своей карты могу посоветовать программу для подготовки слоя тайлов для API Яндекс.Карт http://webmap-blog.ru/yandex-maps/rabotaem-s-programmoj-podgotovki-sloya-tajlov-dlya-api-yandeks-kart — это заметка о ней на блоге, саму программу можно загрузить по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/ymapstiler.xml

  4. Андрей

    Спасибо автору за замечательный материал.
    Хочу создать подробную карту небольшого города, подавляющее большинство элементов которого отсутствует в Google и яндекс-картах.
    Уже не первую неделю ломаю голову ка это сделать. Уже думалось даже реализовывать во флеш, которого я пока еще толком и незнаю.
    Совершенно случайно наткнулся на Вашу статью, прочев бегло понял, что это то, что мне очень пригодится.
    В ближайшее время изучу ее более подробно.
    Спасибо большое за материал!

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

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