RasterJS API

RasterJS API is a JavaScript library that allows you to add a 2D Urbi map to your website.

The library allows you to:

Create interactive maps on the web page.
Display various objects on the map (markers, popups, geometric objects).
Search on the map: to determine the coordinates of geoobjects by their names and the names by the coordinates.

The source code of the RasterJS API is available on GitHub, the project is open to suggestions and pull requests.

Getting started

To start using the RasterJS API, follow the steps below:

Get an access key.
Add the RasterJS API library to your project.
Initialize the map.
(Optional) Add an object to the map (for example, a marker).

1. Get an access key

Important

From July 1, 2025, using the RasterJS API is charged. To get access keys and ensure continuous operation of your service, contact the manager or the support service before June 30, 2025. To continue working, you will also need to initialize the map again.

To work with access keys, you can use the Platform Manager: for details, see the account documentation.

2. Install the library

To install the RasterJS API library, add the following line to the code of your HTML page:

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>

If you use npm, see the Connection API section.

3. Initialize the map

To display the map on the page, create an HTML element that acts as a container for the map and specify its sizes:

<body>
    <div id="map" style="width:500px; height:400px"></div>
</body>

To initialize the map, call the DG.map() method, pass the identifier of the container and your API key. You can specify the initial coordinates and the required zoom level. See the API Reference for the full list of map options.

If you use an access key with restrictions set in the Referer header to initialize the map, the map rendering will be blocked on pages with the <meta name="referrer" content="no-referrer" /> tag starting July 1, 2025.

<script type="text/javascript">
    var map;

    DG.then(function () {
        map = DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13,
            key: 'Your API access key',
        });
    });
</script>

Here:

center - coordinates of the map center in the[latitude, longitude] format;
zoom - map scale in the range from 1 to 18.

4. Add a marker

To add a marker to the map, call the DG.marker() method and pass the name of the map instance and coordinates of the marker:

DG.marker([54.98, 82.89]).addTo(map);

To add a popup block to the map with the necessary information, that will be displayed when you click the marker:

DG.marker([54.98, 82.89]).addTo(map).bindPopup('You've clicked on me!');

See the API Reference for more information on marker initialization options.

Example

Resulting code:

<!DOCTYPE html>
<html>
    <head>
        <title>API карт 2ГИС</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
        <script type="text/javascript">
            var map;

            DG.then(function () {
                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13,
                    key: 'Your API access key',
                });

                DG.marker([54.98, 82.89]).addTo(map).bindPopup('You have clicked on me!');
            });
        </script>
    </head>
    <body>
        <div id="map" style="width:500px; height:400px"></div>
    </body>
</html>