Fix promoteId for line layers (#9210)

* fix promoteId for line layers

* fix promoteId spec definitions (#9212)

* Add render tests for feature state
feature-state/promote-id-line will fail until #9210 is merged

Co-authored-by: Karim Naaji <karim.naaji@gmail.com>

src/data/bucket/line_bucket.js

@@ -121,7 +121,7 @@ class LineBucket implements Bucket {
  const lineSortKey = this.layers[0].layout.get('line-sort-key');
  const bucketFeatures = [];
 
- for (const {feature, index, sourceLayerIndex} of features) {
+ for (const {feature, id, index, sourceLayerIndex} of features) {
  if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
 
  const geometry = loadGeometry(feature);
@@ -130,7 +130,7 @@ class LineBucket implements Bucket {
  undefined;
 
  const bucketFeature: BucketFeature = {
- id: feature.id,
+ id,
  properties: feature.properties,
  type: feature.type,
  sourceLayerIndex,

test/integration/render-tests/feature-state/promote-id-fill-extrusion/style.json

@@ -0,0 +1,161 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "height": 128,
+ "width": 512,
+ "operations": [
+ [
+ "setFeatureState",
+ {
+ "source": "geojson",
+ "id": "9007199254740992"
+ },
+ {
+ "color": "red"
+ }
+ ],
+ [
+ "setFeatureState",
+ {
+ "source": "geojson",
+ "id": "1.2"
+ },
+ {
+ "color": "blue"
+ }
+ ],
+ [
+ "wait"
+ ]
+ ]
+ }
+ },
+ "sources": {
+ "geojson": {
+ "type": "geojson",
+ "promoteId": "foo",
+ "data": {
+ "type": "FeatureCollection",
+ "features": [{
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -0.0005,
+ -0.0001
+ ],
+ [
+ -0.0005,
+ 0.0001
+ ],
+ [
+ -0.0003,
+ 0.0001
+ ],
+ [
+ -0.0003,
+ -0.0001
+ ],
+ [
+ -0.0005,
+ -0.0001
+ ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "9007199254740992"
+ }
+ }, {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -0.0001,
+ -0.0001
+ ],
+ [
+ -0.0001,
+ 0.0001
+ ],
+ [
+ 0.0001,
+ 0.0001
+ ],
+ [
+ 0.0001,
+ -0.0001
+ ],
+ [
+ -0.0001,
+ -0.0001
+ ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "9007199254740993"
+ }
+ }, {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ 0.0003,
+ -0.0001
+ ],
+ [
+ 0.0003,
+ 0.0001
+ ],
+ [
+ 0.0005,
+ 0.0001
+ ],
+ [
+ 0.0005,
+ -0.0001
+ ],
+ [
+ 0.0003,
+ -0.0001
+ ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "1.2"
+ }
+ }]
+ }
+ }
+ },
+ "pitch": 60,
+ "zoom": 18,
+ "layers": [
+ {
+ "id": "fill-extrusion",
+ "type": "fill-extrusion",
+ "source": "geojson",
+ "paint": {
+ "fill-extrusion-height": 10,
+ "fill-extrusion-base": 0,
+ "fill-extrusion-color": [
+ "coalesce",
+ [
+ "feature-state",
+ "color"
+ ],
+ "black"
+ ]
+ }
+ }
+ ]
+}

test/integration/render-tests/feature-state/promote-id-fill/style.json

@@ -0,0 +1,114 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "width": 64,
+ "height": 32,
+ "operations": [
+ [
+ "setFeatureState",
+ {
+ "source": "geojson",
+ "id": "9007199254740992"
+ },
+ {
+ "color": "red"
+ }
+ ],
+ [
+ "setFeatureState",
+ {
+ "source": "geojson",
+ "id": "1.2"
+ },
+ {
+ "color": "blue"
+ }
+ ],
+ [
+ "wait"
+ ]
+ ]
+ }
+ },
+ "zoom": 2,
+ "sources": {
+ "geojson": {
+ "type": "geojson",
+ "promoteId": "foo",
+ "data": {
+ "type": "FeatureCollection",
+ "features": [{
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [ -5, -1 ],
+ [ -5, 1 ],
+ [ -3, 1 ],
+ [ -3, -1 ],
+ [ -5, -1 ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "9007199254740992"
+ }
+ }, {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [ -1, -1 ],
+ [ -1, 1 ],
+ [ 1, 1 ],
+ [ 1, -1 ],
+ [ -0.5, -1 ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "9007199254740993"
+ }
+ }, {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [ 3, -1 ],
+ [ 3, 1 ],
+ [ 5, 1 ],
+ [ 5, -1 ],
+ [ 3, -1 ]
+ ]
+ ]
+ },
+ "properties": {
+ "foo": "1.2"
+ }
+ }]
+ }
+ }
+ },
+ "layers": [
+ {
+ "id": "fill",
+ "type": "fill",
+ "source": "geojson",
+ "paint": {
+ "fill-antialias": false,
+ "fill-color": [
+ "coalesce",
+ [
+ "feature-state",
+ "color"
+ ],
+ "black"
+ ]
+ }
+ }
+ ]
+}