MapGL API Overview | 2GIS Documentation

MapGL API Overview

As a first step to use MapGL API you need to get the access key (contact us mapgl@2gis.com if you need one). Then you can load the script by adding script tag to HTML page:

<script src="https://mapgl.2gis.com/api/js/v1"></script>

After the script loading completion the global variable mapgl will be added to the window object whether you'll be able to use the API.

Before map initialization you need to create special HTML element:

<div id="container"></div>

The map will be added to this element and will get its dimensions so you need to specify it in CSS:

<style>
    #container {
        width: 500px;
        height: 300px;
    }
</style>

And finally, create the map with Map component by passing HTML element ID:

<script>
    const map = new mapgl.Map('container', {
        center: [55.31878, 25.23584],
        zoom: 13,
        key: 'Your API access key',
    });
</script>

The second argument takes MapOptions. In the example above we pass initial map center (longitude, latitude), map zoom and the access key.

After map initialization you can add some elements to it. For example, add Marker component like this:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
});

See marker for more details.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Quckstart with 2GIS Map API" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });
            const marker = new mapgl.Marker(map, {
                coordinates: [55.31878, 25.23584],
            });
        </script>
    </body>
</html>

You can use @2gis/mapgl npm-package to add the map to your NodeJS application.

The npm-package includes:

  1. Async loader for 2gis MapGL API, which allows you to be sure, that the latest MapGL API script is used.
  2. Typescript typings to work with the map in a typescript environment.

You can get more info and an example from a Readme.