Line caption

Using the GeoJSON data source and the Style editor, you can add your own caption to a line on the map.

<!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="Line caption example" />
    <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',
            // Style copy link: https://styles.2gis.com/preview/20183afe-746f-4034-8838-79a1054d402d?allowCopy=522130642
            style: '20183afe-746f-4034-8838-79a1054d402d'
        });

        const data = {
            type: 'Feature',
            properties: {
                foo: 'bar',
                text: 'Text over a line'
            },
            geometry: {
                type: 'LineString',
                coordinates: [
                    [55.284554651747406, 25.20074208922243],
                    [55.355965786263646, 25.281483196506954]
                ]
            }
        }

        const source = new mapgl.GeoJsonSource(map, {
            data,
        });
    </script>
</body>

</html>

To add a caption, add a data source and create a style layer with the Line caption type:

Add a data source using the GeoJsonSource class. As a geometry in data, specify a LineString object with the line coordinates:

const data = {
    type: 'Feature',
    properties: {
        foo: 'bar',
        text: 'Text over a line',
    },
    geometry: {
        type: 'LineString',
        coordinates: [
            [55.284554651747406, 25.20074208922243],
            [55.355965786263646, 25.281483196506954],
        ],
    },
};

const source = new mapgl.GeoJsonSource(map, {
    data,
});

Specify parameters:

foo: unique line property. Use to associate a GeoJSON data source with the style layer in the Style editor where the caption settings are set.
text: caption text above the line.
coordinates: line coordinates.

Open the Style editor.
In the My styles block, open the style used for the map.
In the Layers section, click icon.
Select the Line caption layer type.
Specify the required line caption settings: font, text color, and others.
Associate the created GeoJSON data source with the layer. To do this, open the Data block, click JSON - add manually, and specify the unique line property foo that you specified in the line data:
```
[
    "==", 
    [
        "get",
        "foo"
    ],
    "bar"
]
```
Associate the text attribute from the GeoJSON data source with the layer. To do this, open the Style block and specify in the Text field:
- Type: Get-expression
- Attribute with caption: text
To prevent map captions from overlapping the line caption, add it to a separate labeling group:
1. Click Settings in the top menu and click Open labeling groups.
2. Create a new group, for example, line. Add this group and the default group (default) to the Labeling group overlap field:
3. Go to the layer settings. Open the Style block and select the created labeling group in the Labeling group field:

Important

Data that you add to the map via GeoJSON does not appear in the Style editor. To check how the caption appears on the map, after creating and customizing the line layer, publish the style and view the changes in an online editor such as CodePen.