Adding a GeoJSON file to the map from the maps constructor

Open in CodeSandbox

The example shows how to display data exported from the maps constructor on the map using ObjectManager. The JQuery.getJSON() function is used for loading the data. As long as the data is loaded, let's specify all neccessary properties (e.g. the balloon content) and add them to the objects manager.

For more information on the data export, see the documentation.

Note that the object coordinates are set in the order "longitude, latitude". Since the API uses "latitude, longitude" by default, the "coordorder" parameter with the "lotlang" value must be passed when enabling the API. For more information, see the section Enabling the API. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Examples. Adding a GeoJSON file to the map from the maps
            constructor.
        </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>
        <!--
        Note that the object coordinates are set in the order "longitude, latitude".
        Since the API uses "latitude, longitude" by default, the "coordorder" parameter with the "longlat" value
        must be passed when enabling the API.

        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>&amp;coordorder=longlat"></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: [29.902651, 60.02],
            zoom: 11,
            controls: ["zoomControl"],
        }),
        objectManager = new ymaps.ObjectManager();

    // Loading a GeoJSON file exported from the maps constructor
    $.getJSON("geoObjects.geojson").done(function (geoJson) {
        geoJson.features.forEach(function (obj) {
            // Setting the balloon content.
            obj.properties.balloonContent = obj.properties.name;
            // Setting a preset for placemarks with the iconCaption field.
            if (obj.properties.iconCaption) {
                obj.options = {
                    preset: "islands#greenDotIconWithCaption",
                };
            }
        });
        // Adding JSON object descriptions to the object manager.
        objectManager.add(geoJson);
        // Adding objects to the map.
        map.geoObjects.add(objectManager);
    });
});