Stretchable label background | MapGL | 2GIS Documentation
MapGL JS API

Stretchable label background

You can use a stretchable image as a background for a label on the map. This allows you to create a distinctive background for labels of arbitrary length or for multi-line labels.

Example of labels with background images

To stretch an image properly, you need to specify monotonous image areas, which can be distorted unnoticeably. These areas will be stretched so that the image size corresponds with the label size. In the image below, blue areas indicate horizontal stretch zones and pink areas indicate vertical stretch zones:

Image stretching schema

The label background is created from an SVG image. You can add your own image or use an existing style icon.

Note

To stretch a texture in width and height independently, some browsers (for example, Firefox) require the SVG image to contain the preserveAspectRatio attribute set to none.

  1. Open the Style editor.

  2. Open the Icons menu and select Upload icons -> Select files.

    Upload icons Select files
  3. Wait for the file to load and click OK.

  4. Open the Icons menu again, find the uploaded image (search by file name), and select Edit the icon.

    Edit the icon
  5. At the bottom of the editing dialog, specify areas stretching the image in width (W) and in height (H):

    Stretch areas
  6. Click Save.

  1. Open or create a style layer of the Point type.

  2. In the layer settings, select the uploaded background image as an icon.

    Background image
  3. Configure icon text attributes.

    Text settings
  4. Configure icon text indents.

    Text indents

Result:

Result