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

To get an access key and work with the API of the service, contact the Urbi sales team.

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.

<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>