Добавление на карту GeoJSON файла из Конструктора карт

Open in CodeSandbox

В примере показано, как с помощью ObjectManager отобразить на карте данные, экспортированные из Конструктора карт. Для загрузки данных используется функция JQuery.getJSON(). Как только данные будут загружены, зададим для них нужные свойства (например, контент балуна) и затем добавим их в менеджер объектов.

Подробнее об экспорте вы можете почитать в документации.

Обратите внимание, что координаты объектов заданы в последовательности "долгота, широта". Поскольку по умолчанию в API принят порядок "широта, долгота", необходимо при подключении API передать параметр coordorder со значением longlat. Подробнее см. в разделе Подключение API. 

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>
            Добавление на карту GeoJSON файла из Конструктора карт
        </title>
        <meta charset="utf-8" />

        <style>
            html,
            body,
            .map {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

        <script src="https://yastatic.net/jquery/2.2.3/jquery.min.js"></script>
        <!--
        Обратите внимание, что для добавления на карту geojson файла, эскпортированного из Конструктора карт,
        необходимо при подключении API передать параметр coordorder со значением longlat.

        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;coordorder=longlat&amp;apikey=<ваш API-ключ>"></script>
        <script src="object_manager_geojson.js"></script>
    </head>
    <body>
        <div id="map" class="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var map = new ymaps.Map("map", {
            center: [-0.13968631031941695, 51.52437396304669],
            zoom: 13,
            controls: ["zoomControl"],
        }),
        objectManager = new ymaps.ObjectManager();
    map.controls.get("zoomControl").options.set({ size: "small" });
    // Загружаем GeoJSON файл, экспортированный из Конструктора карт.
    $.getJSON("geoObjects.geojson").done(function (geoJson) {
        geoJson.features.forEach(function (obj) {
            // Задаём контент балуна.
            obj.properties.balloonContent = obj.properties.description;
            // Задаём пресет для меток с полем iconCaption.
            if (obj.properties.iconCaption) {
                obj.options = {
                    preset: "islands#greenDotIconWithCaption",
                };
            }
        });
        // Добавляем описание объектов в формате JSON в менеджер объектов.
        objectManager.add(geoJson);
        // Добавляем объекты на карту.
        map.geoObjects.add(objectManager);
    });
});