Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sprite docs: format list of file types correctly, and document that pixelRatio is required #364

Merged
merged 1 commit into from
Oct 6, 2023
Merged

Sprite docs: format list of file types correctly, and document that pixelRatio is required #364

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions docs/src/routes/sprite/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down