Связка Leaflet Maps и ModxRevo для сайта

Добавление Leaflet и Openlayers бибилиотеки на страницу:

lib/leaflet.css    Скачать
lib/leaflet.js    Скачать
    
script src=http://www.openlayers.org/api/OpenLayers.js
< !--Leaflet-->
    Style:  lib/leaflet.css
    Script: lib/leaflet.js
< !--Leaflet-->

    

Создаем Доп.поля в modx

    
        $name = 'tvname';  
        // map_lat , map_lng , map_text , map_link , map_img
        $tempID = '1'; 
        // ID шаблонов, для которых доступна,
        if (!$tv = $modx->getObject('modTemplateVar', array('name' => $name))) {
            $tv = $modx->newObject('modTemplateVar');
        }
        $tv->fromArray(array(
            'name'         => $name,     
            // map_lat , map_lng , map_text , map_link , map_img
            'type'         => 'text',     
            // text , text , text , text , image
            'caption'      => 'Подпись', 
            // Широта , Долгота , Описание , Ссылка , Картинка
            'description'  => 'Описание', 
            'category'     => 0 // привязка к категории по ID
        ));
        $tv->save();
        $tvs[] = $tv->get('id').'-'.$tempID; 
    

Создаем чанк для вывода меток на карту

    
L.marker([ [[+tv.map_lat]],
            [[+tv.map_lng]] 
           ],
           {icon: customIcon}).addTo(map).bindPopup('<img src="[[+tv.map_img]]" style="width:100%" alt=""><br/>
           [[+tv.map_text]]<br/><a href=\"[[+tv.map_link]]\">Название</a>');
    

Создаем js функцию вида :

    
 function AddMap() {
         var map = L.map('map').setView([53.710, 26.873],7);
         //#map  ,  широта и долгота, масштаб
         //Координаты центрирования карты
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var customIcon = L.icon({
            iconUrl: 'pathToIcon/image.png',iconSize:[40, 40], // 
        });
        //Своя иконка для отображения на карте

[[!pdoResources?
    &parents=`1`
    &tpl=`map_item`
    &limit=`0`
    &includeTVs=`map_lat,map_lng,map_text,map_link,map_img`
]]



L.marker([ [[+tv.map_lat]],
           [[+tv.map_lng]]
           ],
           {icon: customIcon}).addTo(map).bindPopup('<img src="[[+tv.map_img]]" style="width:100%" alt=""><br/>
           [[+tv.map_text]]<br/><a href=\"[[+tv.map_link]]\">Название</a>');
  

}
    

И вешаем обработчик на body: onload="AddMap()"

    
<body onload="AddMap();">
   

В результате получаем динамически наполняемые метки ( в виде ресурсов ) и вывод примерно такого вида:

Тэги:

Комментарии (0)


Оставить комментарий

Success/Error Message Goes Here

TOP