Клуб API Карт

Собственная карта, код миграции и зум.

iv.onischencko
16 декабря 2013, 12:33

 Всего несколько дней назад начал изучать API Яндекс карт. Поэтому не судите строго новичка.  

Задача: сделать карту со своим геопривязанным слоем, который будет появляться при масштабе 18 и выше (+ метки, + группы меток)
Нарезал тайлы Яндексовской программой Приложение "Подготовка слоя тайлов". Она сформировала map.html файл

 

<!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" xml:lang="ru" lang="ru">
<head>
<title>Мой слой</title>
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ABDrrFIBAAAAhtobcgIAORYydtbxbw8iLQ7IgO--PDqZmLkAAAAAAAAAAACeu4BAOweUxytUu3WyPAr1Z8tqKg==" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var options = {
tileUrlTemplate: ".//%z/%x/%y.png",
controls: {
typeControl: true,
miniMap: true,
toolBar: true,
scaleLine: true
},
scrollZoomEnabled: true,
mapCenter: new YMaps.GeoPoint(41.965715312053, 45.0331985393434),
backgroundMapType: YMaps.MapType.SATELLITE,
mapZoom: 22,
isTransparent: true,
smoothZooming: false,
layerKey: "my#layer",
mapType: {
name: "Мой слой",
textColor: "#000000"
},
copyright: ""
},
map = new YMaps.Map(document.getElementById("YMapsID")),
myData = new YMaps.TileDataSource(options.tileUrlTemplate, options.isTransparent, options.smoothZooming);

myData.getTileUrl = function (tile, zoom) {
return this.getTileUrlTemplate().replace(/%x/i, tile.x).replace(/%y/i, tile.y).replace(/%z/i, zoom);
}

var MyLayer = function () {
return new YMaps.Layer(myData);
}
YMaps.Layers.add(options.layerKey, MyLayer);

var mapLayers = options.backgroundMapType ? options.backgroundMapType.getLayers() : [],
myMapType = new YMaps.MapType(YMaps.jQuery.merge(mapLayers, [ options.layerKey ]), options.mapType.name, { textColor: options.mapType.textColor });

map.setCenter(options.mapCenter, options.mapZoom, myMapType);
if (options.copyright) {
map.addCopyright(options.copyright);
}

if (options.controls.typeControl) {
map.addControl(new YMaps.TypeControl([ myMapType, YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID ], [1, 2, 3]));
}

if (options.controls.miniMap) {
map.addControl(new YMaps.MiniMap());
}
if (options.controls.toolBar) {
map.addControl(new YMaps.ToolBar());
}
if (options.controls.scaleLine) {
map.addControl(new YMaps.ScaleLine());
}
if (options.scrollZoomEnabled) {
map.enableScrollZoom();
}
map.addControl(new YMaps.Zoom());
}
</script>
</head>
<body>
<div id="YMapsID" style="width:1200px;height:800px"></div>
</body>
</html>

  

и тайлы с маской %z/%x/%y.png с геопривязкой. Карта по этому файлу открывается и работает (правда zoom застревает на 18, хотя нарезка сделана до 22. Как исправить?). 

Но это API 1.0. Мне надо вывести карту в компонент Zh YandexMap для joomla 2.5.а он работает с API 2.0.

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

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Верхний рынок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script src="tiler-converter.js" type="text/javascript"></script>

<script type="text/javascript">
/**
* Забираем этот объект из выдачи приложения "Подготовка слоя тайлов".
* @see http://api.yandex.ru/maps/doc/jsapi/1.x/dg/concepts/ymapstiler.xml
*/
var options = {
tileUrlTemplate: "./%z/%x/%y.png",
controls: {
typeControl: true,
miniMap: true,
toolBar: true,
scaleLine: true
},
scrollZoomEnabled: true,
mapCenter: new YMaps.GeoPoint(41.965715312053, 45.0331985393434),
backgroundMapType: YMaps.MapType.NONE,
mapZoom: 17,
isTransparent: true,
smoothZooming: false,
layerKey: "my#layer",
mapType: {
name: "Верхний рынок",
textColor: "#000000"
},
copyright: "",
/**
* Диапазон доступных масштабов на данном слое карты.
* Эти два поля приложение не генерит,
* их нужно дописать вручную, чтобы корректно работал ZoomControl.
*/
layerMinZoom: 17,
layerMaxZoom: 22
};

ymaps.ready(function () {
// Передаем его в конструктор класса TilerConverter и получаем ссылку на карту.
var myMap = (new TilerConverter(options)).getMap();
});
</script>
<style type="text/css">
#YMapsID {
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div class="hero-unit">
<div class="container">
<p>Верхний рынок - API Яндекс.Карт 2.x</p>
<div id="YMapsID"></div>
</div>
</div>
</body>
</html>

 

Вставляю этот код в файл map_6.html - не работает.

Уважаемые гуру, подскажите в чем причина и куда копать.

 

 PS Отладка выдает ошибку на строке 6 "Cannot convert `YMaps.MapType` to object" понятно, нет объекта. изменил tileUrlTemplate: ".//%z/%x/%y.png" на tileUrlTemplate: "http://stavrinok.ru/vr_6/%z/%x/%y.png" - не помогает 

2 комментария
Подписаться на комментарии к посту

Причина ошибки - у вас отсутствует файл класса конвертора по указанному вами урлу.

Failed to load resource: the server responded with a status of 404 (Not Found) http://stavrinok.ru/vr_6/tiler-converter.js

Как я ответил на своем форуме (по компоненту), Вы скорее всего неправильно указали проекцию.

Я выложил 2 картинки - настройка и результат.

Все работает