Static API overview

Static API service generates and displays a static 2GIS map image on web pages and in applications without using JavaScript.

The image is generated based on parameters specified in the URL: image size, map center coordinates, map zoom level, and parameters of additional objects (markers, lines, and polygons).

Use Static API in the following cases:

on websites to show a map preview
in applications where interactivity is not needed
on pages to be printed out (for example, delivery sheets)

Getting started

To use the service, create a URL and place it in the <img> tag on your website or application. You can place the map image anywhere on the website.

For example, the following link generates a map image with additional objects:

https://static.maps.2gis.com/1.0?s=880x450&z=14&pt=55.03652,82.91871&ls=55.03652,82.91871,55.02711,82.92131,55.02470,82.92698~w:5&pt=55.02470,82.92698~k:c~n:1&ls=55.03652,82.91871,55.03758,82.93058,55.04042,82.92996~c:ff0000&pt=55.04042,82.92996~k:c~n:2&pn=55.03687,82.89827,55.04067,82.90925,55.03636,82.91355,55.03264,82.91062,55.03489,82.90021~c:03ee10~f:03ee10a0&pt=55.03484,82.92290~k:c~c:pe

Map on Static API

Playground

To obtain a link to a static map image, specify the image size, coordinates of the map center, and the map zoom level.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2GIS Static API</title>
    <meta name="description" content="Static API map" />
    <style>
        body {
            margin: 0;
            font-family: Arial;
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            margin: 0px 0px;
        }

        .controls label {
            font-family: Arial;
            font-size: 14px;
            color: #6e6d6d;
        }

        .controls input {
            border: 1px solid #ccc;
            padding: 3px 7px;
            font-family: Arial;
            font-size: 14px;
            border-radius: 4px;
        }

        .controls button {
            padding: 6px 10px;
            font-family: Arial;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            background: #0078FF;
            color: white;
            cursor: pointer;
            width: 180px;
        }

        .controls button:disabled {
            background: #f2f2f2;
            color: #6e6d6d;
            cursor: not-allowed;
        }

        .code {
            margin: 10px 0px;
            padding: 16px 20px;
            background: #fafafa;
            border: 1px solid #fafafa;
            border-radius: 0px;
            font-family: ptmono, monospace;
            font-size: 13px;
            color: #262626;
            max-width: 870px;
        }

        #map {
            display: block;
            margin: 0px 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="controls">
        <label>
            Image size:
            <input type="text" id="size" value="880x380">
        </label>
        <label>
            Center coordinates:
            <input type="text" id="center" value="25.21593,55.34067">
        </label>
        <label>
            Zoom level:
            <input type="number" id="zoom" value="14" min="1" max="18">
        </label>
        <button id="updateButton">Update map</button>
    </div>
    <div class="code" id="generatedLink"></div>
    <img id="map" src="" alt="Static API map">

    <script>
        const sizeInput = document.getElementById('size');
        const centerInput = document.getElementById('center');
        const zoomInput = document.getElementById('zoom');
        const updateButton = document.getElementById('updateButton');
        const mapImage = document.getElementById('map');
        const generatedLink = document.getElementById('generatedLink');

        const updateMap = () => {
            const size = sizeInput.value.trim();
            const center = centerInput.value.trim();
            const zoom = zoomInput.value.trim();

            if (!size || !center || !zoom) {
                alert('Fill in all fields');
                return;
            }

            const [width, height] = size.split('x').map(Number);

            if (width < 120 || width > 1280 || height < 90 || height > 1280 || zoom < 1 || zoom > 18) {
                alert('Check the values: width 120-1280, height 90-1280, zoom level 1-18');
                return;
            }

            const mapUrl = `https://static.maps.2gis.com/1.0?s=${size}&c=${center}&z=${zoom}`;
            mapImage.src = mapUrl;
            generatedLink.textContent = mapUrl;
        };

        updateButton.addEventListener('click', updateMap);

        updateMap();
    </script>
</body>

</html>

Static API overview

Getting started

Playground

What's next?