diff --git a/docs/src/routes/sprite/index.tsx b/docs/src/routes/sprite/index.tsx index 5de0fbdc2..1b2d22d18 100644 --- a/docs/src/routes/sprite/index.tsx +++ b/docs/src/routes/sprite/index.tsx @@ -20,22 +20,23 @@ 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\` and \`height\` 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: -\`\`\`json -{ - "poi": { - "width": 32, - "height": 32, - "x": 0, - "y": 0, - "pixelRatio": 1 - } -} -\`\`\` + \`\`\`json + { + "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 a \`icon\` property with the value \`poi\`. -- 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 a \`icon\` property with the value \`poi\`. - _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: +Apart from the required \`width\`, \`height\`, \`x\`, \`y\`, and \`pixelRatio\` 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 uses [\`icon-text-fit\`](${import.meta.env.BASE_URL}layers/#layout-symbol-icon-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.