Add support for multiple sprites in one style (#1805)

* Add debug-page

* Modify example

* First working proto

* Custom sprites' naming

* Revert

* Better test case

* 1st working prototype

* Cancelation handling

* WIP on new Sprite type

* New syntax proto

* WIP on validation

* Working validation

* Strticter validation for duplicates

* Cover validator with tests

* WIP on unit tests

* Fix ESlint

* Provide doc for the new API. Try to suppress failing tests

* Fix integration tests

* After-review changes

* Update sprite doc and example

* Type validateSprite's options

* WIP on unit testing the loadSprite function - convert base64 to img

* Unit tests for loadSprite

* Add render-tests

* WIP on runtime modification

* Implement API: addSprite, removeSprite

* basic setStyle / setGlyphs behaviour

* setSprite, getSprite, setGlyphs, getGlyphs implementation

* update validation, state, async related logic in style's new APIs

* glyph diff sample

* jsdoc in removeSprite

* lint fix, remove console statements

* Fix typo

* Make 4th param optional

* Fix ESLint

* Update src/style/style.ts

Co-authored-by: Zbigniew Matysek <47562286+zbigniewmatysek-tomtom@users.noreply.github.com>

* Fix broken render test

* Revert "Fix broken render test"

This reverts commit 48baedc.

* Fix render tests

* Address feedback

* 100% test coverage for loadSprite

* Refact

* Try fix the build.

* Try fix the build

* Fix unit tests

* Test `_load` for `sprite: undefined`

* Add changelog entry

* Remove sprite better docs

Co-authored-by: ambientlight <primary.taras.vozniuk@gmail.com>
Co-authored-by: Zbigniew Matysek <47562286+zbigniewmatysek-tomtom@users.noreply.github.com>

Author: 3 people

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## main
 ### ✨ Features and improvements
+- Add support for multiple `sprite` declarations in one style file ([#1805](https://github.com/maplibre/maplibre-gl-js/pull/1805))
 - *...Add new stuff here...*
+- 
 ### 🐞 Bug fixes
 - Fix issue [#1024](https://github.com/maplibre/maplibre-gl-js/pull/1024) - Zoom center not under cursor when terrain is on 
 - Fix errors when running style-spec bin scripts and added missing help. Removed unnecessary script 'gl-style-composite'. ([#1971](https://github.com/maplibre/maplibre-gl-js/pull/1971))

build/generate-style-code.ts

@@ -29,6 +29,8 @@ function nativeType(property) {
             return 'Color';
         case 'padding':
             return 'Padding';
+        case 'sprite':
+            return 'Sprite';
         case 'formatted':
             return 'Formatted';
         case 'resolvedImage':
@@ -91,6 +93,8 @@ function runtimeType(property) {
             return 'ColorType';
         case 'padding':
             return 'PaddingType';
+        case 'sprite':
+            return 'SpriteType';
         case 'formatted':
             return 'FormattedType';
         case 'Image':

build/generate-style-spec.ts

@@ -122,6 +122,8 @@ export type ColorSpecification = string;
 
 export type PaddingSpecification = number | number[];
 
+export type SpriteSpecification = string | {id: string; url: string}[];
+
 export type FormattedSpecification = string;
 
 export type ResolvedImageSpecification = string;

src/render/glyph_manager.ts

@@ -100,6 +100,11 @@ export default class GlyphManager {
                 return;
             }
 
+            if (!this.url) {
+                callback(new Error('glyphsUrl is not set'));
+                return;
+            }
+
             let requests = entry.requests[range];
             if (!requests) {
                 requests = entry.requests[range] = [];

src/render/image_manager.ts

@@ -132,9 +132,9 @@ class ImageManager extends Evented {
         return true;
     }
 
-    updateImage(id: string, image: StyleImage) {
+    updateImage(id: string, image: StyleImage, validate = true) {
         const oldImage = this.images[id];
-        if (oldImage.data.width !== image.data.width || oldImage.data.height !== image.data.height) {
+        if (validate && (oldImage.data.width !== image.data.width || oldImage.data.height !== image.data.height)) {
             throw new Error(`size mismatch between old image (${oldImage.data.width}x${oldImage.data.height}) and new image (${image.data.width}x${image.data.height}).`);
         }
         image.version = oldImage.version + 1;

src/source/worker_tile.ts

@@ -140,7 +140,7 @@ class WorkerTile {
 
         const stacks = mapObject(options.glyphDependencies, (glyphs) => Object.keys(glyphs).map(Number));
         if (Object.keys(stacks).length) {
-            actor.send('getGlyphs', {uid: this.uid, stacks}, (err, result) => {
+            actor.send('getGlyphs', {uid: this.uid, stacks, source: this.source, tileID: this.tileID, type: 'glyphs'}, (err, result) => {
                 if (!error) {
                     error = err;
                     glyphMap = result;

src/style-spec/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-gl-style-spec",
   "description": "a specification for maplibre gl styles",
-  "version": "17.0.2",
+  "version": "17.1.0",
   "author": "MapLibre",
   "keywords": [
     "mapbox",

src/style-spec/reference/v8.json

@@ -77,9 +77,9 @@
       }
     },
     "sprite": {
-      "type": "string",
-      "doc": "A base URL for retrieving the sprite image and metadata. The extensions `.png`, `.json` and scale factor `@2x.png` will be automatically appended. This property is required if any layer uses the `background-pattern`, `fill-pattern`, `line-pattern`, `fill-extrusion-pattern`, or `icon-image` properties. The URL must be absolute, containing the [scheme, authority and path components](https://en.wikipedia.org/wiki/URL#Syntax).",
-      "example": "mapbox://sprites/mapbox/bright-v8"
+      "type": "sprite",
+      "doc": "An array of `{id: 'my-sprite', url: 'https://example.com/sprite'} objects. Each object should represent a unique URL to load a sprite from and and a unique ID to use as a prefix when referencing images from that sprite (i.e. 'my-sprite:image'). All the URLs are internally extended to load both .json and .png files. If the `id` field is equal to 'default', the prefix is omitted (just 'image' instead of 'default:image'). All the IDs and URLs must be unique. For backwards compatibility, instead of an array, one can also provide a single string that represent a URL to load the sprite from. The images in this case won't be prefixed.",
+      "example": "https://api.maptiler.com/maps/openstreetmap/sprite"
     },
     "glyphs": {
       "type": "string",

src/style-spec/style-spec.test.ts

@@ -68,7 +68,8 @@ function validSchema(k, v, obj, ref, version, kind) {
         'formatted',
         'resolvedImage',
         'promoteId',
-        'padding'
+        'padding',
+        'sprite'
     ]);
     const keys = [
         'default',

src/style-spec/validate/validate.ts

@@ -22,6 +22,7 @@ import validateString from './validate_string';
 import validateFormatted from './validate_formatted';
 import validateImage from './validate_image';
 import validatePadding from './validate_padding';
+import validateSprite from './validate_sprite';
 
 const VALIDATORS = {
     '*'() {
@@ -43,7 +44,8 @@ const VALIDATORS = {
     'string': validateString,
     'formatted': validateFormatted,
     'resolvedImage': validateImage,
-    'padding': validatePadding
+    'padding': validatePadding,
+    'sprite': validateSprite,
 };
 
 // Main recursive validation function. Tracks: