---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/data_load_jquery.md
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/data_load_jquery.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt

# Loading geo data using jQuery and adding it to the map

<iframe id="LIVE-EXAMPLE" style="width:100%;height: 400px;border-radius: 8px;border: 1px solid rgba(92, 94, 102, 0.14);" frameBorder="0" src="https://yastatic.net/s3/front-maps-static/maps-front-jsapi-v2-1/examples/2/out/s3-cases/en/data_load_jquery/index.html" allow="fullscreen"></iframe>

<a target="_blank" rel="noopener noreferrer" style="display: inline-block;margin-top: 10px;cursor: pointer;border-radius: 4px;padding: 9px 12px;background: #151515;color: white;text-decoration: none;font-weight: 500" href="https://codesandbox.io/p/sandbox/lsr5tq?file=index.html">Open in CodeSandbox</a>

<div id="references">
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ready">ready</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map">Map</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/geoQuery">geoQuery</a>
</div>
<p>
    The example shows how to load data using <a href="https://api.jquery.com/jquery.getjson/">JQuery.getJSON()</a>
    and display it on the map.
</p>
<p>
    Loaded data is provided in <a href="https://geojson.org/geojson-spec.html">GeoJSON</a> format. To add it to the map, use <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/geoQuery">geoQuery</a>.
</p>
<p>
    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 <a href="http://api.yandex.comhttps://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/load#param">Enabling the API</a>.
</p>

{% list tabs %}

-   index.html

    ```html
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title>Examples. Loading geo data using jQuery.</title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <!--
            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/
        -->
            
            
            
            
        </head>
        <body>
            <div id="YMapsID"></div>
        </body>
    </html>
    ```

-   data_load_jquery.js

    ```js
    ymaps.ready().done(function (ym) {
        var myMap = new ym.Map(
            "YMapsID",
            {
                center: [55.751574, 37.573856],
                zoom: 10,
            },
            {
                searchControlProvider: "yandex#search",
            }
        );

        jQuery.getJSON("data.json", function (json) {
            /** Saving a reference to the geo objects in case any postprocessing is necessary.
             * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoQueryResult.xml
             */
            var geoObjects = ym
                .geoQuery(json)
                .addToMap(myMap)
                .applyBoundsToMap(myMap, {
                    checkZoomRange: true,
                });
        });
    });
    ```

{% endlist %}
