Skip to main content

Sprite (sprite）

A sprite is a single image that contains all the icons and style images on the map.

Images can be used to render the following style properties:background-pattern，fill-pattern，line-pattern，fill-extrusion-patternand icon-image。

It is defined in the style as follows:

"http://***/vt_map/sprite/sprite"

Mapmost SDK Litewill use thisURLThe template requests two sprite files to render the icons and patterns on the map.

Sprite file (Sprite files）​

A valid sprite source must provide two types of files: index files and image files.

index file​

The index file of the sprite map is aJSONFile containing a description of each image in the sprite, including image dimensions (width and height attributes) and pixel ratio (pixelRatio）and its position in the sprite map(x, y)。

For example, a sprite containing a single image might contain the following index file content: 

{
    "poi": {
        "width": 32,
        "height": 32,
        "x": 0,
        "y": 0,
        "pixelRatio": 1
    }
}

Based on the data in the sprite index file, styles can be created with layout properties"icon-image":"poi"or with tagged value"icon-image":"{icon}"symbol layer and icon attribute valuepoiThe vector map function can be used to reference images in sprite sheets.

In addition to the required attributeswidth, height, x, yandpixelRatioIn addition, the following optional attributes are supported:

  • content：Depend on4An array of numbers, the first two numbers specify the upper left corner, and the last two numbers specify the lower right corner. If present and the image usesicon-text-fit，The symbol’s text will fit inside the content box.
  • stretchX：A two-element array consisting of two numbers that represent the starting and ending positions of the stretchable area.
  • stretchY：andstretchXSame, but works in the vertical dimension.

image file​

The image file of the sprite chart contains iconsPNGimage.

The maximum size of the sprite is given byWebGL MAX_TEXTURE_SIZErestricted, depending on the clientGPU，But usually at least4096×4096pixels.

How to create a sprite file​

can passMapmost Cartoin【Icon generation】function, uploadsvgThe required files will be generated.

Load sprite file​

Mapmost SDK Litewill use the sprite property value from the style asURLtemplate, and generate a complete based on these two sprite filesURL:

  • First, for index and image files they will be highdpion the deviceURLappend after@2x。
  • Secondly, they will append the file extension:.jsonfor indexing files,.pngfor image files.

For example, if you specify in your style"sprite": "http://***/vt_map/sprite/sprite" The renderer will load the following:

  • http:///vt_map/sprite/sprite.json and http:///vt_map/sprite/sprite.png or is
  • http:///vt_map/sprite/sprite@2x.json and http:///vt_map/sprite/sprite@2x.png