Sprite
A style's sprite
property supplies a URL template for loading small images to use in rendering background-pattern
, fill-pattern
, line-pattern
,fill-extrusion-pattern
and icon-image
style properties.
"sprite": "mapbox://sprites/mapbox/bright-v8"
A valid sprite source must supply two types of files:
- An index file, which is a JSON document containing a description of each image contained in the sprite. The content of this file must be a JSON object whose keys form identifiers to be used as the values of the above style properties, and whose values are objects describing the dimensions (
width
andheight
properties) and pixel ratio (pixelRatio
) of the image and its location within the sprite (x
and{' '}y
). For example, a sprite containing a single image might have the following index file contents:
{
"poi": {
"width": 32,
"height": 32,
"x": 0,
"y": 0,
"pixelRatio": 1
}
}
- Then the style could refer to this sprite image by creating a symbol layer with the layout property
"icon-image": "poi"
, or with the tokenized value"icon-image": "{icon}"
and vector tile features with aicon
property with the valuepoi
. - Image files, which are PNG images containing the sprite data.
Apart from the required width
, height
, x
, and y
properties, the following optional properties are supported:
content
: An array of four numbers, with the first two specifying the left, top corner, and the last two specifying the right, bottom corner. If present, and if the icon usesicon-text-fit
, the symbol's text will be fit inside the content box.stretchX
: An array of two-element arrays, consisting of two numbers that represent the from position and the to position of areas that can be stretched.stretchY
: Same asstretchX
, but for the vertical dimension.
Goong SDKs will use the value of the sprite
property in the style to generate the URLs for loading both files. First, for both file types, it will append @2x
to the URL on high-DPI devices. Second, it will append a file extension: .json
for the index file, and .png
for the image file. For example, if you specified "sprite": "https://example.com/sprite"
, renderers would load https://example.com/sprite.json
and https://example.com/sprite.png
, or https://example.com/sprite@2x.json
and https://example.com/sprite@2x.png
.