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

Многие интересуются как можно использовать 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

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

  • Гость: Что то Ваш пример кода не работает, и ещё как Вы свойство изображения посмотрели?
  • Гость: Пример исправил. В браузере Opera в контекстом меню есть пункт Свойства изображения. Если посмотреть свойства в Вашем браузере нельзя можно посмотреть исходный код страницы, там в строке параметра var mapType содержится адрес папки с изображениями.
  • Гость: Пример реализации собственной карты с кнопкой собственного типа карты <a href="http://webmaps.t35.com/mymap.html" rel="nofollow">http://webmaps.t35.com/mymap.html</a>
  • Гость: А как можно определить координаты на такой карте? Хочу обозначить некоторые объекты на своей карте города разбитой при помощи gmapupload.com
  • Гость: Поддерживаю последний вопрос. Как определить координаты та загруженной карте??
  • Гость: Скажите, а на созданную таким образом карту, можно как-то точки ставить с описанием объектов?
  • Гость: Метки с описанием ставить можно обычным способом, т.к. карта строиться с помощью API Яндекс.Карт. Единственная проблема - координаты.Центр здесь расположен в координатах 0,0. Нужно пересчитывать координаты. Для создания своей карты могу посоветовать программу для подготовки слоя тайлов для API Яндекс.Карт <a href="http://webmap-blog.ru/yandex-maps/rabotaem-s-programmoj-podgotovki-sloya-tajlov-dlya-api-yandeks-kart" rel="nofollow">http://webmap-blog.ru/yandex-maps/rabotaem-s-programmoj-podgotovki-sloya-tajlov-dlya-api-yandeks-kart</a> - это заметка о ней на блоге, саму программу можно загрузить по адресу <a href="http://api.yandex.ru/maps/jsapi/doc/dg/concepts/ymapstiler.xml" rel="nofollow">http://api.yandex.ru/maps/jsapi/doc/dg/concepts/ymapstiler.xml</a>
  • Гость: Спасибо автору за замечательный материал. Хочу создать подробную карту небольшого города, подавляющее большинство элементов которого отсутствует в Google и яндекс-картах. Уже не первую неделю ломаю голову ка это сделать. Уже думалось даже реализовывать во флеш, которого я пока еще толком и незнаю. Совершенно случайно наткнулся на Вашу статью, прочев бегло понял, что это то, что мне очень пригодится. В ближайшее время изучу ее более подробно. Спасибо большое за материал!
  • Гость: Спасибо! Очень помогло.