@mapwhit/tilerenderer 1.3.0 → 1.5.0

package/src/style/style.js

@@ -5,7 +5,7 @@ import ImageManager from '../render/image_manager.js';
 import LineAtlas from '../render/line_atlas.js';
 import { queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures } from '../source/query_features.js';
 import { resources } from '../source/resources/index.js';
-import plugin from '../source/rtl_text_plugin.js';
+import { rtlPluginLoader } from '../source/rtl_text_plugin.js';
 import { getType as getSourceType, setType as setSourceType } from '../source/source.js';
 import SourceCache from '../source/source_cache.js';
 import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
@@ -42,6 +42,7 @@ class Style extends Evented {
   });
   #layerIndex = new StyleLayerIndex();
   #opsQueue = [];
+  #rtlPluginLoadedHandler;
 
   constructor(map, options = {}) {
     super();
@@ -63,9 +64,8 @@ class Style extends Evented {
     this._updatedLayers = new Map();
     this._removedLayers = new Map();
     this._resetUpdates();
-
-    this._rtlTextPluginCallbackUnregister = plugin.registerForPluginAvailability(this._reloadSources.bind(this));
-
+    this.#rtlPluginLoadedHandler = this.#rtlPluginLoaded.bind(this);
+    rtlPluginLoader.on('RTLPluginLoaded', this.#rtlPluginLoadedHandler);
     this.on('data', event => {
       if (event.dataType !== 'source' || event.sourceDataType !== 'metadata') {
         return;
@@ -89,6 +89,18 @@ class Style extends Evented {
     });
   }
 
+  #rtlPluginLoaded() {
+    for (const sourceCache of Object.values(this._sources)) {
+      const { type } = sourceCache.getSource();
+      if (type === 'vector' || type === 'geojson') {
+        // Non-vector sources don't have any symbols buckets to reload when the RTL text plugin loads
+        // They also load more quickly, so they're more likely to have already displaying tiles
+        // that would be unnecessarily booted by the plugin load event
+        sourceCache.reload(); // Should be a no-op if the plugin loads before any tiles load
+      }
+    }
+  }
+
   setGlobalStateProperty(name, value) {
     if (!this._loaded) {
       this.#opsQueue.push(() => this.setGlobalStateProperty(name, value));
@@ -784,13 +796,13 @@ class Style extends Evented {
     return this.getLayer(layer).getPaintProperty(name);
   }
 
-  setFeatureState(feature, state) {
+  setFeatureState(target, state) {
     if (!this._loaded) {
-      this.#opsQueue.push(() => this.setFeatureState(feature, state));
+      this.#opsQueue.push(() => this.setFeatureState(target, state));
       return;
     }
-    const sourceId = feature.source;
-    const sourceLayer = feature.sourceLayer;
+    const sourceId = target.source;
+    const sourceLayer = target.sourceLayer;
     const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
@@ -806,12 +818,12 @@ class Style extends Evented {
       this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
       return;
     }
-    if (feature.id == null || feature.id === '') {
+    if (target.id === undefined) {
       this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
       return;
     }
 
-    sourceCache.setFeatureState(sourceLayer, feature.id, state);
+    sourceCache.setFeatureState(sourceLayer, target.id, state);
   }
 
   removeFeatureState(target, key) {
@@ -843,12 +855,12 @@ class Style extends Evented {
     sourceCache.removeFeatureState(sourceLayer, target.id, key);
   }
 
-  getFeatureState(feature) {
+  getFeatureState(target) {
     if (!this._loaded) {
       return;
     }
-    const sourceId = feature.source;
-    const sourceLayer = feature.sourceLayer;
+    const sourceId = target.source;
+    const sourceLayer = target.sourceLayer;
     const sourceCache = this._sources[sourceId];
 
     if (sourceCache === undefined) {
@@ -861,7 +873,11 @@ class Style extends Evented {
       return;
     }
 
-    return sourceCache.getFeatureState(sourceLayer, feature.id);
+    if (target.id === undefined) {
+      this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
+    }
+
+    return sourceCache.getFeatureState(sourceLayer, target.id);
   }
 
   getTransition() {
@@ -1039,7 +1055,7 @@ class Style extends Evented {
   }
 
   _remove() {
-    this._rtlTextPluginCallbackUnregister?.();
+    rtlPluginLoader.off('RTLPluginLoaded', this.#rtlPluginLoadedHandler);
     for (const id in this._sources) {
       this._sources[id].clearTiles();
     }
@@ -1060,12 +1076,6 @@ class Style extends Evented {
     }
   }
 
-  _reloadSources() {
-    for (const sourceCache of Object.values(this._sources)) {
-      sourceCache.reload(); // Should be a no-op if called before any tiles load
-    }
-  }
-
   _generateCollisionBoxes() {
     for (const id in this._sources) {
       this._reloadSource(id);
@@ -1117,7 +1127,8 @@ class Style extends Evented {
         forceFullPlacement,
         showCollisionBoxes,
         fadeDuration,
-        crossSourceCollisions
+        crossSourceCollisions,
+        this.placement
       );
       this._layerOrderChanged = false;
     }
@@ -1132,7 +1143,7 @@ class Style extends Evented {
       this.pauseablePlacement.continuePlacement(Array.from(this._layers.values()), layerTiles);
 
       if (this.pauseablePlacement.isDone()) {
-        this.placement = this.pauseablePlacement.commit(this.placement, browser.now());
+        this.placement = this.pauseablePlacement.commit(browser.now());
         placementCommitted = true;
       }
 

package/src/style/style_layer/circle_style_layer_properties.js

@@ -2,6 +2,13 @@
 
 import { DataConstantProperty, DataDrivenProperty, Properties } from '../properties.js';
 
+const layout = new Properties({
+  'circle-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
+  })
+});
+
 const paint = new Properties({
   'circle-radius': new DataDrivenProperty({
     type: 'number',
@@ -73,4 +80,4 @@ const paint = new Properties({
   })
 });
 
-export default { paint };
+export default { paint, layout };

package/src/style/style_layer/fill_style_layer_properties.js

@@ -2,6 +2,13 @@
 
 import { CrossFadedDataDrivenProperty, DataConstantProperty, DataDrivenProperty, Properties } from '../properties.js';
 
+const layout = new Properties({
+  'fill-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
+  })
+});
+
 const paint = new Properties({
   'fill-antialias': new DataConstantProperty({ type: 'boolean', default: true, expression: { parameters: ['zoom'] } }),
   'fill-opacity': new DataDrivenProperty({
@@ -42,4 +49,4 @@ const paint = new Properties({
   })
 });
 
-export default { paint };
+export default { paint, layout };

package/src/style/style_layer/line_style_layer_properties.js

@@ -31,6 +31,10 @@ const layout = new Properties({
     type: 'number',
     default: 1.05,
     expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'line-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
   })
 });
 const paint = new Properties({

package/src/style/style_layer/symbol_style_layer_properties.js

@@ -19,10 +19,14 @@ const layout = new Properties({
     default: false,
     expression: { parameters: ['zoom'] }
   }),
+  'symbol-sort-key': new DataDrivenProperty({
+    type: 'number',
+    expression: { parameters: ['zoom', 'feature'] }
+  }),
   'symbol-z-order': new DataConstantProperty({
     type: 'enum',
-    values: ['viewport-y', 'source'],
-    default: 'viewport-y',
+    values: ['auto', 'viewport-y', 'source'],
+    default: 'auto',
     expression: { parameters: ['zoom'] }
   }),
   'icon-allow-overlap': new DataConstantProperty({
@@ -149,6 +153,17 @@ const layout = new Properties({
     default: 'center',
     expression: { parameters: ['zoom', 'feature'] }
   }),
+  'text-radial-offset': new DataDrivenProperty({
+    type: 'number',
+    default: 0,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'text-variable-anchor': new DataConstantProperty({
+    type: 'array',
+    value: 'enum',
+    values: ['center', 'left', 'right', 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+    expression: { parameters: ['zoom'] }
+  }),
   'text-anchor': new DataDrivenProperty({
     type: 'enum',
     values: ['center', 'left', 'right', 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],

package/src/style-spec/reference/v8.json

@@ -337,6 +337,10 @@
       "default": "mapbox",
       "doc": "The encoding used by this source. Mapbox Terrain RGB is used by default"
     },
+    "promoteId": {
+      "type": "promoteId",
+      "doc": "A property to use as a feature id (for feature state). Either a property name, or an object of the form `{<sourceLayer>: <propertyName>}`."
+    },
     "*": {
       "type": "*",
       "doc": "Other keys to configure the data source."
@@ -395,9 +399,13 @@
       "doc": "Whether to calculate line distance metrics. This is required for line layers that specify `line-gradient` values."
     },
     "generateId": {
-        "type": "boolean",
-        "default": false,
-        "doc": "Whether to generate ids for the geojson features. When enabled, the `feature.id` property will be auto assigned based on it's index in the `features` array, over-writing any previous values."
+      "type": "boolean",
+      "default": false,
+      "doc": "Whether to generate ids for the geojson features. When enabled, the `feature.id` property will be auto assigned based on its index in the `features` array, over-writing any previous values."
+    },
+    "promoteId": {
+      "type": "promoteId",
+      "doc": "A property to use as a feature id (for feature state). Either a property name, or an object of the form `{<sourceLayer>: <propertyName>}`."
     }
   },
   "source_video": {
@@ -650,6 +658,21 @@
     }
   },
   "layout_fill": {
+    "fill-sort-key": {
+      "type": "number",
+      "doc": "Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.",
+      "sdk-support": {
+          "js": "1.2.0"
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      },
+      "property-type": "data-driven"
+    },
     "visibility": {
       "type": "enum",
       "values": {
@@ -680,6 +703,21 @@
     }
   },
   "layout_circle": {
+    "circle-sort-key": {
+      "type": "number",
+      "doc": "Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.",
+      "sdk-support": {
+          "js": "1.2.0"
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      },
+      "property-type": "data-driven"
+    },
     "visibility": {
       "type": "enum",
       "values": {
@@ -892,6 +930,21 @@
       },
       "property-type": "data-constant"
     },
+    "line-sort-key": {
+      "type": "number",
+      "doc": "Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.",
+      "sdk-support": {
+          "js": "1.2.0"
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      },
+      "property-type": "data-driven"
+    },
     "visibility": {
       "type": "enum",
       "values": {
@@ -1007,9 +1060,27 @@
       },
       "property-type": "data-constant"
     },
+    "symbol-sort-key": {
+      "type": "number",
+      "doc": "Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key wehn they overlap. Features with a lower sort key will have priority over other features when doing placement.",
+      "sdk-support": {
+          "js": "0.53.0"
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      },
+      "property-type": "data-driven"
+    },
     "symbol-z-order": {
       "type": "enum",
       "values": {
+        "auto": {
+          "doc": "If `symbol-sort-key` is set, sort based on that. Otherwise sort symbols by their position relative to the viewport."
+        },
         "viewport-y": {
           "doc": "Symbols will be sorted by their y-position relative to the viewport."
         },
@@ -1017,7 +1088,7 @@
           "doc": "Symbols will be rendered in the same order as the source data with no sorting applied."
         }
       },
-      "default": "viewport-y",
+      "default": "auto",
       "doc": "Controls the order in which overlapping symbols in the same layer are rendered",
       "sdk-support": {
         "basic functionality": {
@@ -1810,6 +1881,92 @@
       },
       "property-type": "data-driven"
     },
+    "text-radial-offset": {
+      "type": "number",
+      "units": "ems",
+      "default": 0,
+      "doc": "Radial offset of text, in the direction of the symbol's anchor. Useful in combination with `text-variable-anchor`, which defaults to using the two-dimensional `text-offset` if present.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.54.0",
+          "android": "7.4.0",
+          "ios": "4.10.0"
+        },
+        "data-driven styling": {
+          "js": "0.54.0",
+          "android": "7.4.0",
+          "ios": "4.10.0"
+        }
+      },
+      "requires": [
+        "text-field"
+      ],
+      "property-type": "data-driven",
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      }
+    },
+    "text-variable-anchor": {
+      "type": "array",
+      "value": "enum",
+      "values": {
+        "center": {
+          "doc": "The center of the text is placed closest to the anchor."
+        },
+        "left": {
+          "doc": "The left side of the text is placed closest to the anchor."
+        },
+        "right": {
+          "doc": "The right side of the text is placed closest to the anchor."
+        },
+        "top": {
+          "doc": "The top of the text is placed closest to the anchor."
+        },
+        "bottom": {
+          "doc": "The bottom of the text is placed closest to the anchor."
+        },
+        "top-left": {
+          "doc": "The top left corner of the text is placed closest to the anchor."
+        },
+        "top-right": {
+          "doc": "The top right corner of the text is placed closest to the anchor."
+        },
+        "bottom-left": {
+          "doc": "The bottom left corner of the text is placed closest to the anchor."
+        },
+        "bottom-right": {
+          "doc": "The bottom right corner of the text is placed closest to the anchor."
+        }
+      },
+      "requires": [
+        "text-field",
+        {
+          "symbol-placement": [
+            "point"
+          ]
+        }
+      ],
+      "doc": "To increase the chance of placing high-priority labels on the map, you can provide an array of `text-anchor` locations: the renderer will attempt to place the label at each location, in order, before moving onto the next label. Use `text-justify: auto` to choose justification based on anchor position. To apply an offset, use the `text-radial-offset` or the two-dimensional `text-offset`.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.54.0",
+          "android": "7.4.0",
+          "ios": "4.10.0"
+        }
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "example": ["center", "left", "right"],
+      "property-type": "data-constant"
+    },
     "text-anchor": {
       "type": "enum",
       "values": {

package/src/symbol/one_em.js

@@ -0,0 +1,4 @@
+//
+// ONE_EM constant used to go between "em" units used in style spec and "points" used internally for layout
+
+export default 24;