Skip to main content

Raster Tiles API

The Raster Tiles API service allows you to add an Urbi raster map to a mobile or web application. The service returns tile images in PNG format, which can be used to display the map in your interface.

Select an integration method depending on your needs:

Getting started​

Get access key​

To work with the API of the service, get an access key:

  1. Sign in to the Platform Manager.
  2. Create a demo key or purchase a subscription for using API. 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.

Use public endpoint​

When using third-party libraries, use the following endpoint for loading tile images:

https://tile{n}.maps.2gis.com/v2/tiles/{tileset}/{z}/{x}/{y}.png?key={key}

Here:

  • n: host number that can range from 0 to 4. You can use a single host for low traffic volumes or distribute requests across multiple hosts manually.
  • tileset: tile set. For example, online_hd for high-resolution tiles or online_sd for standard-resolution tiles.
  • z: map zoom level. The higher the number, the more detailed the map.
  • x, y: tile coordinates.
  • key: your API key.

Request example​

https://tile0.maps.2gis.com/v2/tiles/online_hd/16/47851/20734.png?key=YOUR_KEY

Use RasterJS API library​

RasterJS API is a free JavaScript library that allows you to add a 2D Urbi map to your website. The library includes a set of tools for interactive map features and automatically requests and displays raster tiles on the page.

The library allows you to:

  • Сreate interactive maps on the web page.
  • Display markers, popups, and geometric objects on the map.
  • Determine the coordinates of geoobjects by their names and the names by the coordinates.

For more library usage examples, see the Examples section.

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

To use the Raster Tiles API service with RasterJS API library, after getting an API key:

  1. Install the library.
  2. Initialize the map.
  3. Add a marker to the map.

Install 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&key=YOUR_KEY"></script>

If you use npm, see the Installing API section.

Initialize map​

To display the map on the page, create an HTML element that acts as a map 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, pass the identifier of the container and your API key. You can specify the initial coordinates and the required zoom level. See the RasterJS 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.

Add 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 RasterJS API Reference for more information on marker initialization options.

Example​

Resulting code:

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

Tariffs​

  • The service fee is calculated based on the number of successful requests per month.
  • To find out the current prices for services, contact the manager.

What's next?​