Интеграция с Яндекс Картами для отображения торговых точек на карте

ksannikov · 29 сен 2025 в 09:50

Всем привет!

Новое видео, в котором я покажу пример интеграции с Яндекс Картами.

Отобразим карту в интерфейсе ELMA365, в качестве точек на карте будут использованы элементы приложений с информацией об адресе. При клике на метку, будет открываться карточка элемента приложения в ELMA365.

Все подробности в ролике, а ниже код, который был использован в видео.

Код из вкладки скрипты на форме, где необходимо отобразить карту

Код:


interface retail_outlet_data {
    name: string,
    href: string,
    geo: number[]
}

function getData(): retail_outlet_data[] {
    return ViewContext.data.retail_outlets_data
}

async function onInit(): Promise<void> {
    ViewContext.data.show_loader = true
    let data: retail_outlet_data[] = []
    const curr_company = await Application.search().where(f => f.__id.eq(Context.data.__id)).first()
    const retail_outlets = await Namespace.app.retail_outlets.search().where((f, g) => g.and(
        f.__deletedAt.eq(null),
        f.address.neq(null),
        f.geo_lat.neq(null),
        f.geo_lon.neq(null),
        f.company.link(curr_company!)
    )).size(10000).all()

    if (retail_outlets.length) data = retail_outlets.map(f => {
        return {
            name: f.data.__name,
            href: `./(p:item/_clients/retail_outlets/${f.id})`,
            geo: [Number(f.data.geo_lat), Number(f.data.geo_lon)]
        }
    })
    ViewContext.data.retail_outlets_data = data
}

function hideLoader() {
    ViewContext.data.show_loader = false
}

Код из виджета "Код" для инициализации карты:

HTML:

<head>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_КЛЮЧ_API&lang=ru_RU"></script>
</head>


<script>
    window.setTimeout(() => {
        ymaps.ready(init);
    }, 3000)
    function init(){
        // Создание карты.
        var myMap = new ymaps.Map("map", {
            center: [55.7, 37.6],
            zoom: 10
        });
        // создание меток
        const list = <%= Scripts%>.getData()
        for(let item of list){
            const newPlacemark = new ymaps.Placemark(
                item.geo,
                {
                    iconCaption:
                        item.name,
                },
                {
                    preset: "islands#redDotIconWithCaption",
                }
            )
            // слушатель на клик по метке, открываем карточку в элме
            newPlacemark.events.add('click', function () {
                const link = document.querySelector('#link_for_view')
                link.href = item.href
                link.click()
            });
            myMap.geoObjects.add(newPlacemark);
        }
        //скрываем лоадер после загрузки
        <%= Scripts%>.hideLoader()
    }
</script>

<div id="map" style="width: 100%; height: 100%"></div>
<a id="link_for_view"></a>

Код для Loader'a:

HTML:

<style>
    .loader {
        width: 50px;
        height: 50px;
        border: 5px solid #6ebeff;
        border-bottom-color: #337AB7;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    .info_block_loader {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
</style>

<% if (ViewContext.data.show_loader) { %>
    <div class="info_block_loader">
        <span class="loader"></span>
        <p style="margin-top: 5px; font-weight: bold">Карта загружается</p>
    </div>
<% } %>

Еще больше полезной информации в ТГ канале WhatDaELMA365

Интеграция с Яндекс Картами для отображения торговых точек на карте

ksannikov Участник