Многие интересуются как можно использовать 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.
Загружаем пример в браузере и наблюдаем результат
Посмотреть пример в действии можно здесь.
Что то Ваш пример кода не работает, и ещё как Вы свойство изображения посмотрели?
Пример исправил. В браузере Opera в контекстом меню есть пункт Свойства изображения. Если посмотреть свойства в Вашем браузере нельзя можно посмотреть исходный код страницы, там в строке параметра var mapType содержится адрес папки с изображениями.
А как можно определить координаты на такой карте? Хочу обозначить некоторые объекты на своей карте города разбитой при помощи gmapupload.com
Поддерживаю последний вопрос. Как определить координаты та загруженной карте??
Скажите, а на созданную таким образом карту, можно как-то точки ставить с описанием объектов?
Метки с описанием ставить можно обычным способом, т.к. карта строиться с помощью 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
Спасибо автору за замечательный материал.
Хочу создать подробную карту небольшого города, подавляющее большинство элементов которого отсутствует в Google и яндекс-картах.
Уже не первую неделю ломаю голову ка это сделать. Уже думалось даже реализовывать во флеш, которого я пока еще толком и незнаю.
Совершенно случайно наткнулся на Вашу статью, прочев бегло понял, что это то, что мне очень пригодится.
В ближайшее время изучу ее более подробно.
Спасибо большое за материал!
Спасибо! Очень помогло.