Используем свою карту в компоненте Яндекс.Карт для Joomla 1.5

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

В этой заметке я расскажу, как можно использовать свою карту в компоненте Яндекс.Карт для 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: "Занимательная веб-картография http://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. Пробовал делать одинаковые, но не помогло.
  • Сергей Расторгуев: а для Joomla 3.2 этот способ работает?
  • Сергей Угольников: Для Joomla 3.2 нужно использовать компонент Zh YandexMap - http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/maps/16781