### Multiple Start Points

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/directions/examples.mdx

Example showing how to specify multiple start points for optimal routing.

```APIDOC
### Multiple Start Points

Specify multiple start points by setting `"start": true` for each.

### Request Body Example
```json
"points": [
   {
       "type": "stop",
       "x": 82.93057,
       "y": 54.943207,
       "start": true
   },
   {
       "type": "stop",
       "x": 82.93856,
       "y": 54.943112,
       "start": true
   },
   {
       "type": "stop",
       "x": 82.945039,
       "y": 55.033879
   }
]
```
```

--------------------------------

### Full Example Rules File

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-api-platform/api-platform/install/navigation.mdx

This is a comprehensive example of a rules file for the API Platform, covering various transport types and query types. Copy only the necessary blocks for your installation.

```yaml
rules:
    - name: freeroam
      queries: ["free_roam"]
      routing: []

    - name: all-car
      queries: ["routing", "get_hull", "map_matching", "route_planner", "area_clustering", "get_pairs", "get_dist_matrix"]
      routing: ["driving"]

    - name: all-truck
      queries: ["routing", "get_dist_matrix"]
      routing: ["truck"]

    - name: all-pedestrian
      queries: ["routing", "get_hull", "get_pairs", "get_dist_matrix"]
      routing: ["pedestrian"]

    - name: all-bicycle
      queries: ["routing", "get_hull", "get_pairs", "get_dist_matrix"]
      routing: ["bicycle", "scooter"]

    - name: all-taxi
      queries: ["routing", "get_pairs", "get_dist_matrix"]
      routing: ["taxi"]

    - name: all-motorcycle
      queries: ["routing", "get_hull", "get_dist_matrix"]
      routing: ["motorcycle"]

    - name: all-ctx
      queries: ["public_transport", "get_dist_matrix", "get_hull"]
      routing: ["public_transport", "ctx"]

    - name: emergency
      queries: ["routing"]
      routing: ["emergency"]

    - name: async-car
      queries: ["get_dist_matrix"]
      routing: ["driving"]

    - name: async-truck
      queries: ["get_dist_matrix"]
      routing: ["truck"]

    - name: async-bicycle
      queries: ["get_dist_matrix"]
      routing: ["bicycle", "scooter"]

    - name: async-pedestrian
      queries: ["get_dist_matrix"]
      routing: ["pedestrian"]
    
    - name: async-ctx
      queries: ["get_dist_matrix"]
      routing: ["ctx"]

    - name: route-planner
      queries: ["route_planner", "area_clustering"]
      routing: ["driving"]
```

--------------------------------

### Initial GIS Platform Installation with Helm

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-gis-platform/install/installation.mdx

Use this Helm command for the initial installation of the GIS Platform. Ensure you specify the correct version and use the prepared values file. The `spcore.resetCluster=true` flag is crucial for the first-time setup.

```bash
helm upgrade --install --version=VERSION --atomic --wait-for-jobs --values ./values-gis-platform.yaml gis-platform 2gis-on-premise/gis-platform --set spcore.resetCluster=true
```

--------------------------------

### Specify Start Point

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/route-planner/examples.mdx

This example shows how to specify a custom starting point for the route planner by sending a POST request with the `start_point` parameter.

```APIDOC
## POST /route_planner/2.0.0

### Description
Allows users to specify a custom starting point for route planning. If the specified point is outside the polygon, a path from the point to the polygon will be added to the route.

### Method
POST

### Endpoint
/route_planner/2.0.0

### Parameters
#### Request Body
- **start_point** (object) - Required - The coordinates (latitude and longitude) of the desired starting point.
  - **lat** (number) - Required - Latitude of the start point.
  - **lon** (number) - Required - Longitude of the start point.
- **geometry_objects** (array) - Required - An array of geometric objects defining the route area.
  - **type** (string) - Required - The type of geometry object (e.g., "polygon").
  - **area** (object) - Required - Defines the area for the route.
    - **points** (array) - Required - An array of points defining the polygon.
      - **lat** (number) - Required - Latitude of a polygon point.
      - **lon** (number) - Required - Longitude of a polygon point.
- **locale** (string) - Optional - The locale for the response (e.g., "ru").

### Request Example
```curl
curl --request POST \
--url 'https://routing.api.2gis.com/route_planner/2.0.0?key=API_KEY' \
--header 'Content-Type: application/json' \
--data ' \
{
  "start_point": {
    "lat": 55.0243125573308,
    "lon": 82.91832447313938
  },
  "geometry_objects": [
    {
      "type": "polygon",
      "area": {
        "points": [
          {
            "lat": 55.026907806856286,
            "lon": 82.91738891522984
          },
          {
            "lat": 55.026194437684474,
            "lon": 82.90977144162754
          },
          {
            "lat": 55.030277689546075,
            "lon": 82.90884876172642
          },
          {
            "lat": 55.03219618229847,
            "lon": 82.91213178556065
          },
          {
            "lat": 55.031507503160256,
            "lon": 82.91603708188633
          },
          {
            "lat": 55.026907806856286,
            "lon": 82.91738891522984
          }
        ]
      }
    }
  ],
  "locale": "ru"
}'
```

### Response
#### Success Response (200)
- **error_message** (string) - An empty string if the request was successful.
- **route** (object) - Contains information about the calculated route.
  - **algorithm** (string) - The algorithm used for routing (e.g., "с учётом пробок").
  - **begin_pedestrian_path** (object) - Information about the initial pedestrian path.
    - **geometry** (object) - Geometric data for the path.
      - **selection** (string) - A string representing the line geometry.
  - **filter_road_types** (array) - An array of road types filtered for the route.
  - **id** (string) - The unique identifier for the route.
  - **maneuvers** (array) - An array of maneuvers for the route.
    - **comment** (string) - A comment describing the maneuver.
    - **icon** (string) - The icon identifier for the maneuver.
    - **id** (string) - The unique identifier for the maneuver.
    - **outcoming_path** (object) - Information about the path following the maneuver.
      - **distance** (number) - The distance of the path segment.
      - **duration** (number) - The duration of the path segment.
      - **geometry** (array) - An array of geometry objects for the path segment.
        - **color** (string) - The color of the geometry segment.
        - **length** (number) - The length of the geometry segment.
        - **selection** (string) - A string representing the line geometry.
        - **style** (string) - The style of the geometry segment.
      - **names** (array) - An array of names associated with the path segment.
    - **outcoming_path_comment** (string) - A comment describing the path following the maneuver.
    - **turn_angle** (number) - The angle of the turn for the maneuver.
    - **turn_direction** (string) - The direction of the turn (e.g., "left", "right").
    - **type** (string) - The type of maneuver (e.g., "begin", "crossroad").

### Response Example
```json
{
    "error_message": "",
    "route": {
        "algorithm": "с учётом пробок",
        "begin_pedestrian_path": {
            "geometry": {
                "selection": "LINESTRING(82.918324 55.024312, 82.918508 55.024261)"
            }
        },
        "filter_road_types": [
            "highway"
        ],
        "id": "14469420573683478551",
        "maneuvers": [
            {
                "comment": "start",
                "icon": "start",
                "id": "4738002958960119805",
                "outcoming_path": {
                    "distance": 14,
                    "duration": 3,
                    "geometry": [
                        {
                            "color": "ignore",
                            "length": 14,
                            "selection": "LINESTRING(82.918508 55.024261, 82.918497 55.024248, 82.918509 55.024262, 82.918534 55.024272, 82.918673 55.024285)",
                            "style": "living_zone"
                        }
                    ],
                    "names": [
                        "Октябрьская"
                    ]
                },
                "outcoming_path_comment": "10 м прямо",
                "type": "begin"
            },
            {
                "comment": "Поворот налево на ул. Октябрьская",
                "icon": "crossroad_left",
                "id": "2546912131167556994",
                "outcoming_path": {
                    "distance": 22,
                    "duration": 5,
                    "geometry": [
                        {
                            "color": "ignore",
                            "length": 22,
                            "selection": "LINESTRING(82.918673 55.024285, 82.918643 55.024394, 82.918619 55.024486)",
                            "style": "living_zone"
                        }
                    ],
                    "names": [
                        "Октябрьская"
                    ]
                },
                "outcoming_path_comment": "20 м прямо",
                "turn_angle": -86,
                "turn_direction": "left",
                "type": "crossroad"
            },
            {
                "comment": "Поворот налево на ул. Октябрьская",
                "icon": "crossroad_left",
                "id": "1738735375809050842",
                "outcoming_path": {
                    "distance": 42,
                    "duration": 22,
                    "geometry": [
                        {
                            "color": "fluid",
                            "length": 42,
                            "selection": "LINESTRING(82.918619 55.024486, 82.918427 55.024469, 82.918108 55.024441, 82.917942 55.024426)",
                            "style": "normal"
                        }
                    ],
                    "names": [
                        "Октябрьская"
                    ]
                },
                "outcoming_path_comment": "40 м прямо",
                "turn_angle": -90,
                "turn_direction": "left",
                "type": "crossroad"
            },
            {
                "comment": "Поворот направо на ул. Советская",
                "icon": "crossroad_right",
                "id": "9052307276045134658",
                "outcoming_path": {
                    "distance": 614,
                    "duration": 521,

```

--------------------------------

### Define Route Start Point

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/route-planner/examples.mdx

Example of how to define the starting point for a route. This includes coordinates and optional address information.

```json
{
    "point": {
        "lat": 55.030000,
        "lon": 82.920000
    },
    "address": "ул. Ленина, 1"
}
```

--------------------------------

### Full Example with MapGL and React

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/start/react.mdx

This HTML example demonstrates a complete integration of MapGL within a React application, including context setup, map initialization, and interaction from a separate button component.

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>MapGL JS API</title>
        <meta name="description" content="Пример взаимодействия с картой в React-приложении" />
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="__MAPGL_API_URL__"></script>
        <!-- Не используйте в проектах: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <style>
            html,
            body,
            #root {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            const MapContext = React.createContext([undefined, () => {}]);

            const MapProvider = (props) => {
                const [mapInstance, setMapInstance] = React.useState();

                return (
                    <MapContext.Provider value={[mapInstance, setMapInstance]}>
                        {props.children}
                    </MapContext.Provider>
                );
            };

            const MapWrapper = React.memo(
                () => {
                    return <div id="map-container" style={{ width: '100%', height: '100%' }}></div>;
                },
                () => true,
            );
            const MapGL = () => {
                const [_, setMapInstance] = React.useContext(MapContext);

                React.useEffect(() => {
                    const map = new mapgl.Map('map-container', {
                        center: [37.615655, 55.768005],
                        zoom: 13,
                        key: 'Your API access key',
                    });

                    setMapInstance(map);
                    return () => map.destroy();
                }, []);

                return (
                    <div style={{ width: '100%', height: '100%' }}>
                        <MapWrapper />
                    </div>
                );
            };
            const MoveMapButton = () => {
                const [mapInstance] = React.useContext(MapContext);

                const setInitialCenter = React.useCallback(() => {
                    if (mapInstance) {
                        mapInstance.setCenter([37.615655, 55.768005]);
                    }
                }, [mapInstance]);

                return <button onClick={setInitialCenter}>Set initial center</button>;
            };

            const App = () => {
                return (
                    <div style={{ width: '100%', height: '100%' }}>
                        <MapGL />
                        <MoveMapButton />
                    </div>
                );
            };

            ReactDOM.render(
                <MapProvider>
                    <App />
                </MapProvider>,
                document.getElementById('root'),
            );
        </script>
    </body>
</html>
```

--------------------------------

### Isochrone API with Start Time

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/isochrone/examples.mdx

This example shows how to construct an isochrone zone by specifying a departure time. It uses a POST request to the /isochrone/2.0.0 endpoint with `start_time` parameter.

```APIDOC
## POST /isochrone/2.0.0

### Description
Builds an isochrone zone considering the departure time.

### Method
POST

### Endpoint
`/isochrone/2.0.0`

### Parameters
#### Query Parameters
- **key** (string) - Required - Your directions API access key.

#### Request Body
- **durations** (array of integers) - Required - Travel time in seconds.
- **start** (object) - Required - The starting point coordinates.
  - **lat** (number) - Latitude of the starting point.
  - **lon** (number) - Longitude of the starting point.
- **start_time** (string) - Optional - The departure date and time in RFC 3339 format (e.g., `2025-05-15T15:52:01Z`).
- **transport** (string) - Optional - The mode of transport. Can be `driving` or `public_transport`.
- **format** (string) - Optional - The output format for the geometry. Defaults to `wkt`.

### Request Example
```json
{
    "durations": [600],
    "start": {
        "lat": 55.76259,
        "lon": 37.668598
    },
    "start_time": "2025-05-15T18:00:00Z",
    "transport": "driving",
    "format": "wkt"
}
```

### Response
#### Success Response (200)
- **isochrones** (array) - An array of isochrone objects.
  - **geometry** (string) - The geometry of the isochrone in WKT format.
  - **duration** (integer) - The duration for which the isochrone was calculated.
```

--------------------------------

### HTTP GET Request Example

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/pairs/overview.mdx

Example of a GET request to the Pairs Directions API endpoint for driving routes. Replace API_KEY with your actual key.

```http
https://routing.api.2gis.com/get_pairs/1.0/driving?key=API_KEY
```

--------------------------------

### Basic React App Setup

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/start/react.mdx

Standard React application setup using ReactDOM.render to mount the root component.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

import { App } from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

```javascript
import React from 'react';

export const App = () => {
    return <div>My App</div>;
};
```

--------------------------------

### Suggest API Request Example

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/search/suggest/overview.mdx

This example demonstrates how to make a GET request to the Suggest API to get search suggestions. It includes the query, location, and API key parameters.

```APIDOC
## GET /3.0/suggests

### Description
Retrieves search suggestions based on a query and location.

### Method
GET

### Endpoint
https://catalog.api.2gis.com/3.0/suggests

### Parameters
#### Query Parameters
- **q** (string) - Required - The search query string. Allows for variations and continuations of the input.
- **location** (string) - Required - The user's current coordinates (longitude,latitude) to prioritize nearby results.
- **key** (string) - Required - Your API key for authentication.

### Request Example
```http
https://catalog.api.2gis.com/3.0/suggests?q=каф&location=37.630866,55.752256&key=YOUR_KEY
```

### Response
#### Success Response (200)
- The response will be a JSON object containing a list of suggested search terms or objects.
```

--------------------------------

### Full Example: Simple Popup with Styling

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/objects/popups.mdx

A complete HTML example demonstrating how to initialize a MapGL map and add a simple popup with custom CSS styling for its content and tip.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MapGL JS API</title>
        <meta name="description" content="Простой попап" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .popup {
                position: absolute;
                transform: translate(-50%, -100%);
                display: flex;
                flex-direction: column;
                min-width: 200px;
            }
            .popup-content {
                padding: 5px;
                border-radius: 4px;
                background: #fff;
                box-shadow: 0 1px 2px 0 rgba(38, 38, 38, 0.2);
            }
            .popup-tip {
                width: 0;
                height: 0;
                align-self: center;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #fff;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="__MAPGL_API_URL__"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [37.615655, 55.768005],
                zoom: 13,
                key: 'Your API access key',
            });

            const popup = new mapgl.HtmlMarker(map, {
                coordinates: [37.615655, 55.768005],
                html: `<div class="popup">
                    <div class="popup-content">
                        Текст попапа
                    </div>
                    <div class="popup-tip"></div>
                </div>`,
            });
        </script>
    </body>
</html>

```

--------------------------------

### Download and Run GIS Platform Configuration Script

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-gis-platform/install/installation.mdx

Download the GIS Platform Helm chart and navigate to the configuration directory to run the setup script. This script initializes the platform after the initial Helm installation.

```bash
helm pull --untar 2gis-on-premise/gis-platform
cd gis-platform/gis-platform-config
./configure.sh
```

--------------------------------

### Full Example: MapGL Clusterer with Custom Marker Styles

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/objects/clustering.mdx

This HTML example demonstrates initializing a MapGL map and a Clusterer instance, then loading markers with custom appearance settings, including icons, sizes, and hover effects. It also shows how to add labels to individual markers within the cluster.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MapGL JS API</title>
        <meta name="description" content="Настройка внешнего вида маркеров в кластере с помощью плагина Clusterer" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 500px;
                height: 300px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="__MAPGL_API_URL__"></script>
        <script src="__MAPGL_PLUGIN_CLUSTERER_URL__"></script>
        <div id="container"></div>
        <script>
            const map = new mapgl.Map('container', {
                center: [37.615655, 55.768005],
                zoom: 11,
                key: 'Your API access key',
            });

            const markers = [
                {
                    coordinates: [37.61455, 55.73387],
                    icon: '__BASE_URL__/img/mapgl/marker.svg',
                    hoverIcon: '__BASE_URL__/img/mapgl/markerHover.svg',
                    size: [36, 36],
                    hoverSize: [46, 46],
                },
                {
                    coordinates: [37.64339, 55.72700],
                    icon: '__BASE_URL__/img/mapgl/marker.svg',
                    hoverIcon: '__BASE_URL__/img/mapgl/marker.svg',
                    size: [42, 42],
                    hoverSize: [48, 48],
                },
                {
                    coordinates: [37.68834, 55.76768],
                    icon: '__BASE_URL__/img/mapgl/marker.svg',
                    hoverIcon: '__BASE_URL__/img/mapgl/markerHover.svg',
                    size: [44, 44],
                    hoverSize: [50, 50],
                    label: {
                        relativeAnchor: [0, 0.5],
                        offset: [20, 0],
                        color: '#00f',
                        haloColor: '#ffffff',
                        haloRadius: 1,
                        fontSize: 12,
                        text: 'Маркер'
                    }
                },
            ];

            const clusterer = new mapgl.Clusterer(map);
            clusterer.load(markers);
        </script>
    </body>
</html>
```

--------------------------------

### Hard Time Window Example

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/tsp/examples.mdx

Example of setting a hard time window for a waypoint, specifying the start and end times in seconds.

```APIDOC
## Hard Time Window Example

### Description
Sets a hard time window for a specific waypoint. If the courier does not arrive within this window, the waypoint will be excluded from the route calculation.

### Parameters
#### Waypoint Parameters
- **time_windows** (array) - Required - An array of time window objects.
  - **start** (integer) - Required - The start of the time window in seconds from the Unix epoch or relative to `start_time`.
  - **end** (integer) - Required - The end of the time window in seconds from the Unix epoch or relative to `start_time`.

### Request Example
```json
{
    "waypoints": [
        {
            "waypoint_id": 0,
            "point": {
                "lat": 54.994814,
                "lon": 82.87837
            },
            "time_windows": [
                {
                    "start": 54420,
                    "end": 64440
                }
            ]
        }
    ]
}
```
```

--------------------------------

### Full HTML Example with MapGL and Terra Draw Output

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/map/tools/drawing.mdx

An integrated example demonstrating how to initialize MapGL, load styles, and display data obtained from Terra Draw's adapter.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MapGL JS API</title>
        <meta name="description" content="Получение данных об объектах с помощью плагина Terra Draw" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="__MAPGL_API_URL__"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [37.615655, 55.768005],
                zoom: 13,
                key: 'Your API access key',
            });

            map.on('styleload', () => {
                for (const icon in featureCollection.icons) {
                    map.addIcon(icon, { url: featureCollection.icons[icon] });
                }
                for (const layer of featureCollection.layers) {
                    map.addLayer(layer);
                }
                const source = new mapgl.GeoJsonSource(map, {
                    data: featureCollection,
                    attributes: {
                        name: 'terra-draw-output',
                    },
                });
            });

            // Данные из адаптера MapGL TerraDraw
            var featureCollection = {
                "type": "FeatureCollection",
                "icons": {
                    "terra-draw-icon-0": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgNyA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIzLjUiIGN5PSIzLjUiIHI9IjIuNSIgZmlsbD0iIzc0MzNmZjMzIiBzdHJva2U9IiM3NDMzZmYiIHN0cm9rZS13aWR0aD0iMS4yIi8+Cjwvc3ZnPg=="
                },
                "layers": [
                    {
                        "type": "polygon",
                        "style": {
                            "color": "#3388ff33",
                            "strokeColor": "#3388ff",
                            "strokeWidth": 3
                        },
                        "id": "terra-draw-0",
                        "filter": [
                            "==",
                            [
                                "get",
                                "styleLayer"
                            ],
                            "terra-draw-0"
                        ]
                    },
                    {
                        "type": "polygon",
                        "style": {
                            "color": "#3388ff33",
                            "strokeColor": "#3388ff",
                            "strokeWidth": 2
                        },
                        "id": "terra-draw-1",
                        "filter": [
                            "==",
                            [
                                "get",
                                "styleLayer"
                            ],
                            "terra-draw-1"
                        ]
                    },
                    {
                        "type": "polygon",
                        "style": {
                            "color": "#2aab5d33",
                            "strokeColor": "#2aab5d",
                            "strokeWidth": 5
                        },
                        "id": "terra-draw-2",
                        "filter": [
                            "==",
                            [
                                "get",
                                "styleLayer"
                            ],

```

--------------------------------

### Full Example: Interactive Realty Scene

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/objects/gltf2-plugin.mdx

A complete HTML example demonstrating the initialization of MapGL, the glTF2 plugin, and adding a detailed interactive realty scene with multiple floors and labels.

```html
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MapGL JS API</title>
    <meta name="description" content="Добавление интерактивной сцены с помощью плагина glTF версии 2" />
    <style>
        html, body, #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="__MAPGL_API_URL__"></script>
    <script src="__MAPGL_PLUGIN_GLTF2_URL__"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [47.245286302641034, 56.134743473834099],
            zoom: 17.9,
            key: 'Your API access key',
            pitch: 45,
            rotation: 330,
            enableTrackResize: true,
        });

        const plugin = new mapgl.GltfPlugin(map, {
            modelsLoadStrategy: 'waitAll',
            modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
            labelGroupDefaults: {
                fontSize: 14,
            },
            hoverOptions: {
                color: '#FFF3F3',
            },
        });

        const realtyScene = [
            {
                modelId: '03a234cb',
                coordinates: [47.245286302641034, 56.134743473834099],
                modelUrl: 'zgktechnology1.glb',
                rotateZ: -15.1240072739039,
                linkedIds: ['70030076555823021'],
                interactive: true,
                mapOptions: {
                    center: [47.24547737708662, 56.134591508663135],
                    pitch: 40,
                    zoom: 19,
                    rotation: -41.4,
                },
                popupOptions: {
                    coordinates: [47.24511721603574, 56.13451456056651],
                    title: 'Корпус 1. 11 этажей',
                    description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
                },
                floors: [
                    {
                        id: '235034',
                        text: '1-10',
                        modelUrl: 'zgktechnology1_floor2.glb',
                        mapOptions: {
                            center: [47.24524342863023, 56.13449524271827],
                            pitch: 40,
                            zoom: 20,
                            rotation: -57.5,
                        },
                        labelGroups: [
                            {
                                id: '1111',
                                image: 'default',
                                minZoom: 19.5,
                                elevation: 5,
                                fontSize: 12,
                                fontColor: '#3a3a3a',
                                interactive: true,
                                labels: [
                                    {
                                        coordinates: [47.245048150280994, 56.134470449142164],
                                        text: '3к\n78.4 м²',
                                        userData: {
                                            url: 'https://2gis.ru/',
                                        },
                                    },
                                    {
                                        coordinates: [47.24520807647288, 56.13443854463778],
                                        text: '2к\n67 м²',
                                        userData: {
                                            url: 'https://2gis.ru/',
                                        },
                                    },
                                    {
                                        coordinates: [47.245350349632965, 56.134414208205776],
                                        text: '1к\n40 м²',
                                        userData: {
                                            url: 'https://2gis.ru/'
                                        },
                                    },
                                    {

```

--------------------------------

### Directory Object Autocompletion

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/search/suggest/examples.mdx

Example of how to get suggestions for directory objects.

```APIDOC
## GET /3.0/suggests

### Description
Provides suggestions for directory objects based on the provided query.

### Method
GET

### Endpoint
https://catalog.api.2gis.com/3.0/suggests

### Query Parameters
- **q** (string) - Required - The search query.
- **suggest_type** (string) - Required - Must be set to 'object'.
- **key** (string) - Required - Your API key.

### Request Example
```http
https://catalog.api.2gis.com/3.0/suggests?q=Москва Ли&suggest_type=object&key=YOUR_KEY
```
```

--------------------------------

### Route Endpoint Autocompletion

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/search/suggest/examples.mdx

Example of how to get suggestions for route endpoints.

```APIDOC
## GET /3.0/suggests

### Description
Provides suggestions for route endpoints based on the provided query.

### Method
GET

### Endpoint
https://catalog.api.2gis.com/3.0/suggests

### Query Parameters
- **q** (string) - Required - The search query.
- **suggest_type** (string) - Required - Must be set to 'route_endpoint'.
- **key** (string) - Required - Your API key.

### Request Example
```http
https://catalog.api.2gis.com/3.0/suggests?q=Москва Ли&suggest_type=route_endpoint&key=YOUR_KEY
```
```

--------------------------------

### Address Autocompletion

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/search/suggest/examples.mdx

Example of how to get address suggestions based on a query.

```APIDOC
## GET /3.0/suggests

### Description
Provides address suggestions based on the provided query.

### Method
GET

### Endpoint
https://catalog.api.2gis.com/3.0/suggests

### Query Parameters
- **q** (string) - Required - The search query.
- **suggest_type** (string) - Required - Must be set to 'address'.
- **key** (string) - Required - Your API key.

### Request Example
```http
https://catalog.api.2gis.com/3.0/suggests?q=Москва Ли&suggest_type=address&key=YOUR_KEY
```
```

--------------------------------

### Example spcore Pod Log Output

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-gis-platform/install/installation.mdx

This is an example of the log output you should see in the `spcore` pod upon successful completion of the initial GIS Platform installation.

```text
Now listening on: http://[::]:5051
Application started. Press Ctrl+C to shut down.
```

--------------------------------

### HTML Example with Marker Clustering

Source: https://github.com/2gis/docs-mirror/blob/main/docs/mapgl/objects/clustering.mdx

A complete HTML example demonstrating how to set up a MapGL map and use the Clusterer plugin to display clustered markers. This includes script includes and basic map initialization.

```html
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MapGL JS API</title>
        <meta name="description" content="Кластеризация маркеров с помощью плагина Clusterer" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 500px;
                height: 300px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="__MAPGL_API_URL__"></script>
        <script src="__MAPGL_PLUGIN_CLUSTERER_URL__"></script>
        <div id="container"></div>
        <script>
            const map = new mapgl.Map('container', {
                center: [37.615655, 55.768005],
                zoom: 10.5,
                key: 'Your API access key',
            });

            const markers = [
                { coordinates: [37.61455, 55.73387] },
                { coordinates: [37.64339, 55.72700] },
                { coordinates: [37.68834, 55.76768] },
            ];

            const clusterer = new mapgl.Clusterer(map);
            clusterer.load(markers);
        </script>
    </body>
</html>
```

--------------------------------

### Second Stage GIS Platform Installation with Helm

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-gis-platform/install/installation.mdx

After verifying the initial installation and successful login, run this Helm command to complete the GIS Platform setup. This command is similar to the initial installation but omits the `spcore.resetCluster=true` flag.

```bash
helm upgrade --install --version=VERSION --atomic --wait-for-jobs --values ./values-gis-platform.yaml gis-platform 2gis-on-premise/gis-platform
```

--------------------------------

### Platform Manager UI Configuration Example

Source: https://github.com/2gis/docs-mirror/blob/main/docs/on-premise-api-platform/api-platform/releases.mdx

This example shows new parameters added to the Platform Manager configuration file for specifying entry page URLs for various services. Refer to the GitHub repository for the complete values.yaml file.

```yaml
ui:
  mapStyles:
    entryPageUrl: "/mapstyles"
  pro:
    entryPageUrl: "/pro"
  cityLens:
    entryPageUrl: "/citylens"
  onpremise:
    entryPageUrl: "/onpremise"
  kitDocs:
    entryPageUrl: "/kitdocs"
```

--------------------------------

### Build Indoor Route with Routing API

Source: https://github.com/2gis/docs-mirror/blob/main/docs/api/navigation/routing/examples/special.mdx

Use this example to construct a walking route inside a building. Ensure you have a valid API key and the necessary mapgl library loaded. The example includes UI controls for managing point visibility and floor dependency.

```html
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Routing API</title>
    <meta name="description" content="Построение маршрутов внутри здания через Routing API" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .buttons {
            position: absolute;
            top: 5px;
            left: 5px;
        }

        .buttons button {
            background: #fff;
            border: none;
            border-radius: 4px;
            box-shadow: 0 1px 3px 0 rgb(38 38 38 / 50%);
            cursor: pointer;
            padding: 5px 10px;
        }

        .buttons button:hover {
            color: #777;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="buttons">
        <button id="show-always">Отключить зависимость точки от этажей</button>
        <button id="toggle-points">Отображать комментарии</button>
    </div>
    <script src="__MAPGL_API_URL__"></script>
    <script>
        const reqUrl = `https://routing.api.2gis.com/routing/7.0.0/global?key=Your directions API access key`;

        const points = [
            {
                "type": "walking",
                "lon": 37.624836,
                "lat": 55.759832,
                "object_id": 70030076312136070,
                "floor_id": 4504694860731166
            },
            {
                "type": "walking",
                "lon": 37.624984,
                "lat": 55.760219,
                "object_id": 70000001058655912,
                "floor_id": 4504694860733246
            }
        ];
        const map = new mapgl.Map('container', {
            center: [37.625245, 55.759986],
            zoom: 19,
            key: 'Your API access key',
        });
        window.addEventListener('resize', () => map.invalidateSize());

        // UI-элемент для переключения этажей
        const floorControl = new mapgl.FloorControl(map, {
            position: 'topRight',
        });

        let showPoints = true;
        let showAlways = false;
        map.setStyleState({
            showPoints,
            showAlways,
        });
        document.querySelector('#toggle-points').addEventListener('click', () => {
            showPoints = !showPoints;
            map.setStyleState({
                showPoints,
                showAlways,
            });
        });
        document.querySelector('#show-always').addEventListener('click', (ev) => {
            showAlways = !showAlways;
            ev.target.innerHTML = showAlways
                ? 'Включить зависимость точки от этажей'
                : 'Отключить зависимость точки от этажей';
            map.setStyleState({
                showPoints,
                showAlways,
            });
        });

        // Стили для точек и сегментов пути
        map.once('styleload', () => {
            const whiteLineStyle = {
                width: 9,
                color: '#fff',
            };
            const lineStyle = {
                width: 5,
                color: ['match', ['get', 'index'], [-1], '#ccc', [0], '#00ff00', [1], '#0000ff', '#ff0000'],
            };

            // Показ линий под зданиями
            const lineFilter = [
                'all',
                ['==', ['sourceAttr', 'foo'], 'bar'],
                ['==', ['get', 'type'], 'path'],
                ['==', ['global', 'showAlways'], false],
                [
                    'any',
                    ['==', ['get', 'floorId'], null],
                    ['in', ['get', 'floorId'], ['global', '_activeFloorIds']],
                ],
            ];
            map.addLayer(
                {
                    id: 'my-line-white',
                    type: 'line',
                    filter: lineFilter,
                    style: whiteLineStyle,
                },
                '344517',
            );
            map.addLayer(
                {
                    id: 'my-line',
                    type: 'line',
                    filter: lineFilter,
                    style: lineStyle,
                },
                '344517',
            );

            const lineAboveFilter = [
                'all',
                ['==', ['sourceAttr', 'foo'], 'bar'],
                ['==', ['get', 'type'], 'path'],
                ['==', ['global', 'showAlways'], true],
            ];
            map.addLayer({
                id: 'my-line-white-above',
                type: 'line',
                filter: lineAboveFilter,
                style: whiteLineStyle,
            });

```