Может так случиться, что вы живете в маленьком городке или поселке , который не представлен на Яндекс.Картах. И вы решили создать собственную карту.
В этой заметке я расскажу, как можно использовать свою карту в компоненте Яндекс.Карт для Joomla 1.5, загрузить сам компонент можно отсюда.
О работе с этим компонентом я уже рассказывал на своем блоге, смотрите заметку «Компонент яндекс карт для Joomla 1.5».
На первом этапе нужно подготовить растр или несколько растров с изображением будущей карты.
Второй этап, используя файл с изображением и программу для подготовки слоя тайлов , получить набор файлов, представляющей из себя исходное изображение разрезанное на равные участки размером 256 на 256 пикселей для каждого уровня масштаба карты.
О работе с программой подготовки тайлов Вы также можете прочитать на моем блоге в заметке «Работаем с программой подготовки слоя тайлов для API Яндекс.Карт».
Последний этап, мы должны провести исправления кода компонента и плагина к нему для использования созданной карты.
С начала мы внесем исправления в компонент.
В файл form.php, который находится по адресу: <папка установки Joomla>/administrator/components/com_yandexmaps/views/yandexmapsmap/tmpl/.
В нем находим строку, в которой определяются переменные для выбора типа отображения карты и элемента управления для переключения типа карты.
$option = array(0 => 'None', 1 => 'Default Map Types', 2 => 'Normal Map', 3 => 'Satellite Map', 4 => 'Hybrid Map', 5 => 'Physical Map', 7 => 'Default Map Types (Satellite Map)', 8 => 'Default Map Types (Hybrid Map)', 9 => 'Default Map Types (Physical Map)'); |
В нее через запятую дописываем параметр 10 =>’UserTypes’.
В результате стока должна иметь вид:
$option = array(0 => 'None', 1 => 'Default Map Types', 2 => 'Normal Map', 3 => 'Satellite Map', 4 => 'Hybrid Map', 5 => 'Physical Map', 7 => 'Default Map Types (Satellite Map)', 8 => 'Default Map Types (Hybrid Map)', 9 => 'Default Map Types (Physical Map)', 10 =>'UserTypes'); |
Сохраняем изменения в файле form.php
Открываем файл default.php, расположенный по адресу <папка установки Joomla>/components/com_yandexmaps/views/map/tmpl/
Находим в нем строку определения центра карты
$scriptheader .= ' map.setCenter(new YMaps.GeoPoint( '.$this->map->longitude.', ' .$this->map->latitude.'), '.$this->map->zoom.');' ."n"; |
Мы заменяем эту строчку следующим кодом:
$usertype = $this->map->typecontrol;
if($usertype == 10)
{
$scriptheader .= ' var options = {' ."n";
$scriptheader .= ' tileUrlTemplate: "http://webmap-blog.ru/files/new-map3/%z/tile-%x-%y.jpg",' ."n";
$scriptheader .= ' backgroundMapType: YMaps.MapType.MAP,' ."n";
$scriptheader .= ' isTransparent: true,' ."n";
$scriptheader .= ' smoothZooming: false,' ."n";
$scriptheader .= ' layerKey: "my#layer",' ."n";
$scriptheader .= ' mapType: {' ."n";
$scriptheader .= ' name: "Карта Балахны",' ."n";
$scriptheader .= ' textColor: "#000000"' ."n";
$scriptheader .= ' },' ."n";
$scriptheader .= ' copyright: "Занимательная веб-картография http://webmap-blog.ru"' ."n";
$scriptheader .= ' },' ."n";
$scriptheader .= ' myData = new YMaps.TileDataSource(options.tileUrlTemplate, options.isTransparent, options.smoothZooming);' ."n";
$scriptheader .= ' myData.getTileUrl = function (tile, zoom) {' ."n";
$scriptheader .= ' return this.getTileUrlTemplate().replace(/%x/i, tile.x).replace(/%y/i, tile.y).replace(/%z/i, zoom);' ."n";
$scriptheader .= ' }' ."n";
$scriptheader .= ' var MyLayer = function () {' ."n";
$scriptheader .= ' return new YMaps.Layer(myData);' ."n";
$scriptheader .= ' }' ."n";
$scriptheader .= ' YMaps.Layers.add(options.layerKey, MyLayer);' ."n";
$scriptheader .= ' var mapLayers = options.backgroundMapType ? options.backgroundMapType.getLayers() : [],' ."n";
$scriptheader .= ' myMapType = new YMaps.MapType(YMaps.jQuery.merge(mapLayers, [ options.layerKey ]), options.mapType.name, { textColor: options.mapType.textColor });' ."n";
$scriptheader .= ' map.addCopyright(options.copyright);' ."n";
$scriptheader .= ' map.setCenter(new YMaps.GeoPoint( '.$this->map->longitude.', ' .$this->map->latitude.'), '.$this->map->zoom.', myMapType);' ."n";
}
else
{
$scriptheader .= ' map.setCenter(new YMaps.GeoPoint( '.$this->map->longitude.', ' .$this->map->latitude.'), '.$this->map->zoom.');' ."n";
} |
Поясню что делает этот код.
В самом начале мы присваиваем переменной $usertype значение, выбранное в поле типа отображения карты, при задании параметров карты.
Мы проверяем это значение, если оно равно 10, то мы используем пользовательскую карту, а иначе Яндекс.Карту.
В переменной tileUrlTemplate задается адрес источника тайлов для нашей карты, я использую тайлы из примера к заметке «Работаем с программой подготовки слоя тайлов для API Яндекс.Карт».
Для нашего типа карты мы задаем название name: "Карта Балахны", цвет текста textColor: "#000000" и копирайт copyright: "Занимательная веб-картография https://webmap-blog.ru".
Сохраняем измененный файл default.php
Проверим работу компонента.
Переходим в режим администрирования и в настройках для нашей карты выставляем тип карты UserTypes, вводим соответствующие значения координат центра карты и начальный уровень масштаба, выставляем необходимые элементы управления.
Создаем ссылку в меню на нашу карту.
Загружаем страницу в браузере и наблюдаем
Все нормально работает.
Теперь изменим код для плагина, чтобы можно было вставлять нашу карту в статьи Joomla.
Файл для редактирования yandexmaps.php расположен по адресу <папка установки Joomla>/plugins/content/.
В нем мы также находим строку определения центра карты:
$output .= 'map'.$mC.'.setCenter(new YMaps.GeoPoint( '.$map->longitude.', ' .$map->latitude.'), '.$map->zoom.');' ."n"; |
И заменяем ее на следующий код:
$usertype = $map->typecontrol;
if($usertype == 10)
{
$output .= 'var options = {' ."n";
$output .= ' tileUrlTemplate: "http://webmap-blog.ru/files/new-map3/%z/tile-%x-%y.jpg",' ."n";
$output .= ' backgroundMapType: YMaps.MapType.MAP,' ."n";
$output .= ' isTransparent: true,' ."n";
$output .= ' smoothZooming: false,' ."n";
$output .= ' layerKey: "my#layer",' ."n";
$output .= ' mapType: {' ."n";
$output .= ' name: "Карта Балахны",' ."n";
$output .= ' textColor: "#000000"' ."n";
$output .= ' },' ."n";
$output .= ' copyright: "Занимательная веб-картография http://webmap-blog.ru"' ."n";
$output .= ' },' ."n";
$output .= ' myData = new YMaps.TileDataSource(options.tileUrlTemplate, options.isTransparent, options.smoothZooming);' ."n";
$output .= ' myData.getTileUrl = function (tile, zoom) {' ."n";
$output .= ' return this.getTileUrlTemplate().replace(/%x/i, tile.x).replace(/%y/i, tile.y).replace(/%z/i, zoom);' ."n";
$output .= ' }' ."n";
$output .= ' var MyLayer = function () {' ."n";
$output .= ' return new YMaps.Layer(myData);' ."n";
$output .= ' }' ."n";
$output .= ' YMaps.Layers.add(options.layerKey, MyLayer);' ."n";
$output .= ' var mapLayers = options.backgroundMapType ? options.backgroundMapType.getLayers() : [],' ."n";
$output .= ' myMapType = new YMaps.MapType(YMaps.jQuery.merge(mapLayers, [ options.layerKey ]), options.mapType.name, { textColor: options.mapType.textColor });' ."n";
$output .= 'map'.$mC.'.addCopyright(options.copyright);' ."n";
$output .= 'map'.$mC.'.setCenter(new YMaps.GeoPoint( '.$map->longitude.', ' .$map->latitude.'), '.$map->zoom.', myMapType);' ."n";
}
else
{
$output .= 'map'.$mC.'.setCenter(new YMaps.GeoPoint( '.$map->longitude.', ' .$map->latitude.'), '.$map->zoom.');' ."n";
} |
Он похож на код, используемый в компоненте с небольшим отличием.
Это определение переменной $usertype = $map->typecontrol;
И в тех строчках, где определяются параметры карты мы в место map используем строку ‘map’.$mC., где переменная $mC — id карты в списке карт компонента.
Теперь проверим работу плагина.
В любую из статей вставляем строку кода {yandexmaps view=map|id=1}
Здесь важны два параметра, это view – определяет будет показываться карта в статье полностью, либо в виде ссылки, при нажатии на которую появляется окно с картой (view=link); id – какая карта будет отображаться, задается id карты из списка в компоненте.
Смотрим на данную страницу
Для использование Вашей карты, а не из моего примера необходимо будет изменить путь к каталогу с тайлами, параметр tileUrlTemplate, в файлах default.php компонента и yandexmaps.php плагина.
Скачать измененные файлы form.php, default.php и yandexmaps.php
Почему-то указанный вариант у меня не сработал. Очень хочется сделать как у вас, но как ни пытался вывести свою карту, все равно выводиться карта Яндекс
Аналогичная проблема. Это может быть как-то связано, что на хостинге стоит mysql4? Давно, хотел версию сменить, но надо кучу дампов перезаливать.
Может быть этот вариант работал на версии com_yandexmaps_1.0.5, а на новой com_yandexmap_1.2.1 перестал. Попробую еще на старой сделать.
И на старой версии com_yandexmaps_1.0.5., и после переноса сайта на хостинг c БД версии 5 и php5.3 данный вариант не работает. Может быть ошибка в предложенном коде? Например, я заметил, что в файле form.php параметр пишется так UserTypes, а в default.php пишется без буквы S usertype. Пробовал делать одинаковые, но не помогло.