Skip to main content

Getting started

To start using RasterJS API, follow the steps below:

  1. Get an access key.
  2. Install the RasterJS API library in your project.
  3. Initialize the map.
  4. (Optional) Add a marker to the map.

1. Get access key​

  1. Sign in to the Platform Manager.
  2. Create a demo key or purchase a subscription for using the Raster Tiles API service, which provides access to raster map tiles. For details on service prices, see the Tariffs section.

Note

If you already have an active API key obtained for RasterJS API, you can use it with Raster Tiles API until the subscription expires. You can view the subscription expiration date in the Platform Manager, on the Dashboard tab.

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

2. Install library​

Add the following line to your HTML page code:

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

If you use npm, see the Installing API section.

3. Initialize map​

To display the map on the page, add an HTML element that will be used as a container and specify its sizes:

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

To initialize the map, call the DG.map() method, specify the identifier of the container and your API key. You can specify the initial coordinates and the required zoom level:

<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 zoom level in the range from 1 to 18.

For the full list of map options, see the API Reference.

4. Add marker​

To add a marker to the map, call the DG.marker() method, specify 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!');

For the full list of marker options, see the API Reference.

Code example​

<!DOCTYPE html>
<html>
    <head>
        <title>Maps API</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&key=YOUR_KEY"></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>

What's next?​